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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

Q&A

解決済

1回答

1506閲覧

GoogleChartのエラー「One or more participants failed to draw()」はどういう意味でしょうか?

tanakamaro

総合スコア13

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

0グッド

0クリップ

投稿2021/04/15 00:46

編集2021/04/15 01:42

前提・実現したいこと

Google Chartでエラーが表示されるのですが、このエラーの原因または意味がわかる方はいらっしゃいますでしょうか?

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

One or more participants failed to draw()

html

1<!doctype html> 2<html> 3 <head> 4 <meta charset="utf-8" content=""> 5 <title>google-chart</title> 6 7 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" ></script> 8 <script type="text/javascript" src="https://www.google.com/jsapi"></script> 9 <script src="../jRange/jquery.range.js"></script> 10 <link rel="stylesheet" href="../jRange/jquery.range.css"> 11 <!-- スクリプト部分 --> 12 <script type="text/javascript" src="../js/graph.js"></script> 13 14 </head> 15 16 <!-- HTML部分 --> 17 <body> 18 19 <h1></h1> 20 </div> 21 <div id="dashboard_div" style="text-align: center;"> 22 <!--Divs that will hold each control and chart--> 23 <div id="chart_div"></div> 24 <table width=800px style="display: none;"> 25 <tr> 26 <td width="50%" align="center"> 27 <span style="position: relative; top: 8px;">範囲</span> 28 <div style="margin-top: 10px;" id="filter_div"></div> 29 <!-- <span style="color: white;">0</span> --> 30 </td> 31 <td width="50%" align="center">幅: 32 <span id="bucketSize" style="color:#999; font-size: 15px; text-decoration: none;"></span> 33 <input id="bucketSlider" type="hidden" class="bucketSlider" value="0" onchange="changeOptions();" 34 style="margin-top: 0px;" /> 35 </td> 36 37 </tr> 38 </table> 39 </div> 40 <script> 41 $('.bucketSlider').jRange({ 42 from: 0, 43 to: 500, 44 showLabels: false, 45 snap: true 46 }); 47 48 $(function () { 49 // 初期 50 $('#bucketSize').html($('#bucketSlider').val()); 51 $('#bucketSlider').on('input change', function() { 52 // 変動 53 $('#bucketSize').html($(this).val()); 54 }); 55 }); 56 </script> 57 </div> 58 </body> 59</html> 60

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

試したこと

ここに問題に対して試したことを記載してください。

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

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

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

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

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

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

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

black-ddd

2021/04/15 01:33

回答をもらう前に コードを貼ったりGoogle Chartで何をした結果どうなったか、 またそれをどうしたいかを記述するべきだと感じました。 このままだとやって欲しいことを全て丸投げしている質問だと思います。
guest

回答1

0

自己解決

dataArrayを初期化していないのが原因でした。
dataArray = [['','ダミー']];
で無事動作しました。。
ありがとうございました。

投稿2021/04/15 04:04

tanakamaro

総合スコア13

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問