読者です 読者をやめる 読者になる 読者になる

Chart.jsを使ってチャートを表示する

Chart.jsを使って線グラフを描いてみました。Chart.jsはHTML5のCanvasを利用していて、線グラフ、棒グラフ、レーダーチャート、円グラフ、を表示できます。他のライブラリに比べて設定が簡易で、面倒なスケーリングやアニメーションなんかも自動でしてくれる、なかなか良質なライブラリです。細かい設定は出来ない様ですが、とりあえずチャートを表示したい、という時にお勧めです

準備

下記サイトのDownloadを押すとGitHubに飛びます。リポジトリのChart.jsまたはChart.min.jsのみ使います。Download Zipでまとめてダウンロードして、解凍した中から該当ファイルを取り出すのが早いでしょう

サンプルコード

他のサイトではlabelsとdatasetsにハードコードでデータを書いてることが多かったので、データを入れ込んで更新する様にしてみました。datasetsやChart生成時にいろいろ設定できる項目があります。こちらを参照してください。

2点ほど嵌ったところを挙げておきます

レスポンシブ対応

canvasにwidth・heightが無いとChart.js側でデフォルト値を設定するらしく、CSSが効かないんですよ。Google先生に聞くとdivでラップして、divのwidth・heightを後からJavaScriptでcanvasに入れ込む方法が見つかりました。が、Chart生成時のオプションでresponsive:trueを設定すれば、それだけでOKでした

データの更新

チャートのデータ更新ですが、StackOverflowでもいくつか質問が挙がっていました。1点を更新する事は出来るのですが、全データ入れ替えがうまくいかないんですよ。結局力技で全データをremoveして、データをaddしていく事で解決しました。サンプルコードのupdateChartData()がその処理をしている箇所です

removeAllなりclearなり、全データを入れ替えるメソッドなりを用意してくれると、スマートに解決できるんですけどねぇ

デモ

サンプルコードの動作を確認できます。更新ボタンを押してみて下さい

 

プライバシーポリシー