グラフが表示されません。

CSV
1分類,名前,年度,値,,
2果物,いちご,2000,1,,
3果物,なし,2000,2,,
4果物,ぶどう,2000,3,,
5果物,もも,2000,4,,
6果物,スイカ,2000,5,,
7果物,レモン,2000,6,,
8果物,りんご,2000,7,,
9果物,いちじく,2000,8,,
10果物,メロン,2000,9,,
11果物,ライチ,2000,10,,
12果物,ブルーベリー,2000,11,,

JS
1function csv2Array(str) {
2  var csvData = [];
3  var lines = str.split("\n");
4  for (var i = 1; i < lines.length-1; ++i) {
5    var cells = lines[i].split(",");
6    csvData.push(cells);
7  }
8  return csvData;
9}
10
11function drawBarChart(data) {
12  var tmpLabels = [],
13      tmpData1  = [],
14      tmpData2  = [],
15      tmpData3  = [];
16  for (var row in data) {
17    tmpLabels.push(data[row][1])
18    tmpData1.push(data[row][3])
19    tmpData2.push(data[row][4])
20    tmpData3.push(data[row][5])
21  };
22
23  var ctx = document.getElementById("myChart").getContext("2d");
24  var myChart = new Chart(ctx, {
25    type: 'bar',
26    data: {
27      labels: tmpLabels,
28      datasets: [
29        { label: "2000", data: tmpData1},
30        { label: "2001", data: tmpData2},
31        { label: "2002", data: tmpData3}
32      ]
33    },
34
35    options: {
36      yAxes: [{
37        drawBorder: false,
38        ticks: {
39          min: 0,
40          max: 30000,
41          stepSize: 100
42        }
43      }],
44      xAxes: [{ }]
45    }
46  });
47}
48function main() {
49  var req = new XMLHttpRequest();
50  var filePath = 'csv.csv';
51  req.open("GET", filePath, true);
52  req.onload = function() {
53    data = csv2Array(req.responseText);
54    drawBarChart(data);
55  }
56  req.send(null);
57}
58main();
59

HTML
1<!DOCTYPE>
2<html>
3<head>
4    <meta charset = "UTF-8">
5     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
6    <script src=js.js></script>
7</head>
8<body>
9    <div style="width: 100%; height: 50%;">
10    <canvas id="myChart" style = "width: 30%; height: auto;"></canvas>
11    </div>
12</body>
13</html>

x_x

2019/07/26 09:02

何かエラーは出ていますか？

退会済みユーザー

2019/07/26 09:11

エラーは出ていません。

x_x

2019/07/26 09:13

うまくいかない点を書いてください。

退会済みユーザー

2019/07/26 09:20

ラベルっていうんですかね...上か下に表示させる項目名みたいな。あれが表示されるとこまでいいんですが、クリックしたら年度や値の何がか動いちゃうんです。果物と年度を項目として表示させ、それに伴った値をグラフで出したいだけなんですが...

退会済みユーザー

2019/07/26 09:48

すいません。少し書き直したらグラフが表示されなくなってしまいました。原因がわかりますか？

BeatStar

2019/08/02 02:28 編集

>> 少し書き直したらグラフが表示されなくなってしまいました。ブラウザのバージョンなんか、わかりますか? ブラウザによって違いますが、この場合はデバッグしてください。 Firefoxの場合: https://developer.mozilla.org/ja/docs/Tools/Debugger/How_to/Open_the_debugger