前回記事でも触れましたが、ベンチマークのグラフを表示するのにどうしようかと迷って、Chart.js を使用してみることにしました。
今回は、その時のメモを参考にしながら、Chart.js と戯れてみたいと思います。
Photo by Isaac Smith on Unsplash
Chart.js を使用する準備
詳細は、Chart.js の本家サイトのドキュメント に詳細がありますが、インスタントに使う場合には、CDN を使用するといいでしょう。
ページの<head> セクションに、次の 行を追加してください。
<script type="text/javascript">https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js</script>場合によっては、
<script type="text/javascript">https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.bundle.min.js</script>を利用するみたいです。違いは、内部に moment.js が組み込まれているみたいです。これは時間軸を使用する場合に必要になります。すでに Moment.js を利用している場合には必要ありません。
サクッと棒グラフを表示させてみる
さっそく、Chart.js を使用してグラフを表示させます。
<canvas id="myChart" width="400" height="200"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['赤', '青', '黃', '緑', '紫', '橙'],
datasets : [{
label : 'データの数',
data: [12, 19, 3, 5 ,2 ,3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 102, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
title : {
fontSize: 16,
display : true,
position : 'top',
text : '棒グラフ'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
説明
ざっくりとした手順を書くと、下のようになります。
<canvas id="myChart" width="400" height="200"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: '',
data: data,
options: options
});
</script>都合、Javascript を HTML に書いていますが、別ファイルの方でドキュメント読み込み時に実行されるようにしても構いません。
Canvas は グラフを表示させる実体になります。この描画コンテキスト （ctx） を取得してそれを Chart.js のインスタンスに渡します。
このインスタンスには、グラフの設定、type、data、options を含んだ Config オブジェクトも渡します。
実際にはこれだけのことで、グラフを描画させることができます。
見た感じではめちゃ簡単ですよね？
type は、グラフのタイプ（ bar=棒グラフ とか line=折れ線グラフ など） を指定するだけなんですが、要は data と options の内容です。
data は文字通り、グラフのデータを指定します。labels プロパティにグラフの各項目のラベル（項目名）が配列として入ります。
datasets プロパティにはデータセット、要するに先の labels に対応した数値データ（data）、角数値データのグラフの見た目（backgroundColor = 棒グラフの塗りつぶし色、borderColor = 棒グラフの境界色、borderWidth = 棒グラフの縁の線の太さ）、凡例の表示名（label）などが入ります。
見た目の部分に関しては、上の例では配列に色を定義することで、各項目ごとに色を変えていますが、すべて同じ色をするときには、単に、backgroundColor : rgba(...) という感じに定義します。
もちろん、datasets は配列になっているので複数のデータセットを定義できます。
options はかなり複雑になってきますが、後の例でもいくつかのパターンを示そうと思います。
上の例では、scales: 目盛 → yAxes: Y軸 = 縦軸 → ticks: 目盛りの指標 に、beginAtZero: true として、Y軸の始点が 0（Zero）から始まるように指定しています。
その他のグラフを見てみる
上記を踏まえて、その他の type のグラフを見てみます。
hrizontalBar: 横棒グラフ
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['赤', '青', '黃', '緑', '紫', '橙'],
datasets : [{
label : 'データの数',
data: [12, 19, 3, 5 ,2 ,3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 102, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>横棒グラフは、単純に type= の値を barから horizontalBar に変えただけです。
使用できるオプションは、bar と同じになりますが、それぞれを相互に変換する場合は、xAxes、yAxes の違いに気をつけてください。
Line: 折線グラフ
<canvas id="myChart" width="400" height="200"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['赤', '青', '黃', '緑', '紫', '橙'],
datasets : [{
label : 'データの数',
data: [12, 19, 3, 5 ,2 ,3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
borderWidth: 2,
borderDash: [10,3,3,3,3,3],
borderDashOffset: 0,
pointBorderColor: 'rgba(255, 99, 132, 1)',
pointBackgroundColor: 'rgba(255, 99, 132, 0.4)',
pointBorderWidth: 1,
pointRadius: 10,
pointStyle: 'rectRot'
}]
},
options: {
title : {
fontSize: 16,
display : true,
position : 'top',
text : '曲線グラフ'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>折れ線グラフの場合は、先程の棒グラフの場合と比べると、datasets の項目が増えていますが、これはbackgroundColor、borderColorに加えて、point で始まる、type='line' 関連のプロパティを使用しているからです。
また、borderDash に適当に数字を入れるとグラフの先に様々な破線を指定することができます。
一つ気にになるのは、点と点を結ぶ線がベジエ曲線になっていることではないでしょうか？
もし、直線にしたい場合は、optionsに次のような項目を追加します。
options: {
:
:
elements: {
line: {
tension: 0,
borderWidth: 3
}
}
}elements → line → tension = 0 とすることで、すべての線が直線になります。
radar: レーダーチャート
次にレーダーチャートです。
<canvas id="myChart" width="400" height="200"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['赤', '青', '黃', '緑', '紫', '橙'],
datasets: [{
label: 'データの数',
data: [12, 19, 3, 5, 2, 3],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 2,
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}]
},
options: {
scale: {
ticks: {
beginAtZero: true,
min: 0,
}
},
elements: {
line: {
tension: 0,
borderWidth: 3
}
}
}
});
</script>レーダーチャート、前述のグラフと比べると特筆すべき部分はないですが、scales の ticks の設定は xAxes や yAxes がない点に注意してください。
pie: 円グラフと、doughnut: ドーナツ
円グラフ。
<canvas id="myChart1" width="400" height="200"></canvas>
<script>
var ctx = document.getElementById('myChart1').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['赤', '青', '黃', '緑', '紫', '橙'],
datasets: [{
label: 'データの数',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 102, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
title : {
fontSize: 16,
display : true,
position : 'top',
text : '円グラフの例'
},
}
});
</script>ドーナツ。これは、円グラフの真ん中に穴が空いているタイプのグラフです。
<canvas id="myChart2" width="400" height="200"></canvas>
<script>
var ctx = document.getElementById('myChart2').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['赤', '青', '黃', '緑', '紫', '橙'],
datasets: [{
label: 'データの数',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 102, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
title: {
fontSize: 16,
display: true,
position: 'top',
text: 'ドーナツ'
},
}
});
</script>ドーナツグラフには、真ん中の穴の大きさを設定するプロパティがあります。値はドーナツの大きさのパーセンテージを数値で設定します（デフォルトでは50、0にすると円グラフになります）。
options: {
:
cutoutPercentage : 50
:
}円グラフ、ドーナツともに、データセットを複数にするとグラフを2重円などにもできます。
<canvas id="myChart2" width="400" height="200"></canvas>
<script>
var ctx = document.getElementById('myChart2').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['赤', '青', '黃', '緑', '紫', '橙'],
datasets: [{
label: 'データの数1',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 102, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}, {
label: 'データの数2',
data: [18, 13, 4, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 102, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
title: {
fontSize: 16,
display: true,
position: 'top',
text: '二重ドーナツ'
},
}
});
</script>
まとめ
ここで紹介した以外にも、polarArea、Bubble、Scatter などがあります。詳しくは、Chart.js 本家サイト へ行き 'Samples' を参照してみてください。
また、詳細なドキュメントは 本家サイトのドキュメントを参照してください。
最初は Google Charts と迷ったんですが、トレンドを見ると、今国内ではChart.js の方が人気みたいなので、こちらを選択してみました。Google Charts には Geo Chart みたいな地図を使ったものもあるので気にはなってるんですけどね・・
Chart.js は割と構文も単純でわかりやすいな、と思うのですが、なにより公式ドキュメントが見づらい。しかしながら、ググってもらったらわかると思うのですが、日本語ドキュメントもあります。誰が書いたのかわからないのがちょっと気になりますが、こちらとサンプルのソース見たりすれば大方使えそうな気がします。
Chart.js については、もう一つ記事を作成する予定です。もう少し細かいカスタマイズができるみたいなので、それを試してみる予定です。
0件のコメント