图表缩放拖动时背景色遮挡Y轴标签，该问题如何解决？

问题根因 #

你在绘制自定义背景时没有限制画布的绘制范围，图表缩放、平移触发重绘时，背景绘制区域超出了图表的实际绘图区，就会覆盖到Y轴标签。

修复步骤 #

• 绘制背景前先保存画布上下文状态，基于chartArea设置裁剪路径，所有绘制操作只会在裁剪区域内生效，不会溢出到坐标轴区域
• 背景绘制完成后恢复上下文状态，避免影响图表其他元素的正常渲染

修改后代码 #

plugins: [{
    id:'customBackground',
    beforeDatasetsDraw: function (chart:any, easing:any) {
        if (chart.chartArea) {
            const ctx = chart.ctx;
            const chartArea = chart.chartArea;
            const d = data.chart.relay;
            const e = chart.getDatasetMeta(0);
            ctx.fillStyle = '#b3ff99';

            // 保存上下文状态，设置绘图裁剪区域
            ctx.save();
            ctx.beginPath();
            ctx.rect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
            ctx.clip();

            let start:number;
            let stop:number;
            for(let i = 0; i<d.length; i++) {
                start = e.data[i].x;
                if (d[i] && d[i+1] === true) {
                    stop = e.data[i+1].x;
                } else {
                    stop = start;
                }
                ctx.fillRect(start, chartArea.top, stop - start, chartArea.bottom - chartArea.top);
            }

            // 恢复上下文状态，解除裁剪限制
            ctx.restore();
        }
    }
}]

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