Chart.js使用日期创建折线图

我似乎无法让Chart.js使用日期.我尝试了很多不同的方法:

let examChart = document.getElementById("examChart").getContext("2d");
let examLineChart = new Chart(examChart, {
    type: "line",
    data: [
            { t: new Date("2015-3-15 13:3"), y: 12 },
            { t: new Date("2015-3-25 13:2"), y: 21 },
            { t: new Date("2015-4-25 14:12"), y: 32 }
    ],
    options: {
        label: "placeholder"
    }
});

和:

let examChart = document.getElementById("examChart").getContext("2d");
let examLineChart = new Chart(examChart, {
    type: "line",
    data: [
            { t: "2015-3-15 13:3", y: 12 },
            { t: "2015-3-25 13:2", y: 21 },
            { t: "2015-4-25 14:12", y: 32 }
    ],
    options: {
        label: "placeholder"    
    }
});

和:

let examChart = document.getElementById("examChart").getContext("2d");
let examLineChart = new Chart(examChart, {
    type: "line",
    data: [
            { t: "Sun Mar 15 2015 12:03:45 GMT+0000 (GMT Standard Time)", y: 12 },
            { t: "Wed Mar 25 2015 12:02:15 GMT+0000 (GMT Standard Time)", y: 21 },
            { t: "Sat Apr 25 2015 13:12:30 GMT+0100 (GMT Daylight Time)", y: 32 }
    ],
    options: {
        label: "placeholder"    
    }
});

为了涵盖我的一些尝试,即使在阅读文档后我也似乎无法正确设置日期(http://www.chartjs.org/docs/latest/axes/cartesian/time.html) (他们实际上没有给出一个例子)

正在使用的HTML:

我只是不知道,虽然我认为这是一个相当简单的问题,任何帮助将不胜感激.

您必须在a内移动数据dataset.如果您查看使用手册,datasets则使用数组.时间文档中数据集的"提示"也不那么明显(参见标题).

请参阅下面的代码:

我刚刚复制了基本用法示例并插入了您第一次尝试的数据(+添加了几个标签)

var ctx = document.getElementById("examChart").getContext("2d");

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [new Date("2015-3-15 13:3").toLocaleString(), new Date("2015-3-25 13:2").toLocaleString(), new Date("2015-4-25 14:12").toLocaleString()],
    datasets: [{
      label: 'Demo',
      data: [{
          t: new Date("2015-3-15 13:3"),
          y: 12
        },
        {
          t: new Date("2015-3-25 13:2"),
          y: 21
        },
        {
          t: new Date("2015-4-25 14:12"),
          y: 32
        }
      ],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  }
});