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

編集履歴

回答編集履歴

5

質問者が追加したコードの部分を追記

2021/02/12 04:35

投稿

miyabi_pudding
miyabi_pudding

スコア9559

answer CHANGED
@@ -10,6 +10,22 @@
10
10
  // ライブラリのロード
11
11
  google.load('visualization', '1', {'packages':['corechart']});
12
12
 
13
+ $('.single-slider').jRange({
14
+ from: 0,
15
+ to: 4.9,
16
+ step: 0.1,
17
+ scale: [0, 1, 2, 3, 4, 4.9],
18
+ format: '%s',
19
+ width: 300,
20
+ showLabels: true,
21
+ isRange: true,
22
+ onstatechange: function () {
23
+ $(".single-slider").trigger('change');
24
+ }
25
+ });
26
+
27
+ document.addEventListener('DOMContentLoaded', function () {
28
+
13
29
  var dataset0=[
14
30
  ['Labels','data'],
15
31
  [0.1,110],
@@ -137,6 +153,8 @@
137
153
  chart.draw(dataSet, options);
138
154
  }
139
155
 
156
+ });
157
+
140
158
  </script>
141
159
  </head>
142
160
  <body>

4

質問者の構文を省略せず記載

2021/02/12 04:35

投稿

miyabi_pudding
miyabi_pudding

スコア9559

answer CHANGED
@@ -7,8 +7,86 @@
7
7
  // 取り出したい値を外側スコープで定義しておく
8
8
  let data;
9
9
 
10
- // 前段省略（各変数の定義）
10
+ // ライブラリのロード
11
+ google.load('visualization', '1', {'packages':['corechart']});
11
12
 
13
+ var dataset0=[
14
+ ['Labels','data'],
15
+ [0.1,110],
16
+ [0.2,90],
17
+ [0.3,120],
18
+ [0.4,80],
19
+ [0.5,160],
20
+ [0.6,120],
21
+ [0.7,140],
22
+ [0.8,120],
23
+ [0.9,100],
24
+ [1 ,100],
25
+ [1.1,110],
26
+ [1.2,130],
27
+ [1.3,110],
28
+ [1.4,100],
29
+ [1.5,180],
30
+ [1.6,120],
31
+ [1.7,140],
32
+ [1.8,120],
33
+ [1.9,140],
34
+ [2 ,90],
35
+ [2.1,70],
36
+ [2.2,60],
37
+ [2.3,100],
38
+ [2.4,80],
39
+ [2.5,90],
40
+ [2.6,70],
41
+ [2.7,60],
42
+ [2.8,150],
43
+ [2.9,80],
44
+ [3 ,90],
45
+ [3.1,70],
46
+ [3.2,60],
47
+ [3.3,100],
48
+ [3.4,80],
49
+ [3.5,40],
50
+ [3.6,40],
51
+ [3.7,40],
52
+ [3.8,20],
53
+ [3.9,60],
54
+ [4 ,100],
55
+ [4.1,120],
56
+ [4.2,140],
57
+ [4.3,120],
58
+ [4.4,80],
59
+ [4.5,100],
60
+ [4.6,110],
61
+ [4.7,100],
62
+ [4.8,90]
63
+
64
+ ];
65
+
66
+ var dataset1= [
67
+ ['Labels','data'],
68
+ ["0〜0.5",500],
69
+ ["0.6〜1",600],
70
+ ["1.1〜1.5",550],
71
+ ["1.6〜2",700],
72
+ ["2.1〜2.5",400],
73
+ ["2.6〜3",450],
74
+ ["3.1〜3.5",400],
75
+ ["3.6〜4",200],
76
+ ["4.1〜4.5",400],
77
+ ["4.6〜5",550]
78
+ ];
79
+
80
+ var dataset2= [
81
+ ['Labels','data'],
82
+ ["0〜0.9",1100],
83
+ ["1〜1.9",1250],
84
+ ["2〜2.9",850],
85
+ ["3〜3.9",600],
86
+ ["4〜4.9",950]
87
+ ];
88
+
89
+
12
90
  // select要素を取得
13
91
  const selectElm = document.getElementById('example');
14
92
  // 外側でも使うために、処理を別枠で定義

3

コメントを受けて、処理の順番などを変更

2021/02/12 02:19

投稿

miyabi_pudding
miyabi_pudding

スコア9559

answer CHANGED
@@ -16,13 +16,13 @@
16
16
  // 選択しているoptionの値を使いたい場合は、this.value
