teratail
回答率
85.30%
質問するログイン新規登録
トップに関する質問[JS]配列を複数用意しているのですが、プルダウン変更時にセットしている配列も変更したいです。。

編集履歴

質問編集履歴

2

文法の修正

2021/02/12 04:23

投稿

toyamal
toyamal

スコア28

title CHANGED
File without changes
body CHANGED
@@ -23,136 +23,187 @@
23
23
  <html>
24
24
  <head>
25
25
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
26
- <script type="text/javascript" src="https://www.google.com/jsapi"></script>
27
- <script type="text/javascript">
28
26
 
27
+ </head>
28
+ <body>
29
+
30
+ <!-- グラフの描画エリア -->
31
+ <div id="chart_div" style="width: 100%; height: 350px"></div>
32
+
33
+ <select id="example" name="example" style="margin-bottom: 20px;">
34
+ <option value="0">粒度 - 小</option>
35
+ <option value="1">粒度 - 中</option>
36
+ <option value="2">粒度 - 大</option>
37
+ </select>
38
+ <input type="hidden" class="single-slider" value="4.9" style="margin-top: 0px;" />
39
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
40
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
41
+ <script type="text/javascript" src="https://www.google.com/jsapi"></script>
42
+ <script src="jRange/jquery.range.js"></script>
43
+ <link rel="stylesheet" href="jRange/jquery.range.css">
44
+ <script type="text/javascript">
29
- // ライブラリのロード
45
+ // ライブラリのロード
46
+ // name:visualization(可視化),version:バージョン(1),packages:パッケージ(corechart)
30
- google.load('visualization', '1', {'packages':['corechart']});
47
+ google.load('visualization', '1', {'packages':['corechart']});
31
-
32
- var dataset0=[
48
+ var data;
49
+
33
- ['Labels','data'],
50
+ $('.single-slider').jRange({
34
- [0.1,110],
35
- [0.2,90],
36
- [0.3,120],
37
- [0.4,80],
38
- [0.5,160],
39
- [0.6,120],
40
- [0.7,140],
41
- [0.8,120],
42
- [0.9,100],
43
- [1 ,100],
44
- [1.1,110],
45
- [1.2,130],
46
- [1.3,110],
47
- [1.4,100],
48
- [1.5,180],
49
- [1.6,120],
50
- [1.7,140],
51
- [1.8,120],
52
- [1.9,140],
53
- [2 ,90],
54
- [2.1,70],
55
- [2.2,60],
56
- [2.3,100],
57
- [2.4,80],
58
- [2.5,90],
59
- [2.6,70],
60
- [2.7,60],
61
- [2.8,150],
62
- [2.9,80],
63
- [3 ,90],
64
- [3.1,70],
65
- [3.2,60],
66
- [3.3,100],
67
- [3.4,80],
68
- [3.5,40],
69
- [3.6,40],
70
- [3.7,40],
71
- [3.8,20],
72
- [3.9,60],
73
- [4 ,100],
74
- [4.1,120],
75
- [4.2,140],
76
- [4.3,120],
77
- [4.4,80],
78
- [4.5,100],
79
- [4.6,110],
80
- [4.7,100],
81
- [4.8,90],
82
51
 
52
+ from: 0,
53
+ to: 4.9,
54
+ step: 0.1,
55
+ scale: [0, 1, 2, 3, 4, 4.9],
56
+ format: '%s',
57
+ width: 300,
58
+ showLabels: true,
59
+ isRange: true,
60
+ onstatechange: function () {
61
+ $(".single-slider").trigger('change');
62
+ }
83
- ];
63
+ });
64
+
84
-
65
+ document.addEventListener('DOMContentLoaded', function () {
85
- var dataset1= [
66
+ var dataset0=[
86
- ['Labels','data'],
67
+ ['Labels','data'],
68
+ [0.1,110],
69
+ [0.2,90],
70
+ [0.3,120],
71
+ [0.4,80],
87
- ["0〜0.5",500],
72
+ [0.5,160],
88
- ["0.6〜1",600],
73
+ [0.6,120],
74
+ [0.7,140],
75
+ [0.8,120],
76
+ [0.9,100],
77
+ [1 ,100],
89
- ["1.1〜1.5",550],
78
+ [1.1,110],
90
- ["1.6〜2",700],
79
+ [1.2,130],
80
+ [1.3,110],
91
- ["2.1〜2.5",400],
81
+ [1.4,100],
82
+ [1.5,180],
83
+ [1.6,120],
84
+ [1.7,140],
85
+ [1.8,120],
86
+ [1.9,140],
87
+ [2 ,90],
88
+ [2.1,70],
89
+ [2.2,60],
92
- ["2.6〜3",450],
90
+ [2.3,100],
91
+ [2.4,80],
92
+ [2.5,90],
93
+ [2.6,70],
94
+ [2.7,60],
95
+ [2.8,150],
96
+ [2.9,80],
97
+ [3 ,90],
93
- ["3.1〜3.5",400],
98
+ [3.1,70],
99
+ [3.2,60],
94
- ["3.6〜4",200],
100
+ [3.3,100],
101
+ [3.4,80],
102
+ [3.5,40],
103
+ [3.6,40],
104
+ [3.7,40],
105
+ [3.8,20],
106
+ [3.9,60],
107
+ [4 ,100],
95
- ["4.1〜4.5",400],
108
+ [4.1,120],
109
+ [4.2,140],
110
+ [4.3,120],
111
+ [4.4,80],
96
- ["4.6〜5",550],
112
+ [4.5,100],
113
+ [4.6,110],
114
+ [4.7,100],
115
+ [4.8,90],
97
116
 
117
+ ];
98
118
 
119
+ var dataset1= [
120
+ ['Labels','data'],
121
+ ["0〜0.5",500],
122
+ ["0.6〜1",600],
123
+ ["1.1〜1.5",550],
124
+ ["1.6〜2",700],
125
+ ["2.1〜2.5",400],
126
+ ["2.6〜3",450],
127
+ ["3.1〜3.5",400],
128
+ ["3.6〜4",200],
129
+ ["4.1〜4.5",400],
130
+ ["4.6〜5",550],
131
+
132
+
99
- ];
133
+ ];
100
- var dataset2= [
134
+ var dataset2= [
101
- ['Labels','data'],
135
+ ['Labels','data'],
102
- ["0〜0.9",1100],
136
+ ["0〜0.9",1100],
103
- ["1〜1.9",1250],
137
+ ["1〜1.9",1250],
104
- ["2〜2.9",850],
138
+ ["2〜2.9",850],
105
- ["3〜3.9",600],
139
+ ["3〜3.9",600],
106
- ["4〜4.9",950],
140
+ ["4〜4.9",950],
141
+
142
+
143
+ ];
144
+
145
+
146
+
147
+ // グラフを描画する為のコールバック関数を指定
148
+ google.setOnLoadCallback(drawChart);
149
+
107
150
 
151
+ // グラフの描画
152
+ function drawChart() {
153
+ const dataSet = google.visualization.arrayToDataTable(data);
154
+ // オプションの設定
155
+ var options = {
156
+ 'title':'マグロ （BML） [LC]',
157
+ 'is3D':true,
158
+ 'chartArea': {'height': '80%', 'width': '90%'},
159
+ 'hAxis': { title: '測定値（LC）', 'slantedText': false},
160
+ 'vAxis': { title: '人数' },
161
+ 'legend':'left',
162
+ };
163
+
164
+
165
+
166
+ // 指定されたIDの要素に棒グラフを作成
167
+ var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
168
+
169
+
170
+ // グラフの描画
171
+ chart.draw(dataSet, options);
172
+ }
173
+
108
174
 
175
+ // select要素を取得
176
+ const selectElm = document.getElementById('#example');
177
+ // 外側でも使うために、処理を別枠で定義
178
+ const changeFunc = function(){
179
+ // 選択しているoptionの値を使いたい場合は、this.value
180
+ switch (Number(this.value)) {
181
+ case 0:
182
+ data = dataset0;
183
+ c
184
+ case 1:
185
+ data = dataset1;
186
+
187
+ case 2:
188
+ data = dataset2;
189
+
190
+ default:
191
+ data = dataset0;
192
+ }
109
- ];
193
+ };
110
-
194
+ // 初期値を適用させるために、実行
111
-
195
+ changeFunc.call(selectElm);
112
- // グラフを描画する為のコールバック関数を指定
196
+ // select要素が、変化するたびに実行される
113
- google.setOnLoadCallback(drawChart);
197
+ selectElm.onchange = changeFunc;
114
198
 
199
+
200
+ });
115
201
 
