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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Google Charts

Google Chartsは、円グラフ・棒グラフ・折れ線グラフなどのさまざまなグラフをJavaScriptで容易に表示できる無料のライブラリ。デザインやイベント処理といったカスタマイズができ、商用利用も可能です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

1866閲覧

動的に生成したHTMLに応じてGoogleChartを同一ページ内に複数表示させたい

noriBanana

総合スコア12

Google Charts

Google Chartsは、円グラフ・棒グラフ・折れ線グラフなどのさまざまなグラフをJavaScriptで容易に表示できる無料のライブラリ。デザインやイベント処理といったカスタマイズができ、商用利用も可能です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2019/08/25 02:16

動的に生成した項目に対して、それぞれGoogleChartを表示させたいのですが、最後の項目しかchart表示できません。(サンプルのphpだとtitle「C」のみchartが表示される)

JSの読み込み順番かと思い、onloadをつけたりhead内で読み込んでみたりしましたが、相変わらず最後の項目のみchartが表示されました。

書き方が間違っている箇所のご指摘、書き方などご教授いただけますと幸いです。
何卒よろしくお願いいたします。

※項目数は可変です。title:A、title:B、title:C、title:D、・・・

index.php

<?php $array = array ( array('title' => 'A', 'id' => '1', 'orange' => '60', 'apple' => '30', 'grape' => '10'), array('title' => 'B', 'id' => '2', 'orange' => '40', 'apple' => '40', 'grape' => '20'), array('title' => 'C', 'id' => '3', 'orange' => '10', 'apple' => '60', 'grape' => '30'), ); //データベースからデータを取り出すので項目数は可変です。 $HTML = ''; foreach($array as $value){ $item_data = '["title","'.$value['title'].'"],'; $item_data .= '["orange",'.$value['orange'].'],'; $item_data .= '["apple",'.$value['apple'].'],'; $item_data .= '["grape",'.$value['grape'].']'; $HTML .= '<div id="target'.$value['id'].'"></div>'; $HTML .= '<script>'; $HTML .= 'var data'.$value['id'].' = ['; $HTML .= $item_data; $HTML .= '];'; $HTML .= 'var target'.$value['id'].' = document.getElementById("target'.$value['id'].'");'; $HTML .= 'console.log(target'.$value['id'].');'; $HTML .= 'window.onload = function () {chart(data'.$value['id'].', target'.$value['id'].');};'; $HTML .= '</script>'; } $HTML_chart = '<script src="https://www.gstatic.com/charts/loader.js"></script>'; $HTML_chart .= <<<EOM <script> function chart(data1, target){ console.log(data1); 'use strict'; // パッケージのロード google.charts.load('current', {packages: ['corechart']}); // コールバックの登録 google.charts.setOnLoadCallback(drawChart); function drawChart(){ var data = google.visualization.arrayToDataTable( data1 ); // オプションの準備 var options = { title: data1['0']['1'], width: 700, height: 500, is3D: false, legend: { position: 'right'} }; var chart = new google.visualization.PieChart(target); chart.draw(data, options); } } </script> EOM; ?> <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta content="width=device-width" name="viewport"> <meta content="IE=edge" http-equiv="X-UA-Compatible"> <title></title> <meta name="Keywords" content=""> <meta name="description" content=""> </head> <body> <?php echo $HTML; echo $HTML_chart; ?> </body> </html>

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/08/25 05:31

$HTML .= 'window.onload = function () {chart(data'.$value['id'].', target'.$value['id'].');};'; がブラウザにイベントとして全部登録されてないだけじゃないの?
noriBanana

2019/08/25 12:02

お返事ありがとうございます。 「ブラウザにイベントとして登録」とはどう書けばいいのでしょうか。書き方のヒントや関連サイトがありましたら教えていただけると助かります。
noriBanana

2019/08/26 00:17 編集

window.addEventListener("load", function () { //処理 }); 該当箇所をaddEventListnerに置き換えたら表示できました! window.onloadだと、最後の処理しか実行されないのですね。 ご返信ありがとうございました。 解決済みにしておきます。
guest

回答1

0

自己解決

js処理箇所を「window.addEventListener("load", function () { //処理 });」に変更したら3つとも表示されました。onloadは上書きされる(最後のonload処理だけ実行される)ようでした。
ありがとうございました。

一応、修正したコード全文掲示

<?php $array = array ( array('title' => 'A', 'id' => '1', 'orange' => '60', 'apple' => '30', 'grape' => '10'), array('title' => 'B', 'id' => '2', 'orange' => '40', 'apple' => '40', 'grape' => '20'), array('title' => 'C', 'id' => '3', 'orange' => '10', 'apple' => '60', 'grape' => '30'), ); //データベースからデータを取り出すので項目数は可変です。 $HTML = ''; foreach($array as $value){ $item_data = '["title","'.$value['title'].'"],'; $item_data .= '["orange",'.$value['orange'].'],'; $item_data .= '["apple",'.$value['apple'].'],'; $item_data .= '["grape",'.$value['grape'].']'; $HTML .= '<div id="target'.$value['id'].'"></div>'; $HTML .= '<script>'; $HTML .= 'var data'.$value['id'].' = ['; $HTML .= $item_data; $HTML .= '];'; $HTML .= 'var target'.$value['id'].' = document.getElementById("target'.$value['id'].'");'; $HTML .= 'console.log(target'.$value['id'].');'; $HTML .= 'window.addEventListener("load", function () {chart(data'.$value['id'].', target'.$value['id'].');})'; $HTML .= '</script>'; } $HTML_chart = '<script src="https://www.gstatic.com/charts/loader.js"></script>'; $HTML_chart .= <<<EOM <script> function chart(data1, target){ console.log(data1); 'use strict'; // パッケージのロード google.charts.load('current', {packages: ['corechart']}); // コールバックの登録 google.charts.setOnLoadCallback(drawChart); function drawChart(){ var data = google.visualization.arrayToDataTable( data1 ); // オプションの準備 var options = { title: data1['0']['1'], width: 700, height: 500, is3D: false, legend: { position: 'right'} }; var chart = new google.visualization.PieChart(target); chart.draw(data, options); } } </script> EOM; ?> <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta content="width=device-width" name="viewport"> <meta content="IE=edge" http-equiv="X-UA-Compatible"> <title></title> <meta name="Keywords" content=""> <meta name="description" content=""> </head> <body> <?php echo $HTML; echo $HTML_chart; ?> </body> </html>

投稿2019/08/26 00:12

noriBanana

総合スコア12

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問