Laravel项目中Chart.js鼠标悬停显示旧数据问题求助

问题描述 #

在Laravel项目中使用Chart.js创建折线图，搭配3个按钮切换月/周/日维度的用户数据。点击按钮时更新了图表的labels和datasets.data，但鼠标悬停图表时仍会显示旧数据。

问题演示：

问题代码 #

var ctx = document.getElementById("chartBig1").getContext('2d');

var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);

gradientStroke.addColorStop(1, 'rgba(72,72,176,0.1)');
gradientStroke.addColorStop(0.4, 'rgba(72,72,176,0.0)');
gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors

var config = {
    type: 'line',
    data: {
        labels: @json($userDataMonth['labels']),
        datasets: [{
            label: "Users",
            fill: true,
            backgroundColor: gradientStroke,
            borderColor: '#d346b1',
            borderWidth: 2,
            borderDash: [],
            borderDashOffset: 0.0,
            pointBackgroundColor: '#d346b1',
            pointBorderColor: 'rgba(255,255,255,0)',
            pointHoverBackgroundColor: '#d346b1',
            pointBorderWidth: 20,
            pointHoverRadius: 4,
            pointHoverBorderWidth: 15,
            pointRadius: 4,
            data: @json($userDataMonth['data']),
        }]
    },
    options: gradientChartOptionsConfigurationWithTooltipPurple
};
var myChartData = new Chart(ctx, config);

$("#0").click(function() {
    var data = myChartData.config.data;
    data.datasets[0].data = @json($userDataMonth['data']);
    data.labels = @json($userDataMonth['labels']);
    myChartData.update();
});

$("#1").click(function() {
    var data = myChartData.config.data;
    data.datasets[0].data = @json($userDataWeek['data']);
    data.labels = @json($userDataWeek['labels']);
    myChartData.update();
});

$("#2").click(function() {
    var data = myChartData.config.data;
    data.datasets[0].data = @json($userDataDay['data']);
    data.labels = @json($userDataDay['labels']);
    myChartData.update();
});

修复方案 #

问题出在直接修改了Chart实例的config.data，而Chart.js内部是基于实例自身的data属性维护状态的，修改config不会同步到内部状态，导致tooltip读取旧缓存数据。

修改按钮点击事件的逻辑，直接操作Chart实例的data属性，再调用update()：

// 替换原有的三个点击事件
$("#0").click(function() {
    myChartData.data.labels = @json($userDataMonth['labels']);
    myChartData.data.datasets[0].data = @json($userDataMonth['data']);
    myChartData.update('none'); // 使用'none'动画模式可避免过渡问题，也可留空使用默认动画
});

$("#1").click(function() {
    myChartData.data.labels = @json($userDataWeek['labels']);
    myChartData.data.datasets[0].data = @json($userDataWeek['data']);
    myChartData.update('none');
});

$("#2").click(function() {
    myChartData.data.labels = @json($userDataDay['labels']);
    myChartData.data.datasets[0].data = @json($userDataDay['data']);
    myChartData.update('none');
});

补充方案（彻底重置） #

如果上述方法仍有缓存残留问题，可以尝试先销毁旧图表再重建，确保状态完全重置：

// 示例：按日维度重建图表
$("#2").click(function() {
    // 销毁旧实例
    myChartData.destroy();
    // 重新创建图表
    myChartData = new Chart(ctx, {
        type: 'line',
        data: {
            labels: @json($userDataDay['labels']),
            datasets: [{
                // 复用原有配置项
                label: "Users",
                fill: true,
                backgroundColor: gradientStroke,
                borderColor: '#d346b1',
                borderWidth: 2,
                borderDash: [],
                borderDashOffset: 0.0,
                pointBackgroundColor: '#d346b1',
                pointBorderColor: 'rgba(255,255,255,0)',
                pointHoverBackgroundColor: '#d346b1',
                pointBorderWidth: 20,
                pointHoverRadius: 4,
                pointHoverBorderWidth: 15,
                pointRadius: 4,
                data: @json($userDataDay['data']),
            }]
        },
        options: gradientChartOptionsConfigurationWithTooltipPurple
    });
});

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