- 公開日
Canvas+Chart.jsでグラフを描画する
昨日のエントリで実験的に記事内のグラフを画像ではなくJSでCanvas要素を使って描画してみました。そのときに使用したChart.jsがなかなかいい感じだったので紹介。
導入
まずはChart.jsをincludeしてください。
<script src="Chart.js"></script>
線グラフ
まずは線グラフ。
棒グラフ
次は棒。
レーダーチャート
次はレーダーチャート。幅の制限により少し小さくなってしまいました。
円グラフ
最期に円グラフ。
その他
もっと細かいチャートの設定がしたければdataのあとにオプション引数を取ることもできます。その他のグラフ、細かいオプションに関しては公式ドキュメントを参考にしてください。
あと細かいところですがチャートを描画するときにアニメーションで描画されてます。気付かなかったかもなので一応。
課題
見てわかるようにレスポンシブデザインに対応しておりません。なのでとりあえずのところ現在はwidthを300に固定することにしています（なのでグラフが小さくなっております）。これに関してはGithub Issuesで現在も議論されておりますがスマートな解決法は無いので、公式のレスポンシブデザイン対応が期待されます。