Chart.js错误的x轴日期时间?

时间:2018-04-27 08:46:06

标签: chart.js

我有这样的chart.js脚本:

<script>
var ctx = document.getElementById("chart0");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [2018-03-28,2018-03-29,2018-03-30,2018-03-31,2018-04-01,2018-04-02,2018-04-03,2018-04-04,2018-04-05,2018-04-06,2018-04-07,2018-04-08,2018-04-09,2018-04-10,2018-04-11,2018-04-12,2018-04-13,2018-04-14,2018-04-15,2018-04-16,2018-04-17,2018-04-18,2018-04-19,2018-04-20,2018-04-21,2018-04-22,2018-04-23,2018-04-24,2018-04-25,2018-04-26,2018-04-27],
        datasets: [{
            label: 'Impressions',
            data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,19,0],
            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
        }]
    },
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    min: '2018-03-28',
                    max: '2018-04-27'
                }
            }]
        }
    }
});
</script>

但显示错误的xasis的显示图表如下图所示:

图表显示错误的日期时间

请帮我解决这个问题。这是我第一次使用chart.js

万分感谢!

1 个答案:

答案 0 :(得分:0)

像这样修改数据集:

datasets: [{
    label: 'Impressions',
      data: [
            {
             x: new Date('2018-03-28'),
             y: 0
            }, {
             x: new Date('2018-03-29'),
             y: 0
            },
            {
             x: new Date('2018-03-30'),
             y: 0
            }
        ...

'选项'应该是:

options: {
   scales: {
      xAxes: [{
          type: 'time'
      }]
    }
}