php循环中的多个图形

时间:2013-07-03 12:34:44

标签: php javascript google-visualization

我对谷歌图表有疑问。我开发了一个网页,其中包含5个(使用php生成)和每个5个ID:

echo "<div id = \"ID\"  style=\"display:none;\">"

我还有5个包含所有信息的json数组。我在每个表中显示数据,但我还想显示一个包含我的数据的图表。 我试图以这种方式做(但它不起作用):

for ($i = 0; $i<$n;$i++){

     $jsonTable = json_encode(${'table'.$Result_array[$i][1]});

            $ID =  $Result_array[$i][1]; //ID for the div
            echo "<script  type=\"text/javascript\">
                        google.load('visualization', '1', {'packages':['corechart']});

                // Set a callback to run when the Google Visualization API is loaded.
                google.setOnLoadCallback(drawChart());

                function drawChart() {

                  // Create our data table out of JSON data loaded from server.
                      var data = new google.visualization.DataTable(".$jsonTable.");
                      var options = {
                              title: 'Company Performance',
                              hAxis: {title: 'L value', titleTextStyle: {color: 'red'}, gridlines:{count:10} },
                              vAxis: {
                                  title: \"I rms\", 

                                  maxValue:1.5,

                                gridlines:{count:10}
                              }

                            };


                      // Instantiate and draw our chart, passing in some options.
                      // Do not forget to check your div ID
                      var chart = new google.visualization.ColumnChart(document.getElementById('".$ID."'));
                     chart.draw(data, options);

                }
            }


            </script>";
}

如果我仅将此代码用于1个表,那么工作正常,但是当我使用循环并尝试生成多个图形时,它不起作用。 有人可以帮帮我吗?谢谢!

P.S:也许我还要解释一下,首先,我有一张包含我的5个结果的表格,当我点击时,我有一个onclik功能来取消适当的隐藏。这总是有效(使用图表而没有图表),但从不显示图形....

1 个答案:

答案 0 :(得分:0)

5 ids只在一个id

中循环
var chart = new google.visualization.ColumnChart(document.getElementById('".$ID."'));

应该是这样的

var chart = new google.visualization.ColumnChart(document.getElementById('".$ID."_".$i"'));

并添加div

echo "<div id = \"ID_0\"  style=\"display:none;\">"
echo "<div id = \"ID_1\"  style=\"display:none;\">"
echo "<div id = \"ID_2\"  style=\"display:none;\">"
echo "<div id = \"ID_3\"  style=\"display:none;\">"
echo "<div id = \"ID_4\"  style=\"display:none;\">"