Highcharts多折线图异常：各年份数据未独立成线

问题描述 #

尝试用Highcharts生成多折线图，每条折线对应不同年份数据，X轴为日期、Y轴为价格。通过PHP从MySQL取数并按年份分组，$chart_data数组存储分组后的数据（name为年份，data为时间戳+价格的数组对）。图表能生成但数据展示异常：所有年份数据显示在同一条折线上，无法实现各年份独立折线的预期效果。

当前图表效果：所有年份数据重叠为单条折线
期望效果：各年份数据为独立折线，区分显示
分组后的数据结构正常，已确认年份分组正确

问题原因 #

1. 时间戳重复放大：PHP中已将时间戳转换为Highcharts所需的毫秒格式（$timestamp = $date->getTimestamp() * 1000），但JS代码里又对data.x再次乘以1000，导致X轴时间值变为实际时间的1000倍（相当于把毫秒变成微秒级别），所有数据点的X轴值极度接近，视觉上重叠成一条线。
2. 手动拼接JS语法风险：通过PHP循环拼接JS的series数组，最后一个元素会多一个逗号，可能导致JS解析错误，影响图表渲染。

解决方案 #

修改后的完整代码 #

<?php
$chart_record = $wpdb->get_results($SQL_ALL_TBL_FOR_CHART);

$chart_title = '';
$chart_data = array();
if ($chart_record){
    $row = $chart_record[0];
    $chart_title = $row->var_name . ' | ' . $row->type_name;

    $grouped_data = array();
    foreach ($chart_record as $row) {
        $year = $row->year;
        if (!isset($grouped_data[$year])) {
            $grouped_data[$year] = array();
        }

        $date = new DateTime($row->rptl_date);
        // 直接生成Highcharts需要的毫秒级时间戳，无需后续重复放大
        $timestamp = $date->getTimestamp() * 1000;

        $grouped_data[$year][] = array(
            $timestamp,
            (int) $row->rptl_price
        );
    }

    foreach ($grouped_data as $year => $year_data) {
        $chart_data[] = array(
            'name' => $year,
            'data' => $year_data
        );
    }
}
?>

<script src="https://code.highcharts.com/highcharts.js"></script>

<div class="container">
    <div id="chart-container"></div>
</div>

<script>
Highcharts.chart('chart-container', {
    chart: {
        type: 'line'
    },
    title: {
        text: '<?php echo $chart_title; ?>'
    },
    xAxis: {
        type: 'datetime',
        title: {
            text: 'Date'
        }
    },
    yAxis: {
        title: {
            text: 'Price'
        }
    },
    // 使用json_encode直接输出数组，避免手动拼接的语法错误
    series: <?php echo json_encode($chart_data); ?>
});
</script>

关键修改点 #

1. 修正时间戳计算：保留PHP中$timestamp = $date->getTimestamp() * 1000的毫秒转换，同时将数据格式改为[timestamp, price]的数组形式，JS中不再重复乘以1000，确保X轴时间值正确。
2. 改用JSON编码输出series：通过json_encode($chart_data)直接将PHP数组转换为合法的JS数组，彻底避免手动拼接导致的语法错误，同时代码更简洁易维护。

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