Chart.js折线图正负值填充颜色异常问题排查

我尝试为折线图中值小于0的区域填充红色，值大于0的区域填充绿色，编写的代码如下：

public lineChartData: ChartConfiguration<'line'>['data'] | undefined;

this.lineChartData = {
      labels: this.arrayData.map(x => x.strike),
      datasets: [
        {
          data: this.arrayData.map(y => y.payoff),
          label: "Option Payoff",
          fill: true,
          tension: 0,
          borderColor: 'rgb(54, 162, 235)',
          //backgroundColor: 'rgba(0,0,255,0.9)',
          backgroundColor: this.arrayData.map(x => x.payoff < 0 ? 'rgb(255,0,0)' : 
          'rgb(0,255,0)'),
          spanGaps: 1
        }
      ]
    }

但图表全部填充为红色。调试发现DOM中，值大于0的数据点对应的backgroundColor已正确设置为rgb(0,255,0)，但图表并未正确显示。

问题原因 #

Chart.js中，backgroundColor传入数组时，默认作用是设置每个数据点的点填充色，而非折线下方整个区域的填充色。折线区域的填充色默认只能是单一值，不会遍历数组取对应颜色，因此会默认取数组第一个颜色（红色）作为整个区域的填充色，导致全部变红。

解决方案 #

要实现正负值区域分色填充，可采用拆分数据集的方式：

this.lineChartData = {
  labels: this.arrayData.map(x => x.strike),
  datasets: [
    // 主折线数据集（仅显示线条，不填充）
    {
      data: this.arrayData.map(y => y.payoff),
      label: "Option Payoff",
      fill: false,
      tension: 0,
      borderColor: 'rgb(54, 162, 235)',
      spanGaps: 1
    },
    // 负值区域填充数据集（仅填充，隐藏线条和点）
    {
      data: this.arrayData.map(y => y.payoff < 0 ? y.payoff : null),
      label: "Negative Payoff",
      fill: true,
      tension: 0,
      borderColor: 'transparent',
      backgroundColor: 'rgba(255,0,0,0.3)',
      pointRadius: 0,
      spanGaps: true
    },
    // 正值区域填充数据集（仅填充，隐藏线条和点）
    {
      data: this.arrayData.map(y => y.payoff > 0 ? y.payoff : null),
      label: "Positive Payoff",
      fill: true,
      tension: 0,
      borderColor: 'transparent',
      backgroundColor: 'rgba(0,255,0,0.3)',
      pointRadius: 0,
      spanGaps: true
    }
  ]
};

原理说明 #

通过创建两个辅助数据集：

1. 负值数据集只保留小于0的数值，其余设为null，开启填充并设置红色背景；
2. 正值数据集只保留大于0的数值，其余设为null，开启填充并设置绿色背景；
3. 主数据集仅显示折线，关闭填充，保证线条完整显示。

这种方式利用Chart.js对null值的处理（跳过无数据点），实现正负区域的分色填充。

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