teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問グラフが表示されません。

編集履歴

質問編集履歴

3

少し変えたら、グラフが表示されなくなった。

2019/07/26 09:48

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- chart.jsでラベルを２つ表示させたい。
1
+ グラフが表示されません。
test CHANGED
@@ -1,78 +1,44 @@
1
- 果物　年度　値
2
-
3
- いちご　2000　1
1
+ グラフが表示されません。
4
-
5
- .
6
-
7
- .
8
-
9
- .
10
-
11
- とあるcsvファイルから、果物と年度をラベルとし値を読み込みグラフに反映させたいです。
12
-
13
- うまくいきません。どう変えたらいいですか？
14
2
 
15
3
  ```CSV
16
4
 
17
- 果物,年度,値,,
5
+ 分類,名前,年度,値,,
18
6
 
19
- リンゴ,2000,1,,
7
+ 果物,いちご,2000,1,,
20
8
 
21
- ミカン,2000,2,,
9
+ 果物,なし,2000,2,,
22
10
 
23
- スイカ,2000,3,,
11
+ 果物,ぶどう,2000,3,,
24
12
 
25
- なし,2000,4,,
13
+ 果物,もも,2000,4,,
26
14
 
27
- ぶどう,2000,5,,
15
+ 果物,スイカ,2000,5,,
28
16
 
29
- バナナ,2000,6,,
17
+ 果物,レモン,2000,6,,
30
18
 
31
- パイナップル,2000,7,,
19
+ 果物,りんご,2000,7,,
32
20
 
33
- マンゴー,2000,8,,
21
+ 果物,いちじく,2000,8,,
34
22
 
35
- ブルーベリー,2000,9,,
23
+ 果物,メロン,2000,9,,
36
24
 
37
- イチゴ,2000,10,,
25
+ 果物,ライチ,2000,10,,
38
26
 
39
- モモ,2000,11,,
27
+ 果物,ブルーベリー,2000,11,,
40
28
 
41
29
  ```
42
30
 
