IgxDoughnutChart 値が 0 のスライスが存在する時にもブラシの配色を固定する方法

Ignite UI for Angular 10.1.9 バージョン時点での情報に基づいています。

IgxDoughnutChart では、brushes コレクションにブラシの配色パターンを指定することができますが、スライスの値が 0 の場合、ブラシの対応色は次のスライスに適用されます。これは、製品の想定される動作となります。

スライスの値が 0 か否かに関わらず、スライスに対応するブラシの色を固定するには、IgxDoughnutChart の brushes プロパティに割り当てるブラシのコレクションから、配色に不要となるブラシ要素(値が 0 のスライスに対応するブラシ要素)を取り除くことで対応することができます。詳しい実装内容は、下記コードスニペットの、setBrushes 関数を参照下さい。

export class AppComponent {
  title = 'igx-doughnut-chart-sample';
  public data: Array<any>;
  public brushes: any;

  constructor() {
    this.data = [
      { Label: 'Administration', Value: 2 },
      { Label: 'Sales', Value: 0 },
      { Label: 'IT', Value: 3 },
      { Label: 'Marketing', Value: 0 },
      { Label: 'Development', Value: 4 },
      { Label: 'Customer Support', Value: 6 }
    ];
    this.brushes = this.setBrushes(this.data);
  }

  private setBrushes(data): any {
    const brushes = ['orange', 'red', 'green', 'blue', 'black', 'purple'];
    for (let i = data.length - 1; i > 0 ; i--) {
      // 値が 0 の場合、ブラシコレクションから色要素を削除する。
      if (data[i].Value === 0) {
        brushes.splice(i, 1);
      }
    }
    return brushes;
  }
}