[JS]GoogleChartsでグラフを再描画したいのですが、方法がわかりません。。。

前提・実現したいこと

GoogleChartsでグラフを描画しているのですが、画面表示時にグラフは表示できるのですがプルダウン変更時にグラフを再描画することが出来ません。
google.setOnLoadCallback(drawChart);
では画面表示時の１度しかグラフを描画出来ないのでしょうか？

また、グラフを再描画する方法をわかる方がおりましたら、どのような方法があるのか教えて頂きたいです。。

発生している問題・エラーメッセージ

グラフを再描画が出来ない。

該当のソースコード

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

行動規範の内容に同意します

回答1件

ベストアンサー

プルダウンから項目を選択したときのコールバックは、すでにchangeFuncとして用意しているのですから、その中で再描画処理を行なえばいい。

chartをdrawChartの外側でchangeFuncの前で宣言。代入はdrawChartの中で行なう。
changeFuncの中のswitch文の各caseが(意図せず)フォールスルーしている。、計3箇所にbreak;を挿入する。
switch文の後で、chartがnullでなければ、drawChartを呼び出す。
drawChartの中では、chartがnullのときだけ棒グラフを生成する。

JavaScript
1(前略)
2
3                var chart;
4                const changeFunc = function () {
5                    switch (Number(this.value)) {
6                        case 0:
7                            data = dataset0;
8                            break;
9                        case 1:
10                            data = dataset1;
11                            break;
12                        case 2:
13                            data = dataset2;
14                            break;
15                        default:
16                            data = dataset0;
17                    }
18                    if (chart != null) {
19                        drawChart();
20                    }
21                };
22
23(中略)
24
25                function drawChart() {
26                    const dataSet = google.visualization.arrayToDataTable(data);
27                    var options = {
28                        'title': '全て',
29                        'is3D': true,
30                        'chartArea': { 'height': '80%', 'width': '90%' },
31                        'hAxis': { title: '値', 'slantedText': false },
32                        'vAxis': { title: '人数' },
33                        'legend': 'left',
34                    };
35                    if (chart == null) {
36                        chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
37                    }
38                    chart.draw(dataSet, options);
39                }
40
41(後略)