Chart.jsを使ってJavascriptでグラフ表示
JavaScriptでグラフを描画したいけれど、どのライブラリを使えばいいか迷っていませんか？
この記事では、Chart.jsを使って折れ線グラフやレーダーチャートを簡単に作成する方法を詳しく解説します。
Chart.js（https://www.chartjs.org/）を使うとブラウザ上でCanvasにグラフを表示させることができます。
CDNを使用するので、以下のタグを入れる必要があります。
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>また、bodyタグ内にグラフを入れるcanvasタグを入れる必要があります。
レスポンシブ対応したい場合は親コンテナ内に配置し、親コンテナのwidth,heightなどを設定します。
棒グラフ、折れ線グラフなどの場合、基本的には 幅:高さ＝2:1 のサイズになるようです。
レーダーチャートなどは基本的には 幅:高さ＝1:1 になるようです。
<div style="position:relative;height:calc(calc(100vw - 16px) / 2);width:calc(100vw - 16px);max-height:400px;max-width:800px;box-sizing:border-box;">
<canvas id="myChart"></canvas>
</div>
棒グラフ
ソースコード
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <div style="position:relative;height:calc(calc(100vw - 16px) / 2);width:calc(100vw - 16px);max-height:400px;max-width:800px;box-sizing:border-box;"> <canvas id="myChart"></canvas> </div> <script> //グラフ表示先のcanvasを取得 new Chart(document.getElementById('myChart'), { type: 'bar', data:{ labels: ['Aさん', 'Bさん', 'Cさん'],//各棒グラフのラベル datasets: [ { label: '2022年度業績グラフ', data: [12, 19, 3], //棒グラフのデータ borderWidth: 1, //棒グラフの縁の太さ yAxisID: 'yAxis', //使用するY軸のID }, { label: '2023年度業績グラフ', data: [10, 15, 10], //棒グラフのデータ borderWidth: 4, //棒グラフの縁の太さ yAxisID: 'yAxis', //使用するY軸のID }, { label:'平均', data:[11,17,6.5], type: 'scatter', showLine: true, yAxisID: 'yAxis', //使用するY軸のID }, ] }, options:{ responsive: true, maintainAspectRatio:true, animation:true, //アニメーションする scales: { yAxis:{ //Y軸のID min:0, max:20, //Y軸の最小値と最大値 title:{ display:true, //軸ラベルを使用する align:'center', //軸ラベルを中央に配置 text:'百万円', //軸ラベルに表示する文字列 }, }, }, plugins: { title: { display: true, text: '業績（タイトル）', } } }, }); </script>
折れ線グラフ
ソースコード
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <div style="position:relative;height:calc(calc(100vw - 16px) / 2);width:calc(100vw - 16px);max-height:600px;max-width:600px;box-sizing:border-box;"> <canvas id="myChart2"></canvas> </div> <script> //グラフ表示先のcanvasを取得 new Chart(document.getElementById('myChart2'), { type: 'line', data:{ labels: ['2022年7月', '2022年8月', '2022年9月', '2022年10月', '2022年11月', '2022年12月',],//ラベル datasets: [ { label: 'Aさん', data: [6,4,5,9,14,10], //折れ線グラフのデータ borderWidth: 1, //折れ線グラフの線の太さ yAxisID: 'yAxis', //使用するY軸のID pointStyle:'circle', //ポイントの形 pointRadius:5, //ポイントのサイズ }, { label: 'Bさん', data: [8,12,14,14,18,14], //折れ線グラフのデータ borderWidth: 2, //折れ線グラフの線の太さ yAxisID: 'yAxis', //使用するY軸のID pointStyle:'rectRot', //ポイントの形 pointRadius:5, //ポイントのサイズ }, { label:'Cさん', data:[10,8,6,5,12,8], //折れ線グラフのデータ borderWidth: 4, //折れ線グラフの線の太さ yAxisID: 'yAxis', //使用するY軸のID pointStyle:'triangle', //ポイントの形 pointRadius:5, //ポイントのサイズ }, ] }, options:{ responsive: true, maintainAspectRatio:true, animation:true, //アニメーションする scales: { yAxis:{ //Y軸のID min:0, max:20, //Y軸の最小値と最大値 title:{ display:true, //軸ラベルを使用する align:'center', //軸ラベルを中央に配置 text:'百万円', //軸ラベルに表示する文字列 }, }, }, plugins: { title: { display: true, text: '業績（タイトル）', } } }, }); </script>
レーダーチャート
ソースコード
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div style="position:relative;height:calc(100vw - 16px);width:calc(100vw - 16px);max-height:600px;max-width:600px;box-sizing:border-box;">
<canvas id="myChart3"></canvas>
</div>
<script>
//グラフ表示先のcanvasを取得
new Chart(document.getElementById('myChart3'), {
type: 'radar',
data:{
labels: [ //ラベル
'シングルスレッド演算', 'マルチスレッド演算',
'総合CPU性能', 'GPU性能', '業務向け性能', '動画編集', 'ゲーム性能',
],
datasets: [
{ //１つ目のレーダーチャート
label: 'I社CPU(AVX2考慮)+n社GPU',
data: [8.7, 10.0, 9.4, 8.6, 8.6, 8.6, 8.2], //レーダーチャートのデータ
borderWidth: 1, //レーダーチャートの線の太さ
pointStyle:'circle', //ポイントの形
pointRadius:5, //ポイントのサイズ
fill: true,
backgroundColor: 'rgba(100, 128, 255, 0.2)', // 透明度を0.2に設定
},
{ //２つ目のレーダーチャート
label: 'A社CPU',
data: [9.0, 6.5, 7.2, 4.0, 5.0, 7.0, 3.0], //レーダーチャートのデータ
borderWidth: 2, //レーダーチャートの線の太さ
pointStyle:'rectRot', //ポイントの形
pointRadius:5, //ポイントのサイズ
fill: true,
backgroundColor: 'rgba(255, 128, 100, 0.4)', // 透明度を0.4に設定
},
]
},
options:{
responsive: true,
maintainAspectRatio:true,
animation:true, //アニメーションする
scales: {
r:{ //軸
min:0, max:10, //Y軸の最小値と最大値
ticks: {
stepSize: 2 // 目盛りの間隔
},
pointLabels:{
font:{
size:14,
},
},
},
},
plugins: {
title: {
display: true,
text: '15～25万円のPCでAIが論理的に評価したCPU(AVX考慮)+GPU性能',
font:{
size:19,
},
},
legend:{
display:true,
labels:{
font:{
size:17,
},
},
},
},
},
});
</script>