Chart.jsを使ってJavascriptでグラフ表示
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:400px;max-width:800px;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>