質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2404閲覧

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

toyamal

総合スコア28

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/02/12 06:03

編集2021/02/12 06:57

前提・実現したいこと

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

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

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

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

該当のソースコード

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

  • chartdrawChartの外側で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(後略)

投稿2021/02/12 07:13

編集2021/02/12 16:20
Daregada

総合スコア11990

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

toyamal

2021/02/12 07:25

回答いただきありがとうございます! ソースを修正したところ実現したい動きを実装することが出来ました。 非常に助かりました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問