17
17
  switch (Number(this.value)) {
18
18
  case 0:
19
- data = google.visualization.arrayToDataTable(dataset0);
19
+ data = dataset0;
20
20
  case 1:
21
- data = google.visualization.arrayToDataTable(dataset1);
21
+ data = dataset1;
22
22
  case 2:
23
- data = google.visualization.arrayToDataTable(dataset2);
23
+ data = dataset2;
24
24
  default:
25
- data = google.visualization.arrayToDataTable(dataset0);
25
+ data = dataset0;
26
26
  }
27
27
  };
28
28
 
@@ -39,8 +39,8 @@
39
39
  function drawChart() {
40
40
 
41
41
  // 配列からデータの生成⇦ここにセットしております
42
- // 上記、switch構文にて代入しているため、実行しない
42
+ // switchで代入された変数を使って定義するように変更
43
- // var data = google.visualization.arrayToDataTable(dataset0);
43
+ const dataSet = google.visualization.arrayToDataTable(data);
44
44
 
45
45
  // オプションの設定
46
46
  var options = {
@@ -56,7 +56,7 @@
56
56
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
57
57
 
58
58
  // グラフの描画
59
- chart.draw(data, options);
59
+ chart.draw(dataSet, options);
60
60
  }
61
61
 
62
62
  </script>

2

コールバック関数の処理も含めた回答に修正

2021/02/12 01:59

投稿

miyabi_pudding
miyabi_pudding

スコア9559

answer CHANGED
@@ -11,8 +11,8 @@
11
11
 
12
12
  // select要素を取得
13
13
  const selectElm = document.getElementById('example');
14
- // select要素が、変化するたびに実行される
14
+ // 外側でも使うために、処理を別枠で定義
15
- selectElm.onchange = function(){
15
+ const changeFunc = function(){
16
16
  // 選択しているoptionの値を使いたい場合は、this.value
17
17
  switch (Number(this.value)) {
18
18
  case 0:
@@ -26,8 +26,39 @@
26
26
  }
27
27
  };
28
28
 
29
- // 後段省略（コールバック関数の部分）
29
+ // 初期値を適用させるために、実行
30
+ changeFunc.call(selectElm);
30
31
 
32
+ // select要素が、変化するたびに実行される
33
+ selectElm.onchange = changeFunc;
34
+
35
+ // グラフを描画する為のコールバック関数を指定
36
+ google.setOnLoadCallback(drawChart);
37
+
38
+ // グラフの描画
39
+ function drawChart() {
40
+
41
+ // 配列からデータの生成⇦ここにセットしております
42
+ // 上記、switch構文にて代入しているため、実行しない
43
+ // var data = google.visualization.arrayToDataTable(dataset0);
44
+
45
+ // オプションの設定
46
+ var options = {
47
+ 'title':'全体',
48
+ 'is3D':true,
49
+ 'chartArea': {'height': '80%', 'width': '90%'},
50
+ 'hAxis': { title: '値', 'slantedText': false},
51
+ 'vAxis': { title: '人数' },
52
+ 'legend':'left',
53
+ };
54
+
55
+ // 指定されたIDの要素に棒グラフを作成
56
+ var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
57
+
58
+ // グラフの描画
59
+ chart.draw(data, options);
60
+ }
61
+
31
62
  </script>
32
63
  </head>
33
64
  <body>

1

質問修正がされたので応じて修正

2021/02/12 01:27

投稿

miyabi_pudding
miyabi_pudding

スコア9559

answer CHANGED
@@ -4,16 +4,29 @@
4
4
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
5
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
6
6
  <script type="text/javascript">
7
+ // 取り出したい値を外側スコープで定義しておく
8
+ let data;
7
9
 
8
- // 前段省略
10
+ // 前段省略（各変数の定義）
11
+
9
12
  // select要素を取得
10
13
  const selectElm = document.getElementById('example');
14
+ // select要素が、変化するたびに実行される
11
15
  selectElm.onchange = function(){
12
- // 処理を記載
13
16
  // 選択しているoptionの値を使いたい場合は、this.value
17
+ switch (Number(this.value)) {
18
+ case 0:
19
+ data = google.visualization.arrayToDataTable(dataset0);
20
+ case 1:
21
+ data = google.visualization.arrayToDataTable(dataset1);
22
+ case 2:
23
+ data = google.visualization.arrayToDataTable(dataset2);
24
+ default:
25
+ data = google.visualization.arrayToDataTable(dataset0);
26
+ }
14
27
  };
15
28
 
16
- // 後段省略
29
+ // 後段省略（コールバック関数の部分）
17
30
 
18
31
  </script>
19
32
  </head>