图表JS-horizo​​ntalBar与x轴的时间堆叠在一起

Question

我正在尝试使用chartJS创建在x轴上具有时间单位的水平条形图：

The chart that I want to create

为解决此问题，我尝试遵循horizo​​ntalBar图表的相同心态来获取简单的整数点。我不确定这种思维方式是否可以纳入时间单位。 我当前的代码：

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

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["Data Set 1"],
        datasets: [{
            label: "First data",
            borderColor: '#000',
            borderWidth: 1,
            fill: false,
            backgroundColor: '#F5F5F5',
            hoverBackgroundColor: '#F5F5F5',
            data: [{
                x: moment("20.03.2018", "DD-MM-YYYY").add(1, 'days'),
                y: 0
            }]
        }, {
            label: "Second Data",
            borderColor: '#000',
            borderWidth: 1,
            fill: false,
            backgroundColor: '#000',
            hoverBackgroundColor: '#000',
            data: [{
                x: moment("20.03.2018", "DD-MM-YYYY").add(2, 'days'),
                y: 25
            }]
        }]
    },
    options: {
        animation: {
            easing: "easeOutQuart"
        },
        legend: {
            position: "bottom",
            display: true
        },
        scales: {
            yAxes: [{
                ticks: {
                    fontColor: "#CCC",
                    fontStyle: "bold",
                    beginAtZero: true,
                    padding: 15,
                    //display: false - remove this and commenting to display: false
                },
                gridLines: {
                    drawTicks: false,
                    display: true,
                    color: "#CCC",
                    zeroLineColor: "transparent"
                },
                stacked: true
            }],
            xAxes: [{
                gridLines: {
                    drawTicks: false,
                    display: true,
                    color: '#CCC'
                },
                ticks: {
                    padding: 15,
                    beginAtZero: true,
                    fontColor: "#CCC",
                    fontStyle: "bold",
                    source: 'data',
maxTicksLimit: 20,
                    min: moment("20.03.2018", "DD-MM-YYYY"),
                    max: moment("20.03.2018", "DD-MM-YYYY").add(2, 'days')
                    //display: false - remove this and commenting to display: false
                },
                type: "time",
                distribution: 'linear',
                time: {
                    unit: 'hour',
                    unitStepSize: 0.5,
                    round: 'hour',
                    tooltipFormat: 'h:mm:ss a',
                    displayFormats: {
                        hour: 'MMM D, h:mm A'
                    }
                },
                stacked: true,

            }]
        }
    }
});

我没有弄明白我的代码有什么问题。我不确定即时通讯是否对数据集列表中的数据正确使用时间刻度。

谢谢您的帮助。