116
-
117
- // グラフの描画
118
- function drawChart() {
119
-
120
- // 配列からデータの生成⇦ここにセットしております
121
- var data = google.visualization.arrayToDataTable(dataset0);
122
- // オプションの設定
123
- var options = {
124
- 'title':'全体',
125
- 'is3D':true,
126
- 'chartArea': {'height': '80%', 'width': '90%'},
127
- 'hAxis': { title: '値', 'slantedText': false},
128
- 'vAxis': { title: '人数' },
129
- 'legend':'left',
130
- };
131
-
132
-
133
-
134
- // 指定されたIDの要素に棒グラフを作成
135
- var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
136
-
137
- // グラフの描画
138
- chart.draw(data, options);
139
- }
140
202
 
141
-
142
203
  </script>
143
- </head>
144
- <body>
145
-
146
- <!-- グラフの描画エリア -->
147
- <div id="chart_div" style="width: 100%; height: 350px"></div>
148
204
 
149
- <select id="example" name="example" style="margin-bottom: 20px;">
150
- <option value="0">0</option>
151
- <option value="1">1</option>
152
- <option value="2" selected>2</option>
153
- </select>
154
-
155
205
  </body>
156
206
  </html>
157
207
 
208
+
158
209
  ```

1

文法の修正

2021/02/12 04:23

投稿

toyamal
toyamal

スコア28

title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,18 @@
5
5
 
6
6
  どのような方法で実現が可能でしょうか？
7
7
 
8
+ ▼追記
9
+ #exampleが０を選択されている場合は
10
+ var data = google.visualization.arrayToDataTable(dataset0);
11
+ #exampleが１を選択されている場合は
12
+ var data = google.visualization.arrayToDataTable(dataset1);
13
+ #exampleが2を選択されている場合は
14
+ var data = google.visualization.arrayToDataTable(dataset2);
8
15
 
16
+ のように
17
+ datasetの部分を変化させたいです。。
18
+
19
+
9
20
  ### 該当のソースコード
10
21
 
11
22
  ```JS