如何在CanvasJS图表X轴正确显示日期（附PHP数据库代码）

问题核心 #

直接传递数据库原始日期时，CanvasJS无法正确解析导致X轴无日期展示；转成时间戳虽能渲染图表，但不符合显示日期文本的需求。关键是让CanvasJS正确识别并格式化日期字符串。

后端PHP代码调整 #

从control_data表取数时，将日期字段统一格式化为标准日期字符串（如YYYY-MM-DD），无需转为时间戳：

// 数据库查询示例
$sql = "SELECT date_field, loan_balance FROM control_data";
$result = mysqli_query($dbConn, $sql);
$chartData = [];

while ($row = mysqli_fetch_assoc($result)) {
    // 统一日期格式，适配CanvasJS解析
    $formattedDate = date('Y-m-d', strtotime($row['date_field']));
    $chartData[] = [
        "x" => $formattedDate,
        "y" => (float)$row['loan_balance']
    ];
}

// 输出JSON格式数据
echo json_encode($chartData);

前端JS代码修改 #

在CanvasJS配置中，指定X轴的日期显示格式，并将后端传递的日期字符串转为Date对象：

$.getJSON("your_data_api.php", function(rawData) {
    const chart = new CanvasJS.Chart("chartContainer", {
        axisX: {
            title: "日期",
            // 设置X轴日期显示格式
            valueFormatString: "YYYY-MM-DD",
            labelAngle: -45 // 倾斜标签避免重叠
        },
        axisY: {
            title: "贷款余额"
        },
        data: [{
            type: "column",
            dataPoints: rawData.map(item => {
                // 将日期字符串转为Date对象，让CanvasJS正确识别
                return {
                    x: new Date(item.x),
                    y: item.y
                };
            })
        }]
    });
    chart.render();
});

排查要点 #

• 确认数据库日期格式能被strtotime解析，若为非标准格式（如dd/mm/yyyy），需先手动转换为yyyy-mm-dd。
• 检查网络请求返回的JSON数据，确保日期字符串无格式错误。
• CanvasJS支持多种日期格式化规则，可根据需求修改valueFormatString（如MMM DD, YYYY显示"Jan 01, 2024"）。

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