問題
グラフを、データを元に動的に生成したい。
解決策
jQueryライブラリ「Chart.js」を使う。
データを元に、グラフを動的に生成する
グラフをたくさん載せる際、ソフトでグラフを一つずつ作って画像に書き出す手間がどうしてもありますが、jQueryライブラリ「Chart.js」を使うことで、グラフを動的に生成することができます。
今回は「Chart.js」の実装方法をご紹介します。
DEMOはこちら
必要なファイルの読み込み
まず、準備として、下記ファイルを読み込みます。
今回はCDNJSのバンドル版を読み込む例になります。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>「Chart.js」の読み込み方法については、下記をご参照ください。
インストール · Chart.js 日本語ドキュメント
HTMLはこちら
canvasタグを配置します。
<canvas id="chart01"></canvas>CSSはこちら
#chart01{
width: 100%;
height: 300px;
}設定、実行するjavascriptはこちら
「要素.document.getElementById(“chart01”).getContext(‘2d’)」＋「new Chart()」で実行します。
- type：棒グラフや折れ線グラフ等、グラフの種類を設定します。
- data：グラフのデータを設定します。
- options：グラフのオプションを設定します。
var ctx = document.getElementById("chart01").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Aさん", "Bさん", "Cさん", "Dさん"],
datasets: [{
label: '得点',
data: [40, 20, 70, 60],
backgroundColor: [
'rgba(255, 99, 132, 0.4)',
'rgba(54, 162, 235, 0.4)',
'rgba(255, 206, 86, 0.4)',
'rgba(75, 192, 192, 0.4)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
max: 100
}
}]
}
}
});ポイント!
- グラフのラベルを設定するには、data → labelsで [ラベル名, ラベル名, ラベル名, ラベル名] と記述します。
- グラフのラベルのデータを設定するには、data → datasetsの中に記述します。
以下が設定できる項目の一例です。label グラフのデータの凡例 data グラフの各ラベルのデータ backgroundColor グラフの各ラベルのバーの背景色 borderColor グラフの各ラベルのバーの枠線の色 borderWidth グラフのバーの枠線の太さ
ここに注意!
datasetsでの各ラベルの設定の際は、dataのlabelsに設定したラベル数を遵守する必要があります。
参照
以下のサイトが、より詳しく解説してくれています。
【Chart.js · Chart.js 日本語ドキュメント】
https://misc.0o0o.org/chartjs-doc-ja/
コメント