0

我正在尝试使用[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;
  };
}
4

1 回答 1

1

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

  1. *ngFor="let item of weatherData; index as i"
  2. [color]="getColor(i)最后
public getColor = (index): string => {
  return this.colors[index];
}

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

于 2021-10-18T11:35:18.323 回答