Chart.js图表更新时自定义Canvas绘制文本丢失问题求助

问题背景 #

使用Chart.js绘制折线图，通过输入框的oninput事件触发数据计算并更新图表，图表更新功能正常，但Canvas上绘制的自定义文本在每次图表更新后都会被清除。尝试在chart.update()之后调用canvas.fillText()绘制文本，没有效果。

解决方案 #

核心思路是利用Chart.js的**afterDraw生命周期钩子**，该钩子会在图表每次绘制（包括更新、重绘）完成后触发，确保自定义文本在图表绘制完成后再渲染，不会被图表重绘操作清除。

步骤1：定义自定义文本绘制函数 #

在myChart.js中添加一个专门绘制自定义文本的函数，接收Chart实例作为参数，使用Chart自带的上下文对象进行绘制：

function drawCustomText(chart) {
    const ctx = chart.ctx;
    // 设置文本样式，可根据需求调整
    ctx.font = '16px sans-serif';
    ctx.fillStyle = '#2c3e50';
    ctx.textAlign = 'left';
    // 示例：在图表区域左上角绘制文本，可通过chart.chartArea获取图表坐标
    const posX = chart.chartArea.left + 15;
    const posY = chart.chartArea.top + 25;
    ctx.fillText('自定义内容：' + chart.data.datasets[0].data[0], posX, posY);
}

步骤2：配置Chart的生命周期钩子 #

修改图表初始化配置，添加plugins选项，指定afterDraw钩子调用上述绘制函数：

let canvas = document.getElementById('testChart').getContext('2d');

const data = {
    datasets: [{
        // 你的数据集配置
    }, {
        // 你的数据集配置
    }, {
        // 你的数据集配置
    }]
}

const chartOptions = {
    type: 'line',
    data: data,
    options: {
        // 你的原有图表配置（如坐标轴、图例等）
    },
    plugins: {
        afterDraw: (chart) => drawCustomText(chart)
    }
}

let chart = new Chart(canvas, chartOptions);

步骤3：移除无效的手动绘制代码 #

修改someMaths.js中的pushData函数，删除chart.update()之后手动调用fillText()的代码，因为钩子会自动处理文本绘制：

function pushData(newDatasets) {
    let i = 0;

    chart.data.datasets.forEach((dataset) => {
        dataset.data = newDatasets[i];
        i++;
    });
    chart.update();
    // 此处无需再手动调用fillText，afterDraw钩子会自动触发
}

原理说明 #

之前直接在chart.update()后调用fillText()无效的原因是：chart.update()会触发图表的完整重绘流程，包括清除Canvas内容、绘制坐标轴、数据集等操作。如果在update()后立即绘制文本，可能在图表重绘完成前执行，或者被后续的重绘步骤覆盖。而afterDraw钩子是Chart.js生命周期中最后一个绘制阶段，确保文本在图表所有元素绘制完成后再渲染，因此不会被清除，且每次图表更新都会重新绘制文本。

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