设置Angular rangeArea图表系列项目颜色的Kendo

Question

我正在尝试使用[color]="getColor"函数设置rangeArea图表系列项目的颜色，但不起作用。设置硬编码值[color]="'#00FF00'"起作用。我还有其他图表系列项应该用默认颜色着色，这就是为什么我不能使用[seriesColors]="colors"作为<kendo-chart>属性的原因。帮助?

<kendo-chart>
  <kendo-chart-series>
    <kendo-chart-series-item 
      *ngFor="let item of weatherData"
      type="rangeArea" 
      [color]="getColor" // [color]="'#00FF00'" or color='#00FF00' works (colors both series items in the same color though)
      [data]="item"
      fromField="min" 
      toField="max" 
      categoryField="month"
      [opacity]="1"
    ></kendo-chart-series-item>
    // ... other chart series items
  </kendo-chart-series>
</kendo-chart>

export class KpiTimelineChartComponent {

  public colors: string[] = ['#00FF00', '#0000FF'];

  public weatherData = [
    [
      { month: 'January', min: 5, max: 10 },
      { month: 'February', min: 5, max: 10 },
      { month: 'March', min: 5, max: 10 },
      { month: 'April', min: 5, max: 10 },
      { month: 'May', min: 5, max: 10 },
      { month: 'June', min: 5, max: 10 },
      { month: 'July', min: 5, max: 10 },
      { month: 'August', min: 5, max: 10 },
      { month: 'September', min: 5, max: 10 },
      { month: 'October', min: 5, max: 10 },
      { month: 'November', min: 5, max: 10 },
      { month: 'December', min: 5, max: 10 },
    ],
    [
      { month: 'January', min: 15, max: 20 },
      { month: 'February', min: 15, max: 20 },
      { month: 'March', min: 15, max: 20 },
      { month: 'April', min: 15, max: 20 },
      { month: 'May', min: 15, max: 20 },
      { month: 'June', min: 15, max: 20 },
      { month: 'July', min: 15, max: 20 },
      { month: 'August', min: 15, max: 20 },
      { month: 'September', min: 15, max: 20 },
      { month: 'October', min: 15, max: 20 },
      { month: 'November', min: 15, max: 20 },
      { month: 'December', min: 15, max: 20 },
    ],
  ];

  public getColor = (seriesItem): string => {
    const color = this.colors[seriesItem.series.index];
    console.log(color, typeof(color)); // Logs the correct color and type (string)
    return color;
  };
}

Answer 1

解决方案是对代码进行轻微的调整。

1. *ngFor="let item of weatherData; index as i"
2. [color]="getColor(i)和finally
3. ​

public getColor = (index): string => {
  return this.colors[index];
}

然而，我仍然不知道为什么最初的解决方案不起作用。