在同一页面上显示多个Google图表

问题描述

我在同一网页上研究了多个google图表api 和其他两个网址，但它们是无效的.我无法在页面上加载多个甚至是单个Google图表.单张图表会很容易实现，但是一旦我输入其他图表，所有图表都会消失.我的Google图表位于php脚本中.这些值已成功从数据库中拉出，但是不会加载Google图表.不知道错误.任何帮助表示赞赏.代码如下:

I have looked into multiple google charts api, on same web page and couple of other URLs but invain. I am not able to load multiple / even single google chart on my page. Single chart would come easily but as soon as I enter other charts all of them will go. My google chart is inside the php script. The values are pulled successfully from the database, however google charts won't load. Dont know the error. Any help is appreciated. The code is as below:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:'gauge','table', 'corechart']});
</script>

<script type='text/javascript'>
google.setOnLoadCallback(initialize);
function initialize()
{

 function drawVisualization() {
            drawA();
            drawB();
        drawC();
                        }

function drawA() {
    var data_PUE = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['PUE',<?php echo $r_PUE['PUE']; ?> ]  ]);

var options_PUE =   {
          width : 800,
          height :  240,
          redFrom: 2.5, redTo: 5,
          yellowFrom:1.5, yellowTo: 2.5,
          greenFrom:0, greenTo: 1.5,
          minorTicks: 1,
          max:5
                };
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data_PUE, options_PUE);
        }

function drawB() {
    var data_CEC = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['CEC',<?php echo $r_EDF_CEC['CEC']; ?> ]   ]);

var options_CEC =   {
          width : 120,
          height :  120,
          redFrom: 1, redTo: 3,
          yellowFrom:.5, yellowTo: 1,
          greenFrom:0, greenTo: .5,
          minorTicks: .5,
          max:3
                };
    var chart1 = new google.visualization.Gauge(document.getElementById('chart_div1'));
    chart1.draw(data_CEC, options_CEC);
        }

function drawC() {
    var data_LEC = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['LEC',<?php echo $r_EDF_LEC['LEC']; ?> ]   ]);

var options_LEC =   {
          width : 120,
          height :  120,
          redFrom: .05, redTo: .1,
          yellowFrom:.01, yellowTo: .05,
          greenFrom:0, greenTo: .01,
          minorTicks: .01,
          max:.05
                };
    var chart2 = new google.visualization.Gauge(document.getElementById('chart_div2'));
    chart2.draw(data_LEC,options_LEC);
        }
}

    </script>

<div id="chart_div" style="width: 200px; height: 150px;"></div>
<p></p>
<div id="chart_div" style="width: 200px; height: 150px;"></div>
<p></p>
<div id="chart_div" style="width: 200px; height: 150px;"></div>
<p></p>

推荐答案

此处有错误:

<div id="chart_div" style="width: 200px; height: 150px;"></div>
<p></p>
<div id="chart_div" style="width: 200px; height: 150px;"></div>
<p></p>
<div id="chart_div" style="width: 200px; height: 150px;"></div>

我很确定你的意思是chart_div，chart_div1，chart_div2

I'm pretty sure you mean chart_div, chart_div1, chart_div2

在Firebug中进行调试会带来另一个错误:

Debugging in firebug brings another error:

google.load('visualization', '1', {packages:'gauge','table', 'corechart']});

应该是

google.load('visualization', '1', {packages:['gauge','table', 'corechart']});

最后，函数initialize()将不执行任何操作，因为创建了另一个名为drawVisualization()的函数，它将为您绘制图形.调用drawVisualization()或仅删除该函数声明.

And lastly, the function initialize() will do nothing because there is another function called drawVisualization() that was made which would do the drawing for you. Either call drawVisualization() or just remove that function declaration.

http://jsbin.com/xerewuva/1/edit

这篇关于在同一页面上显示多个Google图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！