chart.js でグラフを表示する

chart.js を使って色々なグラグを表示してみます。

chart.js

chart.js はシンプルで柔軟なグラフを綺麗に描画できる、javascript のチャートライブラリです。

インストール

種類

主に6 種類のチャートがあります。組み合わせて使用することもできます。

  • line
  • bar
  • radar
  • polar area
  • doughnut and pie
  • bubble

設定

描画させる為の canvas と表示する為の javascript を設定します。

bar タイプを例としては下記のような設定となります。backgraoundColor は RGB、16進数 または HLS にて指定できます。また、チャートを指定のパターンにすることもできます。

実行

まとめ

手軽に柔軟なグラフを描画することができました。複合して使えたり、描画したグラフを画像にすることもできますので、グラフ作成におすすめです。

参考

公式:Chart.js

公式ドキュメント:Chart.js documentation

返信を残す

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

CAPTCHA