[JS]配列を複数用意しているのですが、プルダウン変更時にセットしている配列も変更したいです。。

前提・実現したいこと

現在、配列を3つ用意して関数内にセットしております。
プルダウンを変更した場合にセットしている配列も変更したいです。

どのような方法で実現が可能でしょうか？

▼追記
#exampleが０を選択されている場合は
var data = google.visualization.arrayToDataTable(dataset0);
#exampleが１を選択されている場合は
var data = google.visualization.arrayToDataTable(dataset1);
#exampleが2を選択されている場合は
var data = google.visualization.arrayToDataTable(dataset2);

のように
datasetの部分を変化させたいです。。

該当のソースコード

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

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

前提・実現したいこと

該当のソースコード

関連した質問