Question

我有很多参加活动的参与者。

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

我正在使用ChartJS来显示数据，并且需要制作一个折线图以显示按日期注册的与会者人数。换句话说，如果9月19日有5个人注册，我需要在x = 9月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返回的数据的结构。仍然不确定如何使此图表正常工作！

通过AngularJS和ChartJS将日期数组用作数据集

0 个答案: