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

Posted 2023-05-07

【中文标题】为 Angular rangeArea 图表系列项目颜色设置 Kendo

【英文标题】：Setting Kendo for Angular rangeArea chart series item color

【发布时间】：2021-12-05 10:44:00

【问题描述】：

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

【参考方案1】：

解决办法是稍微调整一下代码。

*ngFor="let item of weatherData; index as i" [color]="getColor(i) 最后

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

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