如何设置图表系列颜色答案

【问题标题】：How to set chart series color如何设置图表系列颜色
【发布时间】：2020-12-17 15:50:50
【问题描述】：

如何设置图表系列颜色？

我要设置饼图项的颜色

<kendo-chart-series-item
    type="pie"
    [data]="source"
    field="value"
    [color]="color" // it doesn't work
    categoryField="name" >

【问题讨论】：

标签： json angular pie-chart kendo-ui-angular2 kendo-chart

【解决方案1】：

您需要将其添加到您的数据中，然后在 <kendo-chart-series-item> 中添加一个 colorField="colorField"，如下所示：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart [style.height.px]="200">
      <kendo-chart-series>
        <kendo-chart-series-item
          [autoFit]="autofit"
            type="pie" [data]="data"
            categoryField="kind" field="share"
            colorField="colorField"
            >
          <kendo-chart-series-item-labels
            position="outsideEnd"
            color="#000"
            [content]="labelContent">
          </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-legend [visible]="false"></kendo-chart-legend>
    </kendo-chart>
    <label>
      <input type="checkbox" [(ngModel)]="autofit" />
      <span>Toggle Autofit</span>
    </label>
  `
})
export class AppComponent {
  public autofit = true;
  public data: any[] = [{
    kind: 'Solar', share: 0.052, colorField:"red"
  }, {
    kind: 'Wind', share: 0.225, colorField:"#000"
  }, {
    kind: 'Other', share: 0.192, colorField:"blue"
  }, {
    kind: 'Hydroelectric', share: 0.175, colorField:"yellow"
  }, {
    kind: 'Nuclear', share: 0.238, colorField:"orange"
  }, {
    kind: 'Coal', share: 0.118, colorField:"green"
  }];

  public labelContent(e: any): string {
    return e.category;
  }
}

此示例基于 Kendo UI 演示 stackblitz。

【讨论】：