Chart.jsを使ってJavascriptでグラフ表示

Chart.jsを使ってJavascriptでグラフ表示

Chart.js（https://www.chartjs.org/）を使うとブラウザ上でCanvasにグラフを表示させることができます。
CDNを使用するので、以下のタグを入れる必要があります。

  <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 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>