生成的Google图表页面无效

时间:2014-06-02 23:00:36

标签: javascript html google-visualization

我正在使用codeigniter为我的mysql数据库中的数据生成谷歌图表页面。但页面显示不正确(根本没有图表)。我不知道生成的代码的哪一部分是错误的。生成的代码是这样的:

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);

   // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Time');
    data.addColumn('number', 'Va');
    data.addColumn('number', 'Vb');
    data.addColumn('number', 'Vc');
    //var d = new Date();
            data.addRow([1400230864720,9192114,9194641,9190145]);
            data.addRow([1400230864740,9191693,9194641,9189443]);
            data.addRow([1400230864760,9191694,9198856,9189444]);
            data.addRow([1400230864780,9190147,9193520,9189867]);
            data.addRow([1400230864800,9188180,9197449,9190146]);
            data.addRow([1400230864820,9189444,9196889,9190567]);
            data.addRow([1400230864840,9188461,9196186,9188740]);
            data.addRow([1400230864860,9190990,9199556,9188460]);
            data.addRow([1400230864880,9189867,9193518,9188600]);
            data.addRow([1400230864900,9189303,9198855,9187899]);
            var options = {
      title: 'Phasor'
    };
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data,options);
  }
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

您错过了google.setOnLoadCallback(drawChart);

下面的函数调用
    <html>
    <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);

       function drawChart() {

       // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Time');
        data.addColumn('number', 'Va');
        data.addColumn('number', 'Vb');
        data.addColumn('number', 'Vc');
        //var d = new Date();
                data.addRow([1400230864720,9192114,9194641,9190145]);
                data.addRow([1400230864740,9191693,9194641,9189443]);
                data.addRow([1400230864760,9191694,9198856,9189444]);
                data.addRow([1400230864780,9190147,9193520,9189867]);
                data.addRow([1400230864800,9188180,9197449,9190146]);
                data.addRow([1400230864820,9189444,9196889,9190567]);
                data.addRow([1400230864840,9188461,9196186,9188740]);
                data.addRow([1400230864860,9190990,9199556,9188460]);
                data.addRow([1400230864880,9189867,9193518,9188600]);
                data.addRow([1400230864900,9189303,9198855,9187899]);
                var options = {
          title: 'Phasor'
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data,options);

      } // This is the closing tag for the function

    </script>
    </head>
    <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
    </body>
    </html>