如何为Kendo for Angular rangeArea图表系列项动态设置自定义颜色

问题根因 #

你当前直接将回调函数绑定到[color]属性的写法不符合Kendo for Angular图表的参数要求，该属性默认接收字符串类型的颜色值，回调函数仅在特定自定义渲染场景下生效。

最优实现方案 #

利用*ngFor的内置索引直接绑定对应颜色，无需使用回调函数，完全满足你不修改全局颜色、仅给当前循环的rangeArea系列设置不同颜色的需求。

修改后的模板代码 #

<kendo-chart>
  <kendo-chart-series>
    <kendo-chart-series-item 
      *ngFor="let item of weatherData; let seriesIndex = index"
      type="rangeArea" 
      [color]="colors[seriesIndex] ?? '#cccccc'" <!-- 增加兜底避免数组越界 -->
      [data]="item"
      fromField="min" 
      toField="max" 
      categoryField="month"
      [opacity]="1"
    ></kendo-chart-series-item>
    <!-- 其他图表系列项保持不变，仍使用默认颜色 -->
  </kendo-chart-series>
</kendo-chart>

组件侧代码无需做任何调整，你原有定义的colors数组、weatherData数组都可以直接沿用。修改后第一个rangeArea系列会使用#00FF00，第二个使用#0000FF，其余未显式设置color的系列仍沿用图表默认颜色，完全匹配需求。

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