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

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

ただいまの
回答率

89.99%

GoogleChartにphpの配列を引数で渡したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 414

s.kono

score 14

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を変更するのも簡単ではなさそうですが、こちらを参考に機会があれば作ってみようと思います。

  • https://developers.google.com/chart/interactive/docs/basic_interactivity

またPHPのオブジェクトをjavascriptの関数の引数として受け渡す方法も分かりましたのでGoogle Chartではないですがコードを載せます。

GoogleChartの場合引数渡しはなぜか同じコードを書いてもうまくいきませんでした、おそらくcallbackや他の仕様とも関係ありそうで奥が深そうなので今回はPHP側でsubプロシジャーを呼ぶ形で作る方法を取りたいと思います。

回答ありがとうございました。

<?php
/*
 * GoogleChartにPHP配列データをセットしたい
 * 参考:https://developers.google.com/chart/interactive/docs/gallery/barchart
 */
    $datas = array();
    $roles = new stdClass;
    $roles->role = 'annotation';
    $datas[]=array('Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature',$roles);        
    $datas[]=array('2010', 10, 24, 20, 32, 18, 5,'');
    $datas[]=array('2020', 16, 22, 23, 30, 16, 9,'');
    $datas[]=array('2030', 28, 19, 29, 30, 12, 13,'');
    $json_php_datas  =json_encode($datas);

    $ret = new stdClass;
    $ret->isStacked = true;
    $ret->height = 300;
    $ret->legend = new stdClass;
    $ret->legend->positioin = 'top';
    $ret->legend->maxLines = 3;
    $ret->hAxis = new stdClass;
    $ret->hAxis->minValue = 0;
    $json_php_ret  =json_encode($ret);
?>
<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart()  {

        var dd = JSON.parse('<?php echo $json_php_datas; ?>');
        var opt = JSON.parse('<?php echo $json_php_ret; ?>');
        var data = google.visualization.arrayToDataTable(dd);
        var view = new google.visualization.DataView(data);
        var options_fullStacked = opt;    
        var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
        chart.draw(view, options_fullStacked);

  }
  </script>
  </head>
  <body>
    <!--Div that will hold the bar chart-->
    <div id="barchart_values" style="width: 900px; height: 300px;"></div>
  </body>  
</html>


こちらは引数の受け渡し

 <?php
$ret = new stdClass;
$ret->cat = array('たま','ニャー');
$php_json = json_encode($ret);
  ?>
<html>
  <head>
  </head>
  <body>
  <script type="text/javascript">
    function drawChart(php_json) {

        var rets = JSON.parse(php_json);
        var cats=rets.cat
        for (var i = 0; i<cats.length;i++){
             alert(cats[i])
        }           
    }

  </script>
   <script type="text/javascript">drawChart('<?php echo $php_json ?>')</script>  
  </body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/11/02 10:38

    そのあたり見ている人は分からないので補足情報として追記していただけたらと。

    キャンセル

  • s.kono

    2018/11/02 10:38

    そういう意味では「view.setColumns」も変数をセットしなくてはいけませんね、コードが中途半端でした

    キャンセル

  • m.ts10806

    2018/11/02 10:39 編集

    またroleについてですが、Google Charts にも様々なオプションやグラフの形式があるかと思います。目指す形を要件として追記していただけると的確な回答も得やすいと思います

    キャンセル

回答 1

checkベストアンサー

+2

{}で囲むような記述に対してどの用にセットしたら良いか分からないと言うのが質問のひ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
/*
var options_fullStacked = {
  isStacked: 'percent',
  height: 300,
  legent: {position: 'top', maxLines: 3},
  hAxis: {
    minValue: 0,
    ticks: [0, .3, .6, .9, 1]
  }
}
の値の部分を再現するコード
 */
$ret = new stdClass;
$ret->isStacked = 'percent';
$ret->height = 300;
$ret->legent = new stdClass;
$ret->legent->positioin = 'top';
$ret->legent->maxLines = 3;
$ret->hAxis = new stdClass;
$ret->hAxis->minValue = 0;
$ret->hAxis->ticks = [0, 0.3, 0.6, 0.9, 1];

$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/05 14:39

    ご指導ありがとうございます。オブジェクトを直接javascriptのなかでJSON.parseする方法は分かったのですが、本題の引数としての受け渡し処理がうまくいっていないので閉じてよいか思案中です。引数で渡せるのかどうかだけでも確認したかったのですが、別の質問の形にした方がよいものでしょうか?

    キャンセル

  • 2018/11/06 13:06

    返信が遅くなりまして失礼いたしました。
    そして申し訳ありません、「直りました」と書かれていたので解決済なのかと早合点してしまいました。
    最終解決まで至らず申し訳ありません。

    ただ、改めてコメントを拝見したのですが、具体的に何が残課題となっていたのかわからず……(「引数としての受け渡しがうまくいっていない」というのは理解したのですが、具体的に「コードの〇〇で△△な渡し方をしたのに、××になってしまっている」というところが見えないです)。

    次回の質問時は、最初の段階で、今回書いてくださった「こういうことで困っている」という情報に加え、「実際にこういうコードを書いてみたが、〇〇のところで××になってしまう」といった形で、わかる限りの情報を具体的に書いていただけると、回答がつきやすくて良いかもしれません。

    キャンセル

  • 2018/11/09 08:26

    質問方法のご指導ありがとうございます。うまく伝えられないことも私自身の課題だとの認識はずっと持っていました。今度質問する時には気をつけたいと思います。

    キャンセル

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

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる