为数据点设置多色时Chart背景颜色显示异常问题排查

我想给负数数据点设置不同颜色，目前Tooltip显示的颜色是正确的，但图表实际填充的背景颜色不符合预期。试过更新图表、预设颜色数组、为borderColor设置颜色等操作，都没解决，怀疑是Chart.js的bug。

状态说明 #

正数状态 #

折线填充区域为深绿色，所有数据点数值为正

负数状态 #

折线填充区域仍为深绿色（不符合预期，应为蓝色），数据点数值为负

我的代码 #

const paybackChartConfig = {
  type: 'line',
  data: {
      datasets: [{
          data: yData,
          backgroundColor: function (context) {
              const index = context.dataIndex;
              const value = context.dataset.data[index];
              return value < 0 ? 'rgba(54, 162, 235, 1)' : 'rgba(53, 122, 135, 1)';
          },
          borderWidth: 3,
          radius: 0,
          tension: 0.5,
          fill: true,
      }],
      labels: xData,
  },
  options: {
      scales: {
          x: {
              display: false,
              maxTicks: 15,
              grid: {
                  display: false
              },
              title: {
                  display: true,
                  text: 'Year'
              }
          },
          y: {
              display: false,
              maxTicksLimit: 5,
              grid: {
                  display: false
              },
              title: {
                  display: false,
                  text: 'Return'
              }
          }
      },
      plugins: {
          legend: {
              display: false
          },
          tooltip: {
              callbacks: {
                  label: function (context) {
                      let label = context.dataset.label || '';

                      if (label) {
                          label += ': ';
                      }
                      if (context.parsed.y !== null) {
                          label += context.parsed.y + '%';
                      }

                      return label;
                  }
              }
          }
      },
      interaction: {
          intersect: false,
          mode: 'index',
      },
      spanGaps: true,
  },
  plugins: [{
      afterDraw: chart => {
          if (chart.tooltip?._active?.length) {
              let x = chart.tooltip._active[0].element.x;
              let yAxis = chart.scales.y;
              let ctx = chart.ctx;
              ctx.save();
              ctx.beginPath();
              ctx.moveTo(x, yAxis.top);
              ctx.lineTo(x, yAxis.bottom);
              ctx.lineWidth = 1;
              ctx.strokeStyle = 'rgba(0, 0, 0, 0.4)';
              ctx.stroke();
              ctx.restore();
          }
      },
  }],
};

const payBackChart = new Chart(document.getElementById('solarPaybackChart'), paybackChartConfig);

问题原因及解决方案 #

问题核心：你设置的backgroundColor函数只作用于单个数据点的标记颜色，而折线下方的填充区域（fill: true时的背景）会使用统一的颜色，不会根据每个数据点的数值动态切换。以下是两种可行的解决方法：

方法1：基于Y轴零点的渐变填充 #

通过创建线性渐变，以Y轴零点为分界，自动切换正负区域的填充颜色：

backgroundColor: function(context) {
  const chart = context.chart;
  const { ctx, chartArea: { top, bottom } } = chart;
  const yAxis = chart.scales.y;
  const zeroPixelY = yAxis.getPixelForValue(0); // 获取Y=0对应的画布像素位置

  // 创建垂直渐变
  const gradient = ctx.createLinearGradient(0, top, 0, bottom);
  // 正数区域（零点以上）用深绿色
  gradient.addColorStop(0, 'rgba(53, 122, 135, 1)');
  gradient.addColorStop(zeroPixelY / bottom, 'rgba(53, 122, 135, 1)');
  // 负数区域（零点以下）用蓝色
  gradient.addColorStop(zeroPixelY / bottom, 'rgba(54, 162, 235, 1)');
  gradient.addColorStop(1, 'rgba(54, 162, 235, 1)');
  
  return gradient;
},

方法2：拆分正负数据集 #

把原数据拆分为正数和负数两个独立数据集，分别设置颜色，实现区域填充的区分：

data: {
  datasets: [
    // 正数数据集
    {
      data: yData.map(val => val >= 0 ? val : null),
      backgroundColor: 'rgba(53, 122, 135, 1)',
      borderColor: 'rgba(53, 122, 135, 1)',
      borderWidth: 3,
      radius: 0,
      tension: 0.5,
      fill: true,
    },
    // 负数数据集
    {
      data: yData.map(val => val < 0 ? val : null),
      backgroundColor: 'rgba(54, 162, 235, 1)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 3,
      radius: 0,
      tension: 0.5,
      fill: true,
    }
  ],
  labels: xData,
},

补充：同步数据点颜色 #

如果需要数据点也根据正负显示对应颜色，需额外设置pointBackgroundColor和pointBorderColor：

pointBackgroundColor: function(context) {
  const value = context.dataset.data[context.dataIndex];
  return value < 0 ? 'rgba(54, 162, 235, 1)' : 'rgba(53, 122, 135, 1)';
},
pointBorderColor: function(context) {
  const value = context.dataset.data[context.dataIndex];
  return value < 0 ? 'rgba(54, 162, 235, 1)' : 'rgba(53, 122, 135, 1)';
},

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