Q&A
そもそもですが配列の情報が固定であるならPHPで作る必要はないのでは？配列をJSONにしたいのであればJavaScriptにもあるわけですし。
PHP 5.3.3
PHPの配列データを使ってGoogleChartをHeadに仕込んだ関数としてbodyのボタンクリックで利用したいのですがどうすれば良いのでしょうか。bodyで呼び出すことは出来ました。
また今回は省いても動いたので除外しましたが、配列の中にある{ role: 'annotation' } などはどのように組み込めばよいのかよいか分かりましたらあわせて教えていただけると助かります。よろしくお願いします。
補足
MySQLのテーブルにアンケートの回答結果をレコードで持っています。
クロス集計させた結果を動的にグラフ化したいというのか最終形です。
グラフの種類としては100% stacked chartになります。
cf.https://developers.google.com/chart/interactive/docs/gallery/barchart
roleについてはよく理解が出来ていないのですが{}で囲むような記述に対してどの用にセットしたら良いか分からないと言うのが質問の1つです。
頂いた回答を参考にphpのオブジェクトをjavascriptのなかで次のようにセットしてみました。エラーにはなりませんが意図したグラフが描けないのは何が足りなくてそうなっているのか分かりません。原因分かりました
→var options_fullStacked = {opt};誤り
var options_fullStacked =opt;正しい
下のコードは100% stacked chartではなく、普通のstacked chartですがオブジェクトの受け渡し方がおかげさまで理解できましたので最終形として載せます。bodyでもheadでもページ読み込み時にこのコードですとグラフが表示されるようです。
動的にChartを変更するのも簡単ではなさそうですが、こちらを参考に機会があれば作ってみようと思います。
またPHPのオブジェクトをjavascriptの関数の引数として受け渡す方法も分かりましたのでGoogle Chartではないですがコードを載せます。
GoogleChartの場合引数渡しはなぜか同じコードを書いてもうまくいきませんでした、おそらくcallbackや他の仕様とも関係ありそうで奥が深そうなので今回はPHP側でsubプロシジャーを呼ぶ形で作る方法を取りたいと思います。
回答ありがとうございました。
PHP
1<?php 2/* 3 * GoogleChartにPHP配列データをセットしたい 4 * 参考:https://developers.google.com/chart/interactive/docs/gallery/barchart 5 */ 6 $datas = array(); 7 $roles = new stdClass; 8 $roles->role = 'annotation'; 9 $datas[]=array('Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature',$roles); 10 $datas[]=array('2010', 10, 24, 20, 32, 18, 5,''); 11 $datas[]=array('2020', 16, 22, 23, 30, 16, 9,''); 12 $datas[]=array('2030', 28, 19, 29, 30, 12, 13,''); 13 $json_php_datas =json_encode($datas); 14 15 $ret = new stdClass; 16 $ret->isStacked = true; 17 $ret->height = 300; 18 $ret->legend = new stdClass; 19 $ret->legend->positioin = 'top'; 20 $ret->legend->maxLines = 3; 21 $ret->hAxis = new stdClass; 22 $ret->hAxis->minValue = 0; 23 $json_php_ret =json_encode($ret); 24?> 25<html> 26 <head> 27 <!--Load the AJAX API--> 28 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 29 <script type="text/javascript"> 30 google.charts.load("current", {packages:["corechart"]}); 31 google.charts.setOnLoadCallback(drawChart); 32 function drawChart() { 33 34 var dd = JSON.parse('<?php echo $json_php_datas; ?>'); 35 var opt = JSON.parse('<?php echo $json_php_ret; ?>'); 36 var data = google.visualization.arrayToDataTable(dd); 37 var view = new google.visualization.DataView(data); 38 var options_fullStacked = opt; 39 var chart = new google.visualization.BarChart(document.getElementById("barchart_values")); 40 chart.draw(view, options_fullStacked); 41 42 } 43 </script> 44 </head> 45 <body> 46 <!--Div that will hold the bar chart--> 47 <div id="barchart_values" style="width: 900px; height: 300px;"></div> 48 </body> 49</html> 50
こちらは引数の受け渡し
PHP
1 <?php 2$ret = new stdClass; 3$ret->cat = array('たま','ニャー'); 4$php_json = json_encode($ret); 5 ?> 6<html> 7 <head> 8 </head> 9 <body> 10 <script type="text/javascript"> 11 function drawChart(php_json) { 12 13 var rets = JSON.parse(php_json); 14 var cats=rets.cat 15 for (var i = 0; i<cats.length;i++){ 16 alert(cats[i]) 17 } 18 } 19 20 </script> 21 <script type="text/javascript">drawChart('<?php echo $php_json ?>')</script> 22 </body> 23</html> 24
もちろん、固定ではありません、コードでは便宜上固定化してい手紛らわしくすみません。MySQLでselectしてきたデータを動的にグラフ化したいのです。
そのあたり見ている人は分からないので補足情報として追記していただけたらと。
そういう意味では「view.setColumns」も変数をセットしなくてはいけませんね、コードが中途半端でした
またroleについてですが、Google Charts にも様々なオプションやグラフの形式があるかと思います。目指す形を要件として追記していただけると的確な回答も得やすいと思います
回答1件
0
ベストアンサー
{}で囲むような記述に対してどの用にセットしたら良いか分からないと言うのが質問のひ1つです。
{}で囲ってあるのはオブジェクトですね（[]は配列）。
そのため、オブジェクトをセットしてあれば良いように思います。
汎用的なオブジェクトクラスとして「stdClass」というものが用意されているので、そちらを利用するのがおすすめです。
stdClassのマニュアル
http://phpspot.net/php/pgPHP%E6%A8%99%E6%BA%96%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AEstdClass%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6.html
サンプルコード
php
1<?php 2/* 3var options_fullStacked = { 4 isStacked: 'percent', 5 height: 300, 6 legent: {position: 'top', maxLines: 3}, 7 hAxis: { 8 minValue: 0, 9 ticks: [0, .3, .6, .9, 1] 10 } 11} 12の値の部分を再現するコード 13 */ 14$ret = new stdClass; 15$ret->isStacked = 'percent'; 16$ret->height = 300; 17$ret->legent = new stdClass; 18$ret->legent->positioin = 'top'; 19$ret->legent->maxLines = 3; 20$ret->hAxis = new stdClass; 21$ret->hAxis->minValue = 0; 22$ret->hAxis->ticks = [0, 0.3, 0.6, 0.9, 1]; 23 24$str = json_encode($ret);
これを実行すると
{"isStacked":"percent","height":300,"legent":{"positioin":"top","maxLines":3},"hAxis":{"minValue":0,"ticks":[0,0.3,0.6,0.9,1]}}
という文字列が返ってきます。
投稿2018/11/02 06:00
編集2018/11/05 04:59
総合スコア696
回答ありがとうございます。ご指定いただいたコードでデバッカーを見ても渡せているように思えるのですが、何故だかグラフは積み上げ100%にならないみたいなのです。
role:anntotionをarrayToDataTableのオブジェクトに渡す配列の1つに設定するのにもうまくいっていません。
修正したコードを質問の中に追加しました。よろしくおねがいします。
すみません、直りました。
var options_fullStacked = opt; [正しい]
var options_fullStacked = {opt}; [間違い]
自己解決されたようで何よりです。
本質問としては「解決済」となるかと思いますので、上記修正内容について回答していただき（もしくは質問欄に追記）、質問を閉じていただけると幸いです。
※「こうしたらできた」という情報がわかりやすい場所に書かれていると、次に同じことで悩んだ人の助けになりますので。
ご指導ありがとうございます。オブジェクトを直接javascriptのなかでJSON.parseする方法は分かったのですが、本題の引数としての受け渡し処理がうまくいっていないので閉じてよいか思案中です。引数で渡せるのかどうかだけでも確認したかったのですが、別の質問の形にした方がよいものでしょうか?
返信が遅くなりまして失礼いたしました。
そして申し訳ありません、「直りました」と書かれていたので解決済なのかと早合点してしまいました。
最終解決まで至らず申し訳ありません。
ただ、改めてコメントを拝見したのですが、具体的に何が残課題となっていたのかわからず……（「引数としての受け渡しがうまくいっていない」というのは理解したのですが、具体的に「コードの〇〇で△△な渡し方をしたのに、××になってしまっている」というところが見えないです）。
次回の質問時は、最初の段階で、今回書いてくださった「こういうことで困っている」という情報に加え、「実際にこういうコードを書いてみたが、〇〇のところで××になってしまう」といった形で、わかる限りの情報を具体的に書いていただけると、回答がつきやすくて良いかもしれません。
質問方法のご指導ありがとうございます。うまく伝えられないことも私自身の課題だとの認識はずっと持っていました。今度質問する時には気をつけたいと思います。
あなたの回答
tips
プレビュー