43
31
  ```JS
44
32
 
45
- //*** csvdata-read.js ***//
46
-
47
-
48
-
49
- // 3) CSVから２次元配列に変換
50
-
51
33
  function csv2Array(str) {
52
34
 
53
35
  var csvData = [];
54
36
 
55
- var cmt = /^*/; //行の先頭文字に*（半角）がある場合コメント行
56
-
57
- str = str.replace(/\r\n/g, '\n'); // 追加 CRを削除
58
-
59
- str = str.replace(/\n+/g, '\n'); // 追加 空行を削除
60
-
61
- //str = str.replace(/\s+,|,\s+/g, ','); // 追加 不要な空白を削除
62
-
63
37
  var lines = str.split("\n");
64
38
 
65
- for (var i = 0; i < lines.length; ++i) {
39
+ for (var i = 1; i < lines.length-1; ++i) {
66
-
67
- var li = lines[i];
68
40
 
69
41
  var cells = lines[i].split(",");
70
-
71
- if(li.match(cmt)){ //コメント行判定
72
-
73
- continue; //コメント行スキップ
74
-
75
- }
76
42
 
77
43
  csvData.push(cells);
78
44
 
@@ -84,105 +50,33 @@
84
50
 
85
51
 
86
52
 
87
- //メイン関数csvdata
53
+ function drawBarChart(data) {
88
54
 
89
- function csvdata(func,fl) { // func：Chartクラス関数名 fl：CSVファイルのURL
55
+ var tmpLabels = [],
90
56
 
91
- // 1) ajaxでCSVファイルをロード
57
+ tmpData1 = [],
92
58
 
93
- var req = new XMLHttpRequest();
59
+ tmpData2 = [],
94
60
 
95
- var filePath = 'csvfile.csv'; // fl CSVファイル名（URL)
61
+ tmpData3 = [];
96
62
 
97
- req.open("GET", filePath, true);
63
+ for (var row in data) {
98
64
 
99
- req.onload = function() {
65
+ tmpLabels.push(data[row][1])
100
66
 
101
- // 2) CSVデータ変換の呼び出し
67
+ tmpData1.push(data[row][3])
102
68
 
103
- data = csv2Array(req.responseText);
69
+ tmpData2.push(data[row][4])
104
70
 
105
- // 4) chart.js描画のChartクラス関数へリターンし、CSVデータを渡す
71
+ tmpData3.push(data[row][5])
106
72
 
107
- func(data);
108
-
109
- }
73
+ };
110
-
111
- req.send(null);
112
-
113
- }
114
-
115
- ```
116
-
117
- ```HTML
118
-
119
- <!DOCTYPE html>
120
-
121
- <html lang="ja">
122
-
123
- <head>
124
-
125
- <meta charset="UTF-8">
126
-
127
- <!-- Chart.js -->
128
-
129
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
130
-
131
- <!-- CSVデータ読み込み -->
132
-
133
- <script src="csvfile.js"></script>
134
-
135
- <title>縦棒グラフ サンプル Chart.js 2018.5</title>
136
-
137
- </head>
138
-
139
- <body>
140
-
141
- <!--ここにグラフが挿入されます-->
142
-
143
- <div style="width: 50%;">
144
-
145
- <canvas id="myBarChart"></canvas>
146
-
147
- </div>
148
74
 
149
75
 
150
76
 
151
- <script>
77
+ var ctx = document.getElementById("myChart").getContext("2d");
152
78
 
153
- function drawBarChart(data) { // csvdata-read.jsよりリターン
154
-
155
- // 2)chart.jsのdataset用の配列を用意 このCSVデータは３列=項目名,data1,data2
156
-
157
- var tmpLabels = [], tmpData1 = [], tmpData2 = [], tmpData3 = [];
158
-
159
- for (var row in data) {
160
-
161
- tmpLabels.push(data[row][0]) //項目名
162
-
163
- tmpData1.push(data[row][1]) //データ１（東京）
164
-
165
- tmpData2.push(data[row][2]) //データ２（札幌）
166
-
167
- tmpData3.push(data[row][3])
168
-
169
- };
170
-
171
- tmpLabels = tmpLabels.slice( 0, -1 ) ; //最後のカンマ(,)を削除
172
-
173
- tmpData1 = tmpData1.slice( 0, -1 ) ; //最後のカンマ(,)を削除
174
-
175
- tmpData2 = tmpData2.slice( 0, -1 ) ; //最後のカンマ(,)を削除
176
-
177
- tmpData3 = tmpData3.slice( 0, -1 ) ; //最後のカンマ(,)を削除
178
-
179
-
180
-
181
- // 3)chart.jsで描画
182
-
183
- var ctx = document.getElementById("myBarChart").getContext("2d");
184
-
185
- var myBarChart = new Chart(ctx, {
79
+ var myChart = new Chart(ctx, {
186
80
 
187
81
  type: 'bar',
188
82
 
@@ -192,115 +86,95 @@
192
86
 
193
87
  datasets: [
194
88
 
195
- { label: "店舗名", data: tmpData1, backgroundColor: "red" },
89
+ { label: "2000", data: tmpData1},
196
90
 
197
- { label: "年度", data: tmpData2, backgroundColor: "blue" },
91
+ { label: "2001", data: tmpData2},
198
92
 
199
- { label: "値", data: tmpData2, backgroundColor: "yellow" }
93
+ { label: "2002", data: tmpData3}
200
94
 
201
95
  ]
202
96
 
203
- }, //data 終り
97
+ },
204
98
 
205
- //オプションの設定
99
+
206
100
 
207
101
  options: {
208
102
 
209
- responsive: true,
103
+ yAxes: [{
210
104
 
211
- title: {
105
+ drawBorder: false,
212
106
 
213
- display: true,
107
+ ticks: {
214
108
 
215
- text: '東京、札幌年間平均気温'
109
+ min: 0,
216
110
 
217
- },
111
+ max: 30000,
218
112
 
113
+ stepSize: 100
219
114
 
115
+ }
220
116
 
221
- legend : {
117
+ }],
222
118
 
223
- position : "right",
119
+ xAxes: [{ }]
224
120
 
225
- // display : false,
226
-
227
- },
228
-
229
- scales: {
230
-
231
- yAxes: [{ //y軸設定
232
-
233
- display: true, //表示設定
234
-
235
- scaleLabel: { //軸ラベル設定
236
-
237
- display: true, //表示設定
238
-
239
- labelString: '温度（℃）', //ラベル
240
-
241
- fontSize: 12 //フォントサイズ
242
-
243
- },
244
-
245
- ticks: {
246
-
247
- fontSize: 12, //フォントサイズ
248
-
249
- callback : function(value, index, values){
250
-
251
- return value + " ℃";
252
-
253
- }
121
+ }
254
-
255
- },
256
-
257
- }],
258
-
259
- xAxes: [{ //x軸設定
260
-
261
- display: true, //表示設定
262
-
263
- barPercentage: 1.0, //棒グラフ幅
264
-
265
- categoryPercentage: 0.4, //棒グラフ幅
266
-
267
- scaleLabel: { //軸ラベル設定
268
-
269
- display: true, //表示設定
270
-
271
- labelString: '（月）', //ラベル
272
-
273
- fontSize: 12 //フォントサイズ
274
-
275
- },
276
-
277
- ticks: {
278
-
279
- fontSize: 12 //フォントサイズ
280
-
281
- },
282
-
283
- }],
284
-
285
- },
286
-
287
-
288
-
289
- }, //options 終り
290
122
 
291
123
  });
292
124
 
293
125
  }
294
126
 
127
+ function main() {
295
128
 
129
+ var req = new XMLHttpRequest();
296
130
 
297
- // 1) CSV読み込み csvdata-read.js
131
+ var filePath = 'csv.csv';
298
132
 
299
- csvdata(drawBarChart,"csvfile.csv");
133
+ req.open("GET", filePath, true);
134
+
135
+ req.onload = function() {
136
+
137
+ data = csv2Array(req.responseText);
138
+
139
+ drawBarChart(data);
140
+
141
+ }
142
+
143
+ req.send(null);
144
+
145
+ }
146
+
147
+ main();
300
148
 
301
149
 
302
150
 
151
+ ```
152
+
153
+
154
+
155
+ ```HTML
156
+
157
+ <!DOCTYPE>
158
+
159
+ <html>
160
+
161
+ <head>
162
+
163
+ <meta charset = "UTF-8">
164
+
165
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
166
+
167
+ <script src=js.js></script>
168
+
169
+ </head>
170
+
171
+ <body>
172
+
173
+ <div style="width: 100%; height: 50%;">
174
+
175
+ <canvas id="myChart" style = "width: 30%; height: auto;"></canvas>
176
+
303
- </script>
177
+ </div>
304
178
 
305
179
  </body>
306
180
 

2

変更した。

2019/07/26 09:48

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -8,13 +8,13 @@
8
8
 
9
9
  .
10
10
 
11
- とあるcsvファイルから、果物と年度をラベルとし値をグラフに反映させたいです。
11
+ とあるcsvファイルから、果物と年度をラベルとし値を読み込みグラフに反映させたいです。
12
12
 
13
13
  うまくいきません。どう変えたらいいですか？
14
14
 
15
15
  ```CSV
16
16
 
17
- 名前,年度,値,,
17
+ 果物,年度,値,,
18
18
 
19
19
  リンゴ,2000,1,,
20
20
 

1

値を変えた。

2019/07/26 08:36

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  果物　年度　値
2
2
 
3
- いちご　2000　150
3
+ いちご　2000　1
4
4
 
5
5
  .
6
6