Question

我正在研究这个项目，我需要制作一个Google Chart（柱形图）来使我数据库中的数据可视化。我检查了IP和数据库（数据来自数据库），一切正常。但是当我尝试在计算机上看到输出时，页面是空白的。我认为这个问题来自google.load，我在下面做了这个。我仍然得到空白页面。请帮我解决这个问题。谢谢！

//
    google.load('visualization', '1.0', {packages:['corechart'], callback: drawChart});
//

这是整个页面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><html>
        <head>
            <title>R1 Google Chart</title>
            <!-- Load jQuery -->
            <script language="javascript" type="text/javascript" 
                src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
            </script>
            <!--Load the Ajax API-->
            <script type="text/javascript" src="https://www.google.com/jsapi"></script>

            <script type="text/javascript">
            // Load the Visualization API and the column chart package.
            // Set a callback to run when the Google Visualization API is loaded.
            google.load('visualization', '1.0', {packages:['corechart'], callback: drawChart});

            function drawChart() {
                var jsonData = $.ajax({
                    url: "chart.php",
                    dataType: "json",
                    async: false
                }).responseText;

                var obj = jQuery.parseJSON(jsonData);
                var data = google.visualization.arrayToDataTable(obj);
                var options = {
                    title: 'Solar Panel Data',
                    width: 800,
                    height: 600,
                    hAxis: {title: 'time', titleTextStyle: {color: 'red'}}
                };
                var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
                chart.draw(data, options);
            }
            </script>
        </head>
        <body>
            <!--this is the div that will hold the column chart-->
            <div id="chart_div" style="width: 900px; height: 500px;">
            </div>
        </body>
    </html>

PHP页面

<?php
            $con=mysql_connect("131.xxx.xxx.xx","xx","xxxx") or die("Failed to connect with database!!!!");
            mysql_select_db("r1array", $con);
            /** This example will display a column chart. If you need other charts such as a Bar chart, you will need to modify the code a little
            to make it work with bar chart and other charts **/
            $sth = mysql_query("SELECT UNIX_TIMESTAMP(TimeStamp), Pac FROM SolarData");
            /*
            ---------------------------
            example data: Table (Chart)
            --------------------------
            TimeStamp               Pac
            2013-08-16 06:45:01     0
            2013-08-16 06:50:01     0
            2013-08-16 06:55:01     12
            2013-08-16 07:00:00     39
            2013-08-16 07:05:01     64
            2013-08-16 07:10:00     84

            */

            $rows = array();
            //flag is not needed
            $flag = true;
            $table = array();
            $table['cols'] = array(
                // Labels for your chart, these represent the column titles
                array('label' => 'TimeStamp', 'type' => 'TIMESTAMP DEFAULT NOW()'),
                array('label' => 'Pac', 'type' => 'INT')
            );
            $rows = array();
            while($r = mysql_fetch_assoc($sth)) {
                $temp = array();
                //
                $temp[] = array('v' => (string) $r['TimeStamp']); 

                // Values of each slice
                $temp[] = array('v' => (int) $r['Pac']); 
                $rows[] = array('c' => $temp);
            }
            $table['rows'] = $rows;
            $jsonTable = json_encode($table);
            echo $jsonTable;
            mysql_close($db);
        ?>

Answer 1

似乎在你的php文件中以错误的方式准备数据。使用您的html文件和以下php文件伪造您的数据我得到了柱形图。

<?php
    /*
    ---------------------------
    example data: Table (Chart)
    --------------------------
    TimeStamp               Pac
    2013-08-16 06:45:01     0
    2013-08-16 06:50:01     0
    2013-08-16 06:55:01     12
    2013-08-16 07:00:00     39
    2013-08-16 07:05:01     64
    2013-08-16 07:10:00     84
    */

    $table = array();

    $table[0] = array('TimeStamp', 'Pac');
    $table[1] = array('2013-08-16 06:45:01',     0);
    $table[2] = array('2013-08-16 06:50:01',     0);
    $table[3] = array('2013-08-16 06:55:01',     12);
    $table[4] = array('2013-08-16 07:00:00',     39);
    $table[5] = array('2013-08-16 07:05:01',     64);
    $table[6] = array('2013-08-16 07:10:00',     84);

    $jsonTable = json_encode($table);
    echo $jsonTable;
?>

你的php文件中有评论这个例子将显示一个饼图... 。您想要创建哪个图表？

Answer 2

蝙蝠，我可以在这里看到一个问题：

$table['cols'] = array(
    // Labels for your chart, these represent the column titles
    array('label' => 'TimeStamp', 'type' => 'TIMESTAMP DEFAULT NOW()'),
    array('label' => 'Pac', 'type' => 'INT')
);

因为'TIMESTAMP DEFAULT NOW()'和'INT'不是DataTable的有效数据类型。如果要从时间戳创建Date对象，则需要使用'date'或'datetime'数据类型，并将时间戳格式设置为格式为'Date(year, month, day, hour, minute, second, millisecond)'的字符串，其中{{1}是零索引（所以1月是0而不是1）。 month类型应为'INT'。

使用这些修补程序更新您的代码。如果您的图表仍然不起作用，请在浏览器中查看'number' - 您应该看到数据的JSON字符串输出（如果没有，您的PHP中存在问题，您将不得不调试） - 并更新你的帖子有这个JSON字符串。

Google柱形图空白页

2 个答案: