【メモ】vue-chartjs を入れて「[Vue warn]: Invalid prop: type check failed for prop “chartData”」が出る場合の対処方法【#np2020】

グラフを描くJavaScriptライブラリとして最近人気なのが「Chart.js」というやつらしいです。このサイトでもいくつかグラフを作っていますが、いまだにFlashを利用していていい加減切り替えたいと思ってテスト中です。


移行後は「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.

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.

[Vue warn]: Invalid prop: type check failed for prop “chartData” · Issue #497 · apertureless/vue-chartjs · GitHub


確かにサンプルの中ではデフォルトのデータセットをnullで定義していました。これが良くないんですね。この代わりに {} で定義するようにしたらこのエラーはなくなりました。なるほど。この手の情報ってなかなか日本語で見つからないですね。みんなの環境ではエラーにならないのかな。よくわかりませんが。


ともあれこれでまた一歩、近付きました。あとはAPIを整備すれば切り替えられるかな?

スポンサーリンク

スポンサーリンク