如何解决Chart.js 3折线图正负值交替填充时出现异常扭曲的问题

解决方法 #

该填充扭曲是Chart.js 3默认未开启跨基准线插值计算导致的，按以下步骤调整配置即可实现预期效果：

1. 核心配置调整

• 折线数据集的fill属性设置为'origin'，指定填充基准固定为Y轴0值线
• 新增interpolate: true配置，开启折线穿过0值线时的交叉点插值计算，避免填充区域错位
• 可分别配置正负填充区域的样式，以下为完整可参考配置：

const lineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
    datasets: [{
      label: '业务数据',
      data: [15, -7, 9, -4, 18, -9],
      borderColor: '#36A2EB',
      // 核心填充相关配置
      fill: 'origin',
      interpolate: true,
      // 分别设置正负区域填充色，可按需调整
      backgroundColor: (context) => {
        const chart = context.chart;
        const {ctx, chartArea} = chart;
        if (!chartArea) return null;
        const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
        gradient.addColorStop(0, 'rgba(255, 99, 132, 0.2)'); // 负值区域填充色
        gradient.addColorStop(0.5, 'rgba(255, 99, 132, 0)');
        gradient.addColorStop(0.5, 'rgba(54, 162, 235, 0)');
        gradient.addColorStop(1, 'rgba(54, 162, 235, 0.2)'); // 正值区域填充色
        return gradient;
      }
    }]
  },
  options: {
    scales: {
      y: {
        // 确保0值线在图表可视范围内，可根据实际数据调整上下限
        min: -15,
        max: 25
      }
    }
  }
})

2. 异常排查
   如果调整后仍有偏移，检查是否配置了过高的lineTension（曲线平滑度），当数值大于0.4时部分场景会出现填充错位，调低到0.2以下即可。

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