WordPress | CSVを読み込んでChart.jsの棒グラフを描画する方法

キャラ,HP,MP,ちから,すばやさ
ヨシヒコ,330,200,150,90
アリーナ,300,0,200,220
マーニャ,230,300,40,130
ミネア,240,170,80,80

<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js">
</script>

<div style="width:100%">
  <canvas id="canvas"></canvas>
</div>

<script>
window.onload = function() {
  let キャラ = [];
  let HPのデータ = [];
  let MPのデータ = [];
  let ちからのデータ = [];
  let すばやさのデータ = [];
  let csvPath = 'https://wordpress.kazunoriri.com/wp-content/uploads/2022/06/sample1.csv'

  let req = new XMLHttpRequest();
  req.open('get', csvPath, true);                                       // 1
  req.send(null);
  req.onload = function() {                                             // 2
    makeGraphData();
    drawGraph();

    function makeGraphData() {
      let reqArray = req.responseText.split('\n');                      // 3
      reqArray.forEach((element) => {                                   // 4
        let 行データ = element.split(',')
        let indexHP = reqArray[0].split(',').indexOf('HP');
        let indexMP = reqArray[0].split(',').indexOf('MP');
        let indexちから = reqArray[0].split(',').indexOf('ちから');
        let indexすばやさ = reqArray[0].split(',').indexOf('すばやさ');
        キャラ.push(行データ[0]);
        if(行データ[indexHP] !== undefined) {
          HPのデータ.push(Number(行データ[indexHP]));
        };
        if(行データ[indexMP] !== undefined) {
          MPのデータ.push(Number(行データ[indexMP]));
        };
        if(行データ[indexちから] !== undefined) {
          ちからのデータ.push(Number(行データ[indexちから]));
        };
        if(行データ[indexすばやさ] !== undefined) {
          すばやさのデータ.push(Number(行データ[indexすばやさ]));
        };
      });
      removeHeader()

      function removeHeader() {
        キャラ.shift();
        HPのデータ.shift();
        MPのデータ.shift();
        ちからのデータ.shift();
        すばやさのデータ.shift();
      };
    };

    function drawGraph() {
      let ctx = document.getElementById('canvas').getContext('2d');
      let グラフ = new Chart(ctx, {
        type: 'bar',
        data: グラフのデータ,
        options: グラフのオプション
      });
    };

  };

  var グラフのデータ = {
    labels: キャラ,
    datasets: [
      {
        label: 'HP',
        data: HPのデータ,
        borderColor     : "rgba(55,155,255,0.7)",
        backgroundColor : "rgba(55,155,255,0.5)",
      },
      {
        label: 'MP',
        data: MPのデータ,
        borderColor     : "rgba(255,100,133,0.7)",
        backgroundColor : "rgba(255,100,133,0.5)",
      },
      {
        label: 'ちから',
        data: ちからのデータ,
        borderColor     : "rgba(55,255,55,0.7)",
        backgroundColor : "rgba(55,255,55,0.5)",
      },
      {
        label: 'すばやさ',
        data: すばやさのデータ,
        borderColor     : "rgba(255,222,133,0.7)",
        backgroundColor : "rgba(255,222,133,0.5)",
      },
    ],
  };

  var グラフのオプション = {
    responsive: true,
    scales: {
      yAxes: [
        {
          scaleLabel: {
            display: true,
            labelString: 'あたい'
          }
        }
      ]
    }
  };
};

</script>