移行後は「Chart.js」できちんと表示出来るようになっている予定ですが、その「Chart.js」を「Vue.js」と連携させるライブラリ「vue-chartjs」というのがありまして、それを導入すると、
- 動的にデータを取得してグラフを書き換える
- ルーティングでグラフを切り替える
- SPAで表現する
といったことが「Vue.js」を使って実現可能なので、そのあたりの実装を現在検討中です。といってもめちゃくちゃ便利に良く出来ているので、オフィシャルサイトや解説記事を頼りに設定していけばすぐに綺麗なグラフが作れます。ステキ。
参考になるのはこの辺のサイト、記事ですね。
最初に | vue-chartjs
Laravel上でVue.jsとChart.jsを利用してグラフを描いてみる – Qiita
Qiitaの方は、@tosite0345 さんが用意してくれているGitHubも一緒に参考にするとすごい勉強になります。
ところで、表題のエラーの件。
これ、@tosite0345 さんのサンプルの通りにやると出てくるエラーです。グラフ自体は正常に描画されるのでデバッグモードで見てないと気付かないと思いますが、コンソールには表示されます。色々試しても直せなくてググったところ、こんな回答がありました。
Oh now I understand.
[Vue warn]: Invalid prop: type check failed for prop “chartData” · Issue #497 · apertureless/vue-chartjs · GitHub
Well. the issue is that the prop is defined as an object in the mixin. And has a default value of an empty object:
https://github.com/apertureless/vue-chartjs/blob/develop/src/mixins/index.js#L89-L92
You are however passing null to it. Because you define
datacollection: null
if you change that to datacollection: {} the warning will go away.
確かにサンプルの中ではデフォルトのデータセットをnullで定義していました。これが良くないんですね。この代わりに {} で定義するようにしたらこのエラーはなくなりました。なるほど。この手の情報ってなかなか日本語で見つからないですね。みんなの環境ではエラーにならないのかな。よくわかりませんが。
ともあれこれでまた一歩、近付きました。あとはAPIを整備すれば切り替えられるかな？
