在 Highcharts 中使用时间和值作为 x 和 y 预处理传感器数据。数组中的数组可以工作吗？

Question

我想创建一个 Highcharts 折线图，其中包含来自多个传感器的温度数据，每个传感器在不同时间发布结果。数据存储在 MySQL 数据库中作为 ID、位置、温度、时间戳。由于每个传感器将在唯一时间生成数据，因此 x 值不会对齐。出于这个原因，我有兴趣为每个 Highcharts 系列提供 x 值和 y 值......类似于：

series: [{ // Location 1
   name: 'Main Bedroom',
   data: time1, temperature1

我从一个位置 (MainBDRm) 开始开发我的代码。我正在使用以下查询来获取和存储多行数据。

$sql = "SELECT temp, reading_time FROM ASHP_SensorData WHERE location = 'MainBDRm' ORDER BY reading_time DESC LIMIT 5"; 

while ($data = $result->fetch_assoc()){
    $sensor_data[] = $data;
{

$temperature1 = json_encode(array_reverse(array_column($sensor_data, 'temp')), JSON_NUMERIC_CHECK);
$time1        = json_encode(array_reverse(array_column($sensor_data, 'reading_time')), JSON_NUMERIC_CHECK);

echo $temperature1 yields an array as  [76,75,73,71,70]
echo $time1 yields an array as          ["2021-12-19 17:07:13","2021-12-19 17:07:43","2021-12-19 17:08:13","2021-12-19 17:08:44","2021-12-19 17:09:14"]

我已经确认我可以使用

成功生成图表

series: [{ // Location 1
    name: 'Main Bedroom',
    //yAxis: 0,
    //showInLegend: true,

    //data: temperature1,  // works
    data:[  // this works too
        ["2021-12-19 17:07:13", 76],
        ["2021-12-19 17:07:43", 75],
        ["2021-12-19 17:08:13", 73],
        ["2021-12-19 17:09:14", 71],
        ],

我想知道是否可以使用 Json 将查询结果预处理为数组中的数组，并将其用作数据的输入：具有 x 和 y 值的元素.类似于：["2021-12-19 17:07:13", 76], ..., ["2021-12-19 17:09:14", 70]

我试过了

$stringToReturn = array();
$result = $conn->query($sql);
while ($data = $result->fetch_assoc()){
    $sensor_data[] = $data;
    array_push($stringToReturn, $data);
}
echo json_encode($stringToReturn, $data);

产生：

[{"reading_time":"2021-12-19 22:24:33","temp":"79.70"},{"reading_time":"2021-12-19 22:24:03","temp":"79.70"},{"reading_time":"2021-12-19 22:23:33","temp":"79.70"},{"reading_time":"2021-12-19 22:23:03","temp":"79.70"},{"reading_time":"2021-12-19 22:22:33","temp":"79.70"}]

但我不确定如何在 Highcharts 脚本中使用它，或者它是否可用。

Answer 1

请注意，Highcharts 期望在数据数组中获取 x and y 值，而不是 "reading_time" 或 "temp" 等自定义名称，因此您需要将数据解析为所需格式。

演示：https://jsfiddle.net/BlackLabel/oe3j9fcp/

或者您可以提前几步完成：https://jsfiddle.net/BlackLabel/pd32q7zo/

API: https://api.highcharts.com/highcharts/series.line.data

在 Highcharts 中使用时间和值作为 x 和 y 预处理传感器数据。数组中的数组可以工作吗？

Preprocessing sensor data with a time and value as x and y in Highcharts. Will an array within an array work?

highcharts