ng2-charts - гистограмма, отображающая только один цвет

Question

В своем приложении Angular я использую ng2-диаграммы и пытаюсь создать гистограмму.Следующий стек отлично работает, я следую за ним: https://stackblitz.com/edit/ng2-charts-bar-template Однако в моем приложении я получаю данные из службы и заполняю набор данных для диаграммы.Это работает, однако с двумя проблемами.

1. Показывает только один цвет, серый.

2. Для каждого бара, он принимает первое значение датыдля метки, т. е. апрель-2019, тогда как для метки: свойство предоставляются все соответствующие значения.

Пробные заполненные значения в виде простых объектов javascript или типизированных объектов, например Label и ChartDataSets, результат один и тот же.

Техническая информация :

Angular CLI: 8.0.4, Node: 11.12.0, ОС: win32 x64, Angular: 8.0.2, ng2-charts @2.3.0, chart.js@2.8.0

public barChartData: ChartDataSets[] = [];
public barChartLabels: Label[] = [];

resultItemsReport.forEach(element => {
   this.barChartData.push({ data: [element.itemQuantity], label: element.itemName 
  });
});
this.barChartLabels.push('Apr-2019');

<canvas baseChart
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [plugins]="barChartPlugins"
    [legend]="barChartLegend"
    [chartType]="barChartType" [colors]="barChartColors">
</canvas>

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

Вот данные, используемые на графике:

Вот как отображается диаграмма:

Answer 1

Удалите цвета, введенные в ваш шаблон, чтобы автоматически генерировать цвета. Если у вас есть ввод [colors], убедитесь, что свойство input содержит предпочтительные цвета.

Выбор данных зависит от того, как вы структурировали свои данные. Это также зависит от того, как вы хотите представить и сгруппировать свои данные. Например, как вы поделились:

public barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public barChartData: ChartDataSets[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
  ];

Я считаю, что структура ваших данных должна быть одинаковой.