teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問chartjsでグラフを選択制にしたい

編集履歴

質問編集履歴

1

コードの変更

2020/06/15 12:46

投稿

i-nr
i-nr

スコア15

test CHANGED
File without changes
test CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  凡例をクリックするとグラフが表示・非表示と切り替わるように、セレクトボックスの選択で表示・非表示を切り替えたいです。
4
4
 
5
+ セレクトボックスは3つのカテゴリーに分けて、表示したいグラフをそこから選ぶようにしたいです。
6
+
7
+
8
+
9
+ セレクトボックスでグラフの表示を切り替えることはできたのですが、
10
+
11
+ グラフ名とセレクトされた項目名が一致せず、つまづいています。
12
+
13
+ グラフ自体はサンプル1-1とサンプル3-0とサンプル3-1が表示されているのに、
14
+
15
+ セレクトボックスではサンプル1-0、サンプル1-1、サンプル1-2で切り替わってしまいます。
16
+
5
17
 
6
18
 
7
19
  ご教授ください。
@@ -12,25 +24,89 @@
12
24
 
13
25
 
14
26
 
27
+ 説明が分かりにくかったり、添付コードが不足していればご指摘ください。
28
+
15
29
  下記、現在のコードです。
16
30
 
17
31
  ```html
18
32
 
33
+ <div class="col-sm-2 col-md-2 col-lg-2">
34
+
35
+ 　<div class="form-group">
36
+
37
+ 　　<label><span class="label-text">表示するグラフ（下記から選択）</span></label>
38
+
19
- <select multiple="multiple" name="accessCount" class="select-block" title="アクセス数">
39
+ 　　<select multiple="multiple" name="category_1" class="select-block selectpicker" title="カテゴリー1" data-selected-text-format="count > 0" data-count-selected-text="カテゴリー1">
20
-
40
+
21
- <option value="0">サンプル１</option>
41
+ 　　　<option value="0" class="1_0" id="1_0">サンプル1-0</option>
22
-
42
+
23
- <option value="1">サンプル２</option>
43
+ <option value="1" class="1_1" id="1_1">サンプル1-1</option>
24
-
44
+
25
- <option value="2">サンプル３</option>
45
+ <option value="2" class="1_2" id="1_2">サンプル1-2</option>
26
-
46
+
27
- <option value="3">サンプル４</option>
47
+ 　　　<option value="3" class="1_3" id="1_3">サンプル1-3</option>
48
+
28
-
49
+ <option value="4" class="1_4" id="1_4">サンプル1-4</option>
50
+
51
+ <option value="5" class="1_5" id="1_5">サンプル1-5</option>
52
+
53
+ <option value="6" class="1_6" id="1_6">サンプル1-6</option>
54
+
29
- </select>
55
+ 　　</select>
56
+
30
-
57
+ 　</div>
58
+
31
-
59
+ </div>
60
+
32
-
61
+ <div class="col-sm-2 col-md-2 col-lg-2">
62
+
63
+ 　<div class="form-group">
64
+
65
+ 　　<label class="hidden-xs"><span class="label-text">&nbsp;</span></label>
66
+
67
+ 　　<select multiple="multiple" name="category_2" class="select-block selectpicker" title="カテゴリー2" data-selected-text-format="count > 0" data-count-selected-text="カテゴリー2">
68
+
69
+ 　　　<option value="0" class="2_0" id="2_0">サンプル2-0</option>
70
+
71
+ 　　　<option value="1" class="2_1" id="2_1">サンプル2-1</option>
72
+
73
+ 　　</select>
74
+
75
+ 　</div>
76
+
77
+ </div>
78
+
79
+ <div class="col-sm-2 col-md-2 col-lg-2">
80
+
81
+ 　<div class="form-group">
82
+
83
+ 　　<label class="hidden-xs"><span class="label-text">&nbsp;</span></label>
84
+
85
+ <select multiple="multiple" name="category_3" class="select-block selectpicker" title="カテゴリー3" data-selected-text-format="count > 0" data-count-selected-text="カテゴリー3">
86
+
87
+ 　　　<option value="0" class="3_0" id="3_0">サンプル3-0</option>
88
+
89
+ 　　　<option value="1" class="3_1" id="3_1">サンプル3-1</option>
90
+
91
+ 　　</select>
92
+
93
+ 　</div>
94
+
95
+ </div>
96
+
97
+
98
+
99
+ <div class="row">
100
+
101
+ 　<div class="col-md-10 col-lg-10">
102
+
33
- <canvas id="chart-line" style="max-width: none"></canvas>
103
+ 　　<canvas id="myChart" style="max-width: none"></canvas>
104
+
105
+ 　</div>
106
+
107
+ 　<div id="chart-legends" class="col-md-2 col-lg-2 note" style="top: 72px"></div>
108
+
109
+ </div>
34
110
 
35
111
  ```
36
112
 
@@ -40,164 +116,86 @@
40
116
 
41
117
  // 文字数上、datasetsの諸々の設定は省略してあります。
42
118
 
