Vue.jsでグラフ表示

この記事ではvue.jsを使用したグラフの表示方法を紹介します。char.jsを使用することで簡単にグラフを表示することができます。char.jsは多種多様なグラフを描写できるMISライセンスOSSです。

vue.jsを使用する場合vue-chartjsを使用してグラフ表示する方法を紹介している記事が多いですが、今回はvue-chartjsを使用せずにchart.jsのみでグラフ表示させます。

使用方法

CDNでchart.jsを使用する場合はHTMLに以下の記述をしてください。

ローカルに保存して使用する場合は、npmで以下のコマンドを実行してインストールしてください。

グラフを表示する

HTMLはcanvas要素にidを設定するだけです。今回、vue.jsとchart.jsはどちらもCDNを使用しています。ローカルに保存して使用する場合はscript要素のsrcに保存先のパスを定義して下さい。

JavaScriptで表示内容を定義します。以下のサンプルではdataを配列に固定でデータを設定していますが、配列にデータを追加、削除、変更することでグラフ表示を変更可能です。折れ線グラフを使用する場合はtypeを’line’で定義します。

複数の折れ線グラフを表示する場合はdatasetsをグラフ数分定義します。

Vue.jsを使用しているので、chartListsOkなどの配列にデータを追加したり、変更すれば動的にグラフ表示を変更することが可能です。

また、labelListに表示するデータ数分データがないとグラフが表示されないので注意です。

まとめ

chart.jsを使用して簡単に綺麗なグラフを表示することができました。グラフの種類や表示のオプションがたくさんあるので、使いこなすのは大変ですが、この記事のサンプルで最低限折れ線グラフを表示することができます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です