如何在Chart.js点击事件中获取YYYYMM格式日期值并弹窗显示

1. 后端（PHP）准备带YYYYMM日期的数据源 #

不管数据来自数据库还是手动生成，要保证每个数据点都包含YYYYMM格式的日期值，转成JSON传给前端：

<?php
// 示例数据，实际按需替换成你的业务数据源
$chartData = [
    ['month' => 'JANUARY', 'value' => 153, 'date' => '202301'],
    ['month' => 'FEBRUARY', 'value' => 210, 'date' => '202302'],
    ['month' => 'MARCH', 'value' => 187, 'date' => '202303']
];
// 输出JSON格式数据给前端调用
echo json_encode($chartData);
?>

2. 前端Chart.js配置点击事件 #

先把后端传来的数据拆分为图表所需的标签、数值、日期数组，再通过onClick事件捕获点击的柱子，取出对应日期展示。

场景一：弹窗同时显示月份、数值和YYYYMM日期 #

// 假设已通过AJAX获取到PHP返回的chartData（硬编码数据直接定义数组即可）
const chartData = /* 此处填入从PHP获取的JSON数据 */;

// 拆分数据为图表可用格式
const monthLabels = chartData.map(item => item.month);
const dataValues = chartData.map(item => item.value);
const yymmDates = chartData.map(item => item.date);

// 初始化柱状图
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: monthLabels,
        datasets: [{
            label: '月度数据',
            data: dataValues,
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        onClick: function(e) {
            // 获取点击的柱子对应的索引
            const activePoints = this.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
            if (activePoints.length === 0) return;
            
            const idx = activePoints[0].index;
            // 弹窗展示全部信息
            alert(`月份：${monthLabels[idx]}\n数值：${dataValues[idx]}\n日期：${yymmDates[idx]}`);
        },
        scales: {
            y: { beginAtZero: true }
        }
    }
});

场景二：弹窗仅显示YYYYMM日期 #

只需修改onClick中的弹窗内容，其余代码不变：

onClick: function(e) {
    const activePoints = this.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
    if (activePoints.length === 0) return;
    
    const idx = activePoints[0].index;
    alert(`日期：${yymmDates[idx]}`);
}

如果你的数据是直接写在前端而非从PHP获取，直接在前端定义包含date字段的chartData数组即可，逻辑完全一致。

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