43
- var data = {
44
-
45
- labelsY: ["01/28 12:00","01/29 00:00","12:00","01/30 00:00","12:00"],
46
-
47
- sample1: [2,0,0,0,0],
48
-
49
- sample2: [1,0,0,0,0],
50
-
51
- sample3: false,
52
-
53
- sample4: false
54
-
55
- };
56
-
57
- var lineData = {
58
-
59
- labels : data.labelsY,
60
-
61
- datasets: [
62
-
63
- {
64
-
65
- label: "サンプル１",
66
-
67
- data: data.sample1,
68
-
69
- yAxisID: "leftNumberOfPeopleYaxis"
70
-
71
- },
72
-
73
- {
74
-
75
- label: "サンプル２",
76
-
77
- data: data.sample2,
78
-
79
- yAxisID: "leftNumberOfPeopleYaxis"
80
-
81
- },
82
-
83
- {
84
-
85
- label: "サンプル３",
86
-
87
- data: data.sample3,
88
-
89
- yAxisID: "leftNumberOfPeopleYaxis"
90
-
91
- },
92
-
93
- {
94
-
95
- label: "サンプル４",
96
-
97
- data: data.sample4,
98
-
99
- yAxisID: "leftNumberOfPeopleYaxis"
100
-
101
- },
102
-
103
- ],
104
-
105
- };
106
-
107
- var ctx2 = document.getElementById("chart-line").getContext("2d");
108
-
109
- var myLineChart = new Chart(ctx2,{
110
-
111
- type: 'line',
112
-
113
- data: lineData,
114
-
115
- options: {
116
-
117
- legend: {
118
-
119
- display: false
120
-
121
- }
122
-
123
- },
124
-
125
- scales: {
126
-
127
- xAxes: [
128
-
129
- {
130
-
131
- ticks: {
132
-
133
- autoSkip: false,
134
-
135
- }
136
-
137
- }
138
-
139
- ],
140
-
141
- yAxes: [
142
-
143
- {
144
-
145
- id: 'leftNumberOfPeopleYaxis',
146
-
147
- type: 'linear',
148
-
149
- position: 'left',
150
-
151
- scaleLabel: {
152
-
153
- display: true,
154
-
155
- labelString: 'アクセス数',
156
-
157
- },
158
-
159
- ticks: {
160
-
161
- beginAtZero: true,
162
-
163
- callback: function(value) {if (value % 1 === 0) {return value;}}
164
-
165
- }
166
-
167
- },
168
-
169
- {
170
-
171
- id: 'rightTimeYaxis',
172
-
173
- type: 'linear',
174
-
175
- position: 'right',
176
-
177
- scaleLabel: {
178
-
179
- display: true,
180
-
181
- labelString: '待機時間',
182
-
183
- },
184
-
185
- ticks: {
186
-
187
- beginAtZero: true,
188
-
189
- callback: function(value) {if (value % 1 === 0) {return value;}}
190
-
191
- }
192
-
193
- },
194
-
195
- ]
196
-
197
- }
198
-
199
- }
200
-
201
- });
119
+ //表示するグラフ選択
120
+
121
+ var select_1 = document.querySelector('[name="category_1"]');
122
+
123
+ select_1.addEventListener('change',() =>{
124
+
125
+ for(var i = 0; i < select_1.length; i++) {
126
+
127
+ try{
128
+
129
+ var meta_1 = myChart.getDatasetMeta(i);
130
+
131
+ if(select_1[i].selected) meta_1.hidden = false;
132
+
133
+ else meta_1.hidden = true;
134
+
135
+ }catch(e){
136
+
137
+ }
138
+
139
+ }
140
+
141
+ myChart.update();
142
+
143
+ });
144
+
145
+ var select_2 = document.querySelector('[name="category_2"]');
146
+
147
+ select_2.addEventListener('change',() =>{
148
+
149
+ for(var i = 0; i < select_2.length; i++) {
150
+
151
+ try{
152
+
153
+ var meta_2 = myChart.getDatasetMeta(i);
154
+
155
+ if(select_2[i].selected) meta_2.hidden = false;
156
+
157
+ else meta_2.hidden = true;
158
+
159
+ }catch(e){
160
+
161
+ }
162
+
163
+ }
164
+
165
+ myChart.update();
166
+
167
+ });
168
+
169
+ var select_3 = document.querySelector('[name="category_3"]');
170
+
171
+ select_3.addEventListener('change',() =>{
172
+
173
+ for(var i = 0; i < select_3.length; i++) {
174
+
175
+ try{
176
+
177
+ var meta_3 = myChart.getDatasetMeta(i);
178
+
179
+ if(select_3[i].selected) meta_3.hidden = false;
180
+
181
+ else meta_3.hidden = true;
182
+
183
+ }catch(e){
184
+
185
+ }
186
+
187
+ }
188
+
189
+ myChart.update();
190
+
191
+ });
192
+
193
+
194
+
195
+ //グラフ初期表示
196
+
197
+ var myChart = new Chart(ctx,myChart());
198
+
199
+ document.getElementById('chart-legends').innerHTML = myChart.generateLegend();
202
200
 
203
201
  ```