Chart.js 4：开启beginAtZero:true时线性渐变未适配数据最低值

使用Chart.js官方线性渐变示例时，设置beginAtZero: false时渐变显示正常；但开启beginAtZero: true后，渐变会从图表底部（无数据的0值区域）开始，没有适配数据的最低值位置。尝试通过chart.getDatasetMeta(0).data获取数据点位置来计算渐变范围，但调用相关方法时无法获取到有效位置。

问题根源在于渐变创建时机过早，此时图表还未完成布局计算，无法拿到数据点的实际像素位置；同时开启beginAtZero后，y轴起点固定为0，导致渐变默认从0位置开始。

可以通过以下步骤修改：

• 将渐变创建逻辑移到Chart.js的beforeDraw钩子中，确保能获取到已计算完成的y轴刻度映射
• 利用y轴的getPixelForValue()方法，把数据的最小、最大值转换为画布像素坐标，以此作为渐变的起止点

修改后的代码示例 #

const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: 'Sales',
      data: [15, 20, 18, 25, 22, 30],
      borderColor: '#36a2eb',
      fill: true
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    },
    plugins: {
      beforeDraw: function(chart) {
        const ctx = chart.ctx;
        const dataset = chart.data.datasets[0];
        const yAxis = chart.scales.y;

        // 获取数据集的最小、最大值
        const dataMin = Math.min(...dataset.data);
        const dataMax = Math.max(...dataset.data);

        // 将数据值转换为画布上的像素坐标
        const topPixel = yAxis.getPixelForValue(dataMax);
        const bottomPixel = yAxis.getPixelForValue(dataMin);

        // 创建适配数据范围的线性渐变
        const gradient = ctx.createLinearGradient(0, topPixel, 0, bottomPixel);
        gradient.addColorStop(0, 'rgba(54, 162, 235, 0.2)');
        gradient.addColorStop(1, 'rgba(54, 162, 235, 0)');

        // 将渐变赋值给数据集的背景色
        dataset.backgroundColor = gradient;
      }
    }
  }
});

说明 #

• beforeDraw钩子在每次图表绘制前触发，此时图表已完成刻度计算，getPixelForValue能精准将数据值映射为画布像素位置
• 无论beginAtZero是否开启，渐变都会严格贴合数据的最小、最大值范围，不会延伸到无数据的区域
• 如果图表有数据更新或动画，该逻辑会自动重新计算渐变，保证显示效果始终正确

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