Изменить цвет наборов данных полярной области в угловых

Question

Я создаю приложение для приборной панели в Angular 6, и пока все хорошо.У меня есть раздел метрик, где я использую ng2-диаграммы для использования Chart.js.

Я могу с легкостью изменить любой параметр моих линейных, столбчатых и кольцевых диаграмм, но когда я пытаюсь изменить цвет длямоя диаграмма полярной области, я просто не могу сделать это правильно.

Ради примера, я нажал отрывок в моем компоненте полярной области HTML:

    <canvas baseChart [data]="polarAreaChartData" [labels]="polarAreaChartLabels" [legend]="polarAreaLegend" [chartType]="polarAreaChartType" [options]="polarAreaChartOptions" [colors]="polarAreaChartColors"></canvas>

У меня также есть этов моей машинописи:

  public polarAreaChartType = 'polarArea';
  // Number of occurences
  public polarAreaChartData: number[] = [
    98, 82, 45, 12, 9
  ];
  // Reasons
  public polarAreaChartLabels: string[] = [
    'Reason A',
    'Reason B',
    'Reason C',
    'Reason D',
    'Reason E'
  ];
  public polarAreaChartOptions: any = {
    responsive: true,
    legend: {
      display: false
    }
  };
  public polarAreaChartColors: Array<any> = [
  ];

Когда я пытаюсь передать цвета в polarAreaChartColors , он передает только один цвет для всех наборов данных.Я хочу передать один цвет для каждого набора данных.Я сделал это в моей таблице пончиков, используя что-то вроде этого:

  public doughtnutChartColors: Array<any> = [
    {
      backgroundColor: [
        '#2e67bf',
        '#7f8fa4',
        '#bebebe'
      ]
    }
  ];

И это работает.Как я могу сделать что-то похожее на диаграмме полярной области?Спасибо.

Answer 1

Я думаю, что нашел ответ.

Допустим, я хочу представить 2 набора данных (только для примера).

  public polarAreaChartData: number[] = [
    98, 82
  ];
  // Reasons
  public polarAreaChartLabels: string[] = [
    'Reason A',
    'Reason B'
  ];
  public polarAreaChartOptions: any = {
    responsive: true,
    legend: {
      display: false
    }
  };
  public polarAreaChartColors: Array<any> = [
    {
      backgroundColor: [
        '#2e67bf',
        '#7f8fa4'
      ],
    }
  ];

Очевидно, я добавил менее 5 цветов,и это вызывало проблему, так как у меня было 5 значений и 5 меток.Когда я проверил с 2 + 2 + 2 (значение, метка + опции), цвета изменились.

Я проверю более длинный набор данных, но я думаю, что это была моя ошибка.Все равно спасибо:)