動的に生成した項目に対して、それぞれ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>
回答1件
あなたの回答
tips
プレビュー