使用 MySQL 中的 PHP 数组数据生成 Google 函数图，但函数不可视化答案

【问题标题】：Generating Google Function Chart with PHP Arrays data from MySQL, but function doesn't visualize使用 MySQL 中的 PHP 数组数据生成 Google 函数图，但函数不可视化
【发布时间】：2018-10-02 17:08:06
【问题描述】：

我想使用来自 MySQL 数据库 (localhost) 的数据从 Google Charts 创建一个函数图。该程序在使用在线标记语言验证器编译时没有显示与本主题冲突的错误，但在浏览器中查看时仍然没有创建功能图。我检查了我的代码和在线资源，包括该论坛上有关此主题的多个帖子，但无济于事。 PHP 代码确实有效。我唯一能马上想到的就是 JavaScript 代码没有正确加载。

JavaScript 部分是从 sgoogle linechart（类型函数）源代码 (https://developers.google.com/chart/interactive/docs/gallery/linechart) 略微修改的版本。

代码：

<!Doctype html>
<html>
<body>
<?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $database = "daylight";
    $conn = new mysqli($servername, $username, $password, $database);
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }
        $startdate=time()-(time()%(24*3600))-7200;
        $enddate=$startdate+365*24*3600;
        //echo $startdate."<br>".$enddate;
        $s=strftime("%Y-%m-%d", $startdate);
        $e=strftime("%Y-%m-%d", $enddate);

        $Off = 12;  //Offset
        $A = 4;     //Amplidute
        $light=0;

        for($i=$startdate; $i<=$enddate; $i+=$day)  //genData (works)
        {...}

        $sql_request = "SELECT * FROM `db` WHERE `Datum` >= '$s' And `Datum` <= '$e'";
        $daylight_array=array();
        $date_array=array();
        foreach($conn->query($sql_request) as $row)
        {
            $daylight_array[]=$row["Tageslicht"];
            $date_array[]=$row["Datum"];
            //print $row["Tageslicht"];
        }
        // echo json_encode($date_array);
        // echo json_encode($daylight_array);

?>
<div id="chart" style="width: 900px; height: 500px"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

    var date = <?php echo json_encode($date_array); ?>;
    var daylight = <?php echo json_encode($daylight_array); ?>;

    function drawChart() {
        var data = google.visualization.arrayToDataTable();
        data.addColumn('string', 'Jahr-Monat-Tag');
        data.addColumn('number', 'Sonnenstunden');

        for(i = 0; i < date.length; i++)
            data.addRow([date[i], daylight[i]]);

        var options = {

          title: 'Sonnenstunden über das Jahr',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart'));

        chart.draw(data, options);
  }
</script>
</body>
</html>

【问题讨论】：

您是否检查了生成的源代码，尤其是 JSON？您是否在浏览器的控制台中收到任何错误消息？如果你console.log(data)怎么办？
我在哪里可以做到这一点，在浏览器中还是我必须在代码中写这个，抱歉问，但我是 javascript 的新手？
It stands so on the google code without the new, and they should know what is right. jeesus 不是在纠正 Google，他是在纠正你。在采取防御措施之前，请仔细检查链接的文档和您自己的代码。
@ChrisG 我检查了 console.log 日期和白天，两者都没有，数据也没有输出任何东西。这意味着分配不起作用，即使当我在 php 部分回显它时 json_encode 起作用。任何想法为什么这不起作用？
如果您更改了代码，请将您当前的版本放在问题中。

标签： javascript php mysqli google-visualization

【解决方案1】：

我认为您初始化 DataTable 的方法不正确。与the docs say 一样，arrayToDatatable 使用单个调用创建和填充 DataTable。因此，您应该使用以下内容初始化 DataTable：

var data = new google.visualization.DataTable();

没时间试，不过好像是这样的。。。。

如果您坚持使用您使用的方法，请按照文档为该方法提供数据数组。

【讨论】：

它在没有新的谷歌代码上如此，他们应该知道什么是正确的。
我也在查看文档，但我没有发现他们提供误导性示例的任何地方。他们在每个地方初始化一个新对象，new 关键字被使用。像arrayToDataTable 这样的方法不需要关键字。
@Andreas 他们在将数据正确放入函数调用时使用您的版本；但是，当他们将列和行添加到现有表时，他们会使用此答案中的行。工作示例：jsfiddle.net/khrismuc/Lr0oste8
那么日期和日光应该是数组还是我需要先将它们初始化为数组？
检查this example 以获取所需的更改。您的数据很好，但您需要修复创建和绘制 DataTable 的行。

【解决方案2】：

首先，arrayToDataTable 似乎需要传递一个参数。

var data = google.visualization.arrayToDataTable([]);

第二，日期和日光类型不正确。当需要它们是数组时，它们当前是字符串。

var date = JSON.parse(<?php echo JSON.stringify($date_array); ?>);
var daylight = JSON.parse(<?php echo JSON.stringify($daylight_array); ?>);

在推送这两个更新之后，它似乎对我来说工作正常。

【讨论】：

在 JavaScript 中，不需要分号。这里的问题与语法完全无关。