Использование массива дат в качестве наборов данных с AngularJS и ChartJS - PullRequest
Новая
       8

Использование массива дат в качестве наборов данных с AngularJS и ChartJS

0 голосов
/ 21 сентября 2018

У меня есть массив посетителей для события. 

[{
  date: '2018-09-21T10:30:000',
  registered: {
    vip: 12,
    standard: 5
  },
  waitlisted: {
    vip: 0,
    standard: 1
  }
},
{...},
...]

Я использую ChartJS для отображения данных, и мне нужно составить линейный график, чтобы показать количество посетителей, которые зарегистрировались по дате.Другими словами, если 5 человек зарегистрировались 19 сентября, мне нужно иметь точку данных в x = 19 сентября, y = 5.

Этот массив поступает из базы данных и постоянно обновляется, поэтомуУ меня нет прямого доступа к нему, кроме моего вызова API.Мне удалось получить массив только дат и отсортировать их, но я не могу получить правильные данные для создания графика, для которого я снимаю.Код ChartJS выглядит примерно так: 

this.lineChart = new Chart(lineCtx, {
  type: 'line',
  responsive: true,
  data: {
    labels: dateRange,
    datasets: [{ data: dateRange }]
  },
  options: {
    scales: {
      yAxes: [{
        id: 'y-axis-1',
        type: 'linear'
      }],
      xAxes: [{
        type: 'time',
        time: {
          minUnit: 'day',
          unit: 'day',
          unitStepSize: 1,
          min: this.minDate,
          max: this.maxDate
        },
        stacked: true
      }],
      legend: { display: false }
    },
    tooltips: { mode: 'nearest' }
  }
});

HTML-код достаточно прост и не учитывает эту проблему, но если кому-то понадобится помощь с таким кодом, я включу его. 

...
<div [hidden]="!lineChart" class="graph-container">
  <canvas id="line-canvas"> {{ lineChart }} </canvas>
</div>
...

Мне кажется, что это простая проблема, но я не могу обернуться вокруг нее.

ОБНОВЛЕНИЕ:

Я обновилструктура данных, возвращаемых API.Все еще не уверен, как заставить этот график работать правильно!

...