带日期的JSON数据无法在Highcharts中渲染折线图，求解决方案

问题核心原因 #

Highcharts对时间序列数据有特定格式要求：

• 直接传入字符串日期无法被识别，必须转换为毫秒级时间戳
• X轴需明确配置为datetime类型，否则会按普通类别处理

1. 修改PHP生成JSON的代码 #

将数据库中的日期转换为毫秒时间戳，同时把日期和数值封装为数组对（而非交替存储），确保JSON结构符合Highcharts要求：

<?php
// 假设已通过MySQLi获取数据到$rows数组
$mysqli = new mysqli("localhost", "username", "password", "database");
$result = $mysqli->query("SELECT Datum, KleurL FROM your_table");
$rows = $result->fetch_all(MYSQLI_ASSOC);

$data = [];
foreach ($rows as $row) {
    // 将数据库日期转为毫秒级时间戳（适配Highcharts）
    $timestamp = strtotime($row['Datum']) * 1000;
    // 封装为[时间戳, 数值]的数组结构
    $data[] = [$timestamp, (float)$row['KleurL']];
}

// 输出JSON
header('Content-Type: application/json');
echo json_encode(['data' => $data]);
?>

2. 修改Highcharts前端代码 #

配置X轴为日期类型，并正确加载处理后的JSON数据：

<div id="container" style="width: 100%; height: 400px;"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
// 加载JSON数据并渲染图表
fetch('your_php_file.php')
    .then(response => response.json())
    .then(data => {
        Highcharts.chart('container', {
            xAxis: {
                type: 'datetime', // 必须设置为datetime类型
                dateTimeLabelFormats: {
                    day: '%Y-%m-%d', // 自定义日期显示格式，可按需调整
                    week: '%Y-%m-%d',
                    month: '%Y-%m'
                },
                title: {
                    text: '日期'
                }
            },
            yAxis: {
                title: {
                    text: 'KleurL数值'
                }
            },
            series: [{
                name: 'KleurL',
                data: data.data // 直接使用处理后的数组数据
            }],
            tooltip: {
                formatter: function() {
                    return `<b>${this.series.name}</b><br/>${Highcharts.dateFormat('%Y-%m-%d', this.x)}: ${this.y}`;
                }
            }
        });
    });
</script>

关键注意事项 #

• 确保数据库中的日期格式能被strtotime()正确解析（如Y-m-d、Y-m-d H:i:s），如果是其他格式，需用DateTime类转换：

  $date = DateTime::createFromFormat('d/m/Y', $row['Datum']);
  $timestamp = $date->getTimestamp() * 1000;
  

• 必须将KleurL转为数值类型（(float)或(int)），避免字符串导致折线无法渲染

内容的提问来源于stack exchange，提问作者Pascal