面白い動きや便利な機能をJSで実装！その１：簡単にグラフを作成する方法！

投稿日：2015年2月2日更新日：2023年12月6日

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなどを
作成することができる「Chart.js」をご紹介致します。

今回は一番汎用性の高いと思われる折れ線グラフを作成してみたいと思います。
表示の瞬間に動きがあるのも特長です。
CSSの設定も特に必要ないので非常に助かります。

1 デモ
2 実装方法
- 2.1 初めにJSを設置します。
- 2.2 次にそれぞれの数値を設定します。

デモ

マウスをグラフの上にもっていけばその部分のそれぞれの数値を表示することもできます。

実装方法

初めにJSを設置します。

次にそれぞれの数値を設定します。

var lineChartData = {
labels : [“１月”,”２月”,”３月”,”４月”,”５月”,”６月”,”７月”],
datasets : [
{
fillColor : “rgba(220,220,220,0.5)”,
strokeColor : “rgba(220,220,220,1)”,
pointColor : “rgba(220,220,220,1)”,
pointStrokeColor : “#fff”,
data : [40,20,50,75,90,30,44]
},
{
fillColor : “rgba(151,187,205,0.5)”,
strokeColor : “rgba(151,187,205,1)”,
pointColor : “rgba(151,187,205,1)”,
pointStrokeColor : “#fff”,
data : [60,50,90,19,20,40,200]
},
{
fillColor : “rgba(151,187,205,0.5)”,
strokeColor : “rgba(151,187,205,1)”,
pointColor : “rgba(151,187,205,1)”,
pointStrokeColor : “#fff”,
data : [20,40,150,40,75,80,100]
}
]
}
var myLine = new Chart(document.getElementById(“chart”).getContext(“2d”)).Line(lineChartData);

各項目の設定は下記を参考にしてください。
labels：下に表示されるラベルの設定
fillColor：数値内の色の設定
strokeColor：境界線の色の設定
pointColor：点の色の設定
pointStrokeColor：点の周りの色の設定
data：それぞれの数値をここで設定

同じグラフ上に重ねていくつも表示できるのでとても便利です。
グラフごとに色を変更することで見やすくなり、数値を変えるだけで変更可能です。
ぜひご活用頂ければと思います。

今回は取り急ぎ、Line chartsのみの説明となります。
いずれ他のグラフの作成の仕方をご説明したいと思います。

2/19 他のグラフ紹介をアップしました。
面白い動きや便利な機能をJSで実装！その2：いろんな種類のグラフを簡単に作成！

ファイルのダウンロードは下記からお願い致します。

Chart.js公式サイト
http://www.chartjs.org/