条形图不显示条形图+图表js

时间:2019-07-03 12:04:40

标签: chart.js

我正在尝试使用x和y轴均为时间单位的数据集构建条形图。但是我无法在图表上显示条形图。有人可以检查一下并协助我做错了什么。

这是完整的代码。 https://jsfiddle.net/sjabiulla/bkqpdjue/4/

这是我的js。

    var chartData = {
            datasets: [ {
                type: 'bar',
                label: 'Last Year',
                backgroundColor: 'yellow',
                borderColor: 'white',
                fill:true,
                data: [
                    { x: '2017-01-06 00:00:00', y: '2017-01-06 04:15:30' },
    { x: '2017-01-07 00:00:00', y: '2017-01-06 07:39:30' },
    { x: '2017-01-08 00:00:00', y: '2017-01-06 06:39:30' },
    { x: '2017-01-09 00:00:00', y: '2017-01-06 08:00:30' },
    { x: '2017-01-10 00:00:00', y: '2017-01-06 05:39:30' },
    { x: '2017-01-11 00:00:00', y: '2017-01-06 09:39:30' },
                ]
            }]

        };
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'bar',
                data: chartData,
                options: {
                  scales: {
            xAxes: [{
              type: 'time',
               time: {
                 unit:'day'
                }
            }],
            yAxes: [{
              type: 'time',
               time: {
                 unit:'hour'
                },
                ticks : {
                  reverse: true
                }
            }]
        }
                }
});

chart.canvas.parentNode.style.height = '380px';
chart.canvas.parentNode.style.width = '700px';

0 个答案:

没有答案