javascriptでcsvファイルのデータを読み込むと文字化けする。

実現したいこと

javascriptでcsvファイルのローカルパスを受け取り、そのcsvファイルからデータを取り出したうえで、そのデータをChart.jsを用いてグラフに描画したい。

発生している問題・分からないこと

csvファイルから抽出したデータが文字化けしているので、Chart.jsでそのデータをグラフに出力しようとしても出力できない(と思われます。)

エラーメッセージ

error
1エラーメッセージではないですが、日本語(JISコード)の要素が入っているdataArray[0]内の文字が以下のように文字化けしています。
2理想: [大谷翔平,勝利,敗戦,セーブ,ホールド,与四死球,奪三振,防御率,打率,HR数,打点,盗塁,三振,OPS]
3
4現状: 理想の「OPS」以外が文字化けしています。

該当のソースコード

javascript
1    // csvファイルからchart(グラフ)を表示する
2    function csv_data(path) {
3      const request = new XMLHttpRequest();
4      request.addEventListener('load', (event) => {
5        const response = event.target.responseText;
6        csv_array(response);
7      });
8      request.open('GET', path, true);
9      request.send();
10    }
11 
12    function csv_array(csv_data) {
13      const dataArray = [];
14      const dataString = csv_data.split('\n');
15      for (let i = 0; i < dataString.length; i++) {
16        dataArray[i] = dataString[i].split(',');
17      }
18      alert(dataArray[0]);
19      drawLineChart(dataArray);
20    }
21
22    function drawLineChart(data) {
23      var colNum = data[0].length;
24      var rowNum = data.length;
25      var tmpData = new Array(colNum);
26      var tmpDatasets = new Array(rowNum);
27      for (var row in data) {
28        for (var i = 0; i < colNum; i++){
29          tmpData[i].push(data[row][i]);
30        };
31      };
32      for (var j = 1; j < colNum; j++){
33        tmpDatasets[j].push({label: tmpData[j][0], data: tmpData[j].slice(1, rowNum), backgroundColor: lineColor[j]});
34      };
35      var pfChart = document.getElementById("pf_chart").getContext("2d");
36      var myChart = new Chart(pfChart, {
37        type: 'line',
38        data: {
39          labels: tmpData[0].slice(1, rowNum),
40          datasets: tmpDatasets
41        }
42      });
43    }

html
1<!DOCTYPE html>
2<html><meta charset="UTF-8">
3  <meta name="viewport"
4    content="width=device-width, initial-scale=1.0">
5  <link rel="stylesheet" href="static/css/pure-min.css">
6  <link rel="stylesheet" href="static/css/style.css?v=18">
7  <link rel="stylesheet" href="static/css/team_color.css">
8  <body onload="csv_data('{{ url_for('static', filename='graph_csv_files/graph_大谷翔平.csv') }}')"><div class="content"> <!-- ここからchartタグにグラフを描きこむ上のjavascriptプラグラムが実行されます。

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

jisをutf-8に変更したblob(バイナリデータ)を作成するという方法をネットで見つけたのですが、その方法は、最終的にcsvファイルのデータを別ファイルに出力しており、グラフの描画はしていないので、使えるかどうか、分かりませんでした。

補足

文字化けしている要素を配列にpushしたらエラーになりますか?
すみません。読み込もうとしているcsvファイルの文字コードはsjis(全角も対応)で、これをutf-8(半角しか対応していない)で読み込もうとしているから文字化けしていると思われることが分かりました。

行動規範の内容に同意します

回答2件

sjisのcsvをutfに読み直すのであればこんな感じ

javascript
1window.addEventListener('DOMContentLoaded',async ()=>{
2  const data=await fetch('sample.csv').then(res=>res.arrayBuffer()).then(txt=>new TextDecoder('sjis').decode(txt));
3  console.log(data);
4});