Попытка разбить данные в баре на 3 периода времени с помощью ChartJS - PullRequest
Новая
       58

Попытка разбить данные в баре на 3 периода времени с помощью ChartJS

0 голосов
/ 01 мая 2020

Я работаю над проектом, использующим диаграммы JS и ng2 Charts в Angular 7. Я извлекаю данные из API и хочу отображать их в виде столбчатой ​​диаграммы с накоплением в течение 3-дневного периода. Прямо сейчас я могу отобразить один столбец со всеми данными, но я хочу разделить его на 3 отдельных столбца с продажами за один день в каждом столбце. Может кто-нибудь сказать мне, как я должен реализовать функцию масштаба времени? Я пытался следовать документации, но когда я ее реализовал, я не смог отобразить данные.

В моем HTML я использую следующее, которое получает данные из нескольких свойств: 

<canvas baseChart
 width="400" height="500"
 [datasets]="productData"
 [labels]="barChartLabels"
 [options]="barChartOptions"
 [plugins]="barChartPlugins"
 [legend]="barChartLegend"
 [chartType]="barChartType">
</canvas>

Это свойство productData, которое содержит все данные, переданные из API: 

productData: ChartDataSets[] = [
  {data: [], label: this.productLabels, stack: 'a'}
];

Это то, что выводится в массив: 

0: Object {
  data: {243},
  label: "Milk",
  stack: "a"

}
1: Object {
  data: {136},
  label: "Bread",
  stack: "a"
}

I ' Мы использовали момент для отображения последних 3 дней в виде меток на оси X графика: 

barChartLabels: Label[] = [
  moment().subtract(3, 'days').format('dd').toString(),
  moment().subtract(2, 'days').format('dd').toString(),
  moment().subtract(1, 'days').format('dd').toString()
];

А вот массив свойств options 

barChartOptions: ChartOptions = {
  responsive: true,
  scales: {
    xAxes: [{
      stacked: true
    }],
    yAxes: [{
      stacked: true
    }]
  }
};
...