Chart.js数据集填充配置异常：指定填充规则未生效

需求说明：

• 现有三个数据集：Lower Estimate、Projected、Upper Estimate，三者的isProjected属性值均为1
• Lower Estimate需设置fill: '+1'，Upper Estimate需设置fill: '-1'，二者背景色统一为rgba(252, 0, 47, 0.2)
• Projected数据集不填充，需设置fill: false
  当前问题：现有代码会将三个数据集全部填充，无法实现预期效果

buildChartConfig配置代码 #

buildChartConfig(data: DataConfig): ChartConfiguration {
    
    const newData: ChartData = {
      ...data,
      datasets: data.datasets.map((value, i, array) => {
        const isProjected = (dataset: DatasetConfig) => dataset.isProjected;

        const result = {
          ...datasetDefaults(value, i, this.colorType),
          ...value,
          ...(isProjected(value) && {
            fill:
              isProjected(value) && i === array.findIndex(isProjected)
                ? '+1'
                : '-1',
            backgroundColor: 'rgba(252, 0, 47, 0.2)',
          }),
        };
      
        return result;
      }),
    } as ChartData;

datasetDefaults默认配置代码 #

export const datasetDefaults = (
  value: any,
  index: number,
  colorType?: ColorType | string
): ChartDataset => {
  const color = [
    '#bd081b',
    '#6C0510',
    '#CCCCCC',
    'rgba(252, 0, 47, 0.2)', //lower estimate
    '#FC002F',               //projected
    'rgba(252, 0, 47, 0.2)', //upper estimate
  ];
  const newIndex = index % color.length;
  const isProjected = value.isProjected || false;
  switch (colorType) {
    case ColorType.POINT:
      return {
        label: '',
        data: [] as Array<number | ScatterDataPoint | BubbleDataPoint>,
        backgroundColor: color,
        borderColor: color,
        fill: true,
      };
    case ColorType.SERIES:
    default:
      return {
        label: '',
        data: [] as Array<number | ScatterDataPoint | BubbleDataPoint>,
        backgroundColor: color[newIndex],
        borderColor: color[newIndex],
        fill: false,
      };
  }

设置isProjected属性的代码 #

[
                  ...datasets,
                  {
                    label: dataPoint[legendField].toString(),
                    data: addToData(
                      newLabels.indexOf(dataPoint[dimField].toString()),
                      dataPoint[valueField]
                    ),
                    tooltips: addToTooltip(
                      newLabels.indexOf(dataPoint[dimField].toString()),
                      newToolTip,
                      dataPoint
                    ),
                    isProjected: dataPoint?.isProjected === 1,
                  },
                ];

问题分析与修复方案 #

核心问题

当前代码仅通过isProjected和数组索引判断填充规则，没有区分Projected数据集本身不需要填充的需求；同时array.findIndex(isProjected)只会返回第一个符合条件的索引，导致所有后续isProjected为true的数据集都被设为-1，完全忽略了Projected数据集的特殊配置。

修复代码

修改buildChartConfig中的逻辑，基于数据集标签区分三种类型，设置对应填充规则：

buildChartConfig(data: DataConfig): ChartConfiguration {
    
    const newData: ChartData = {
      ...data,
      datasets: data.datasets.map((value) => {
        // 基于标签判断数据集类型
        const isLower = value.label === 'Lower Estimate';
        const isUpper = value.label === 'Upper Estimate';
        const isProj = value.label === 'Projected';

        let fillSettings = {};
        if (value.isProjected) {
          if (isLower) {
            fillSettings = { fill: '+1', backgroundColor: 'rgba(252, 0, 47, 0.2)' };
          } else if (isUpper) {
            fillSettings = { fill: '-1', backgroundColor: 'rgba(252, 0, 47, 0.2)' };
          } else if (isProj) {
            fillSettings = { fill: false };
          }
        }

        const result = {
          ...datasetDefaults(value, i, this.colorType),
          ...value,
          ...fillSettings,
        };
      
        return result;
      }),
    } as ChartData;

额外优化（可选）

如果标签可能发生变动，可以在设置isProjected时增加类型标识字段，避免依赖字符串判断：

[
                  ...datasets,
                  {
                    label: dataPoint[legendField].toString(),
                    data: addToData(
                      newLabels.indexOf(dataPoint[dimField].toString()),
                      dataPoint[valueField]
                    ),
                    tooltips: addToTooltip(
                      newLabels.indexOf(dataPoint[dimField].toString()),
                      newToolTip,
                      dataPoint
                    ),
                    isProjected: dataPoint?.isProjected === 1,
                    // 新增类型标识
                    datasetType: dataPoint[legendField].toString() as 'Lower Estimate' | 'Projected' | 'Upper Estimate',
                  },
                ];

之后在buildChartConfig中用value.datasetType判断，逻辑会更稳定。

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