如何限制Chart.js缩放区域在坐标轴内，避免绘图内容越界？

我在Chart.js的chartArea内使用缩放功能（基于chartjs-plugin-zoom v2.0.0），缩放后发现绘图元素（包括自定义绘制的黄色区域和图表数据点）会越过Y轴左侧，超出了坐标轴的限定范围。

相关代码 #

var arbitraryLine = {    
    id: 'arbitraryLine',
    beforeDraw(chart, args, options) {
        const ctx = chart.canvas.getContext('2d');
        var { chartArea: {top, right, bottom, left, width, height}, scales: {x, y} } = chart;
        ctx.save();
        
        ctx.fillStyle = 'yellow';
        ctx.fillRect(x.getPixelForValue(0), top, width, height);
        ctx.restore();
    }
}

const plugin = {          // 白色背景插件
    id: 'custom_canvas_background_color',
    beforeDraw: (chart) => {
        const ctx = chart.canvas.getContext('2d');
        ctx.save();
        ctx.globalCompositeOperation = 'destination-over';
        ctx.fillStyle = 'White';
        ctx.fillRect(0, 0, chart.width, chart.height);
        ctx.restore();
    }
};

var config = {
    type: 'line',
    data: data,                    
    options: {
      plugins: {
        legend: {
            labels: {
                font: {
                    size: 24,
                }
            }
        },
        zoom: {
          zoom: {                        
            wheel: {
              enabled: true,
              mode: 'xy'
            },
            pinch: {
              enabled: true,
              mode: 'xy'
            },
            drag: {
              enabled: true,
              mode: 'y'
            },
            speed: 0.10,
            threshold: 10,
            sensitivity: 3,                        
          },
          pan: {
            enabled: true,
            mode: 'xy'
          },
          limits: {
            y: {minRange: 200, min: 0, max: 1000},
            x: {minRange: 50, min: 0, max: xdata.length}
          }
        },
      },
    maintainAspectRatio: false,                                      
    scales: {                                 
        x: {
            title: {
                display: true,
                text: 'X',
                font: {
                  size: 24,
                }
            },
            ticks: {
                maxTicksLimit: xdata.length,
                callback: function(val, index) {
                rounding = Math.round(this.getLabelForValue(val)*100)/100;
                if(index == 0)
                  return (index) % valtest === 0 ? rounding.toFixed(1) : undefined;
                else
                  return (index + 1) % valtest === 0 ? rounding.toFixed(1) : undefined;
                },
                maxRotation: 90,                
                font: {
                  size: 24,
                }
            },              
        },                                       
        y: {
            title: {
                display: true,
                text: 'Y',
                font: {
                  size: 24,
                }
            },                        
            max: 1000,
            min:0,
            ticks: {
                callback: function(value) {
                  return Math.floor(value);
                },
                stepSize: 100,
                font: {
                  size: 24,
                }
            },
            beginAtZero: true
        },               
    },                
    },
    plugins: [plugin, arbitraryLine],
};

效果说明 #

• 缩放前：图表绘图区域正常，黄色背景在坐标轴范围内
• 缩放后：自定义绘制的黄色区域和数据点越过Y轴左侧，超出了坐标轴限定范围

1. 修正自定义绘制区域的边界限制 #

问题核心在于arbitraryLine插件的fillRect调用：你使用x.getPixelForValue(0)作为起始X坐标，但缩放后该值可能小于chartArea的left（Y轴左侧的像素位置），导致绘制区域越界。修改如下：

var arbitraryLine = {    
    id: 'arbitraryLine',
    beforeDraw(chart, args, options) {
        const ctx = chart.canvas.getContext('2d');
        var { chartArea: {top, right, bottom, left, height}, scales: {x} } = chart;
        ctx.save();
        
        // 取chartArea的left和x=0的像素位置的最大值，确保不越过Y轴左侧
        const startX = Math.max(left, x.getPixelForValue(0));
        // 计算实际绘制宽度，避免超出chartArea右侧
        const drawWidth = right - startX;
        
        ctx.fillStyle = 'yellow';
        ctx.fillRect(startX, top, drawWidth, height);
        ctx.restore();
    }
}

2. 确保图表数据点不越界 #

默认情况下Chart.js数据点不会超出坐标轴范围，若仍有问题，检查两点：

• 确认zoom.limits配置生效：你的X轴min:0已经限制缩放范围不能低于0，确保插件不会允许X轴范围突破该值
• 检查X轴类型：如果是类别轴，确保xdata索引无负数；如果是线性轴，min:0已限定范围

3. 额外优化：裁剪绘图上下文 #

若需要更严格的边界控制，可在绘制前用ctx.clip()将绘图范围裁剪到chartArea内：

var arbitraryLine = {    
    id: 'arbitraryLine',
    beforeDraw(chart, args, options) {
        const ctx = chart.canvas.getContext('2d');
        var { chartArea: {top, right, bottom, left, width, height}, scales: {x} } = chart;
        ctx.save();
        
        // 裁剪到chartArea区域，所有绘制操作都会被限制在该范围内
        ctx.beginPath();
        ctx.rect(left, top, width, height);
        ctx.clip();
        
        ctx.fillStyle = 'yellow';
        ctx.fillRect(x.getPixelForValue(0), top, width, height);
        ctx.restore();
    }
}

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