エラー内容

vue-chart.jsを使っているとブラウザ側のコンソールに次のエラーが出ることがある。

[Vue warn]: Invalid prop: type check failed for prop "chartData". Expected Object, got Null

厳密にはエラーではなくwarnで、グラフ描画そのものに影響はなく無視しても動作に問題はないが、Consoleを汚すという理由もあり解決方法を探した。

解決法

vueファイル側でコンポーネントに送るデータ :chart-data="datacollection" となっている場合、恐らくデータ部にて datacollection: nullとなっていると思われる。これを次に変更して定義する。

datacollection: { labels:[], datasets: [] }

原因

そもそもこのエラーはprop（子コンポーネントに渡すデータ）がNullだと言っている。初めからデータセットが入っているプログラムであればこの問題は出ないが、私のケースのように起動後にサーバーからデータを取得しながら描画させたい場合どうしても初期値をNullにしがちである。

また datacollection:{} で定義すれば解決すると考えたが参照時にキーが無い旨のエラーが出るため上記のコードで定義ほうが良いだろう。

参考

次のフォーラムを参考にさせていただいた。

[英語] https://github.com/apertureless/vue-chartjs/issues/497

所感

少々クセのある実装が必要なvue-chart.jsではあるが、D3.jsと思うといくらか学習コストは低いので引き続き使っていこうと考えている。

今後の更新にも期待していきたい。