如何使用Chart.js创建甘特图并填充日期？

Question

我正在尝试使用Chart.js创建甘特图。我使用horizontalBar图表类型，如果我填充数字而不是日期，它可以很好地工作，但当我将日期作为数据传递时，它不会呈现。

数据结构:任务、开始日期、结束日期

this.chartData = {
  labels: ['Task 1', 'Task 2'],
  datasets: [{
    data: ['2019-01-20', '2019-01-30'],
  }],
};

this.options = {
  title: {
    display: true,
    text: 'Title of Chart',
  },
  legend: {display: false},
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        unit: 'day',
      },
    }],
  },
};

模板：

<chart class="chart" type="horizontalBar" [data]="chartData" [options]="options"></chart>

Tried another example

Answer 1

您正在将值作为字符串进行传递。尝试作为日期传递：

datasets: [{
      label: 'Demo',
      data: [{
          t: new Date("2015-3-15 13:3"),
          y: 12
        },