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

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

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

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

Q&A

0回答

782閲覧

【JS】GoogleChartでbucketSizeを動的に変更したいですが、エラーが表示されbucketSizeも変更されません。

toyamal

総合スコア28

JavaScript

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

0グッド

0クリップ

投稿2021/04/02 03:40

前提・実現したいこと

GoogleChartで開発しております。
bucketSizeをスライダーの値に合わせて動的に変更したいのですが、エラーが表示されbucketSizeも変更されません。
わかる方がいらっしゃいましたらお力の方をお貸しいただきたいです。

おそらく
dashboard.draw(dataArray);
が原因だと思います。
こちらをどのように変更すれば値が反映されますでしょうか。。

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

One or more participants failed to draw()

該当のソースコード

JS

1// Load the Visualization API and the controls package. 2google.charts.load('current', { 'packages': ['corechart', 'controls','bar'] }); 3google.setOnLoadCallback(getJson); 4let chart; 5let thres; 6let scale = []; 7let dataArray = [['','count']]; 8 9//チャート表示処理 10function drawChart(thres){ 11 let chartdata = google.visualization.arrayToDataTable(dataArray); 12 // ヒストグラムの場合 13 if(thres == 1){ 14 // Create a dashboard. 15 let dashboard = new google.visualization.Dashboard( 16 document.getElementById('dashboard_div')); 17 18 // Create a range slider, passing some options 19 let donutRangeSlider = new google.visualization.ControlWrapper({ 20 'controlType': 'NumberRangeFilter', 21 'containerId': 'filter_div', 22 'options': { 23 'filterColumnLabel': 'count' 24 } 25 }); 26 27 // Create a pie chart, passing some options 28 let Histogram= new google.visualization.ChartWrapper({ 29 'chartType': 'Histogram', 30 'containerId': 'chart_div', 31 'options': { 32 'width': 900, 33 'height': 600, 34 'pieSliceText': 'value', 35 'legend': 'right', 36 'histogram': { 37 hideBucketItems: true, 38 bucketSize: 10 39 }, 40 'bar': { groupWidth: "100%" }, 41 'colors': ['gray'] 42 }, 43 44 }); 45 dashboard.bind(donutRangeSlider, Histogram); 46 47 dashboard.draw(dataArray); 48 changeOptions = function () { 49 Histogram.setOption('histogram.bucketSize', document.getElementById('example').value); 50 console.log(document.getElementById('example').value); 51 dashboard.draw(dataArray); 52 }; 53 //棒グラフの場合 54 }else if(thres == 2){ 55 let options = { 56 title: '', 57 hAxis: { 58 format: '', 59 }, 60 bars: 'horizontal' 61 }; 62 let chart = new google.charts.Bar(document.getElementById('chart_div')); 63 chart.draw(chartdata, google.charts.Bar.convertOptions(options)); 64 //円グラフの場合 65 }else if(thres == 4){ 66 let options = { 67 //title: '妊婦登録時 妊娠分娩歴3 産科合併症の有無(全員)', 68 pieSliceText: 'none', 69 //colors: ['#3265a8', '#bddeff'] 70 }; 71 let chart = new google.visualization.PieChart(document.getElementById('chart_div')); 72 chart.draw(chartdata, options); 73 //地図グラフの場合 74 }else if(thres == 9){ 75 76 } 77 dataArray = [['','count']]; 78} 79//Json取得処理 80function getJson(){ 81 $('#search').click(function() { 82 let hosturl = "http://localhost:3000/result/" + $('#zip').val(); 83 $.ajax({ 84 type: 'get', 85 url: hosturl, 86 dataType : 'json' 87 }).done(function(data){ 88 console.log("success"); 89 //Jsonデータのbreaks,countをGoogleChartのデータ配列に格納 90 let data_item = data.count.map((c, i) => { 91 return [data.breaks[i].toString(), c]; 92 }); 93 dataArray.push(...data_item); 94 console.log(dataArray); 95 //Jsonデータを各項目に反映 96 $('#view_code').val(data.view_code); 97 $('#view_code_url').val(data.view_code_url); 98 $('#name').val(data.name); 99 if(data.gender == 0){ 100 $('#gender').val("全員"); 101 }else if(data.gender == 1){ 102 $('#gender').val("男性"); 103 }else if(data.gender == 2){ 104 $('#gender').val("女性"); 105 } 106 $('#category').val(data.category); 107 $('#num').val(data.num); 108 $('#data_num').val(data.data_num); 109 $('#data_type').val(data.data_type); 110 $('#unit').val(data.unit); 111 $('#illness').val(data.illness); 112 thres = data.thres; 113 scale = data.scale; 114 drawChart(data.thres); 115 }).fail(function(){ 116 alert('データが無いです'); 117 $('#zip').val(""); 118 }); 119 120 121 }); 122} 123

試したこと

changeOptions内のdashboard.draw(dataArray);を消すとエラーは消えました。
ですが、値が反映されない状況になります。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

前提・実現したいこと

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問