まろりかモンスター

パソコンだいすき♡ 雑記ブログです!

【コピペOK】無料JavaScriptライブラリで作成する8種類のチャート/グラフ【Chart.js】

f:id:marorika:20180330010753p:plain

JavaScriptライブラリのChart.jsでは8種類のチャート/グラフを作成することができます。

それぞれのチャート/グラフについて、簡単なサンプルコードがまとまっていると使いやすいと思ったのでまとめました。

チャート/グラフを作成できるJavaScritpライブラリで、どれを使おうか選定している人にも参考になればと思います。

www.marorika.com

Chart.jsで利用できる8種類のチャート/グラフ

Chart.jsでは8種類のチャート/グラフを作成することができます。

8種類のチャート/グラフ

  • 線グラフ
  • 棒グラフ
  • レーダーチャート
  • ドーナツチャート
  • 円グラフ
  • 鶏頭図(けいとうず)
  • 散布図
  • バブルチャート

それぞれ実際のグラフと、グラフを作成したJavaScriptのコードを掲載していきます。

なおもちろん、掲載したサンプルコードは必要に応じてコピペして利用いただいてかまいません。

www.marorika.com

線グラフ

棒グラフ

レーダーチャート

ドーナツチャート

円グラフ

鶏頭図(けいとうず)

散布図

バブルチャート

おわりに

Chart.jsで使える8種類のチャート/グラフについて、サンプルを紹介しました。

今回紹介したものはシンプルで簡単なものですが、 十分利用しやすいと思います。

チャートやグラフを作成する際は是非ご利用ください。