使用 JSON 将数据从 PHP 数组传递到 Highcharts 图表

Posted 2023-05-08

【中文标题】使用 JSON 将数据从 PHP 数组传递到 Highcharts 图表

【英文标题】：Passing data from PHP array to Highcharts chart with JSON

【发布时间】：2018-11-16 17:02:19

【问题描述】：

我正在尝试绘制来自我正在使用 getdata.php?id=allTemp 查询的 sql 数据库的 highcharts 图表。我对 JSON 不太了解，但到目前为止我已经组装了下面的代码，而且图表甚至没有绘制。 $.getJSON 函数在我获得单个变量（例如 weather.wesleyweisenberger.com/getdata.php?id=humanity）时起作用，但是一旦我尝试获取 getdata.php?id=allTemp 它就不起作用，请帮忙我……

while($data = $result->fetch_assoc())
                        echo json_encode($data, JSON_FORCE_OBJECT);
                    

并且返回格式为

"timestamp":"2018-05-30 00:33:05","temperature":"67.39","humidity":"66.57","pressure":"99.21""timestamp":"2018-05-30 00:47:39","temperature":"65.52","humidity":"70.41","pressure":"99.2"...

我的 index.php 文件内容如下：

<script>
        $(function()
            $.getJSON('getdata.php?id=allTemp', function(json)
                $('#container').highcharts(
                    series: [
                        data: json
                    ],
                    title: 
                        text: 'Title'
                    
                )
            )
        )
    </script>
    <div id="container" style="width:100%; height:400px;"></div>

【问题讨论】：

那是无效的 json。将所有 $data 推送到一个数组，并在最后回显该数组编码。

【参考方案1】：

.........

这是一个无效的 json 模式。你得到这个是因为你正在回显多个 json 对象，其中响应需要一个。您只需回显一次即可纠正此问题。

$results = array();
while($data = $result->fetch_assoc())
    array_push($results, $data);

echo json_encode($results);

【参考方案2】：

Highchart 使用数组来填充其数据，而您只是并排返回大量对象，没有实际可接受的格式，现在使用下面的代码，您将打印一个字符串化的对象数组。

在你的 PHP 上试试这个：

var $stringToReturn = [];

while($data = $result->fetch_assoc())
  push($stringToReturn, $data);


echo json_encode($stringToReturn);

【讨论】：

这很棒！您知道如何将 json 数组的不同部分分配给 highcharts 中的每个轴，例如将时间戳分配给 xAxis 并将温度分配给 yAxis？

是的，请查看 Highcharts 文档，其中也包含大量示例：highcharts.com/docs/chart-concepts/axes