在 Chart.js 图表中显示持续时间

Question

我正在尝试使用 Chart.JS 为一个项目创建一个图表，该图表将显示设备在某一天打开的持续时间。

日期在 Y 轴上，X 轴包含从 00:00 到 23:59 的 24 小时时间刻度，水平条表示持续时间。 我想我正在尝试制作与甘特图风格相似的东西。

我目前的 Javascript 代码是这样的：

var timeAxis = [];
var dateAxis = [];
var startDate = moment('2000-01-01 00:00');
var endDate = moment('2000-01-01 23:59');

while (startDate <= endDate) {
    timeAxis.push(startDate.format('HH:mm'));
    startDate.add(1, 'minutes');
}

startDate = moment('2019-12-06');
endDate = moment('2019-12-13');

while (startDate <= endDate) {
    dateAxis.push(startDate.format('ddd DD/MM'));
    startDate.add(1, 'days');
}

var ctx = document.getElementById('deviceOnChart').getContext('2d');
var testChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        datasets: [{
            label: 'Device On Time',
            data: [
                '2019-12-13 06:32',
                '2019-12-12 09:26',
                '2019-12-11 11:45',
                '2019-12-10 18:06',
                '2019-12-09 03:56',
                '2019-12-08 15:34',
                '2019-12-07 12:53',
                '2019-12-06 21:35',
            ],
            backgroundColor: 'rgba(0, 100, 0, 0.2)',
            borderColor: 'rgba(0, 150, 0, 1)',
            borderWidth: 0.5,
            xAxisID: 'OnTime'
        },
        {
            label: 'Device Off Time',
            data: [
                '2019-12-13 21:34',
                '2019-12-12 17:28',
                '2019-12-11 22:58',
                '2019-12-10 21:45',
                '2019-12-09 14:27',
                '2019-12-08 19:35',
                '2019-12-07 18:53',
                '2019-12-06 22:35'
            ],
            backgroundColor: 'rgba(100, 0, 0, 0.2)',
            borderColor: 'rgba(150, 0, 0, 1)',
            borderWidth: 0.5,
            xAxisID: 'OffTime'
        }]
    },
    options: {
        scales: {
            yAxes: [{
                type: 'time',
                time: {
                    unit: 'day',
                    parser: 'ddd DD/MM',
                    displayFormats: {
                        day: 'ddd DD/MM'
                    }
                },
                ticks: {
                    source: 'labels'
                },
                labels: dateAxis
            }],
            xAxes: [{
                id: 'OnTime',
                type: 'time',
                time: {
                    unit: 'minute',
                    parser: 'HH:mm',
                    displayFormats: {
                        minute: 'HH:mm'
                    }
                },
                ticks: {
                    source: 'labels',
                    autoSkip: true
                },
                labels: timeAxis,
                stacked: true
            },
            {
                display: false,
                id: 'OffTime',
                type: 'time',
                time: {
                    unit: 'minute',
                    parser: 'HH:mm',
                    displayFormats: {
                        minute: 'HH:mm'
                    }
                },
                ticks : {
                    source: 'labels',
                    autoSkip: true
                },
                labels: timeAxis,
                stacked: true
            }]
        }
    }
});

我还创建了一个JSFiddle来演示图表目前的样子（这很糟糕）。 我以前从未真正在 Chart.JS 中对时间轴做过很多工作，所以事实证明这对我来说有些混乱，而且文档在某些地方似乎有点稀疏。

我已经能够让轴以我假设的正确方式正确显示日期和时间。 但是，我不确定如何正确格式化数据以便 Chart.JS 可以解析它。 目前图表是空的，大概是因为它不知道如何解释我试图让它显示的数据。

我尝试将数据指定为一个对象数组，其中 x 和 y 属性分别包含时间和日期。 我还尝试将其作为单个数据集以及 X 轴设置为堆叠的两个数据集，图表将不显示任何内容。

任何人都可以提供的任何帮助将不胜感激。

Answer 1

这是我的解决方案： https : //jsfiddle.net/e6td4sh0/

我使用了相当新的chart.js 2.9 版本中的新浮动条功能。

一切正常，除了时区和工具提示的时间格式。 当我解决这些问题时，我在这里发布了完整的代码。 如果其他人解决了它们，如果他/她用正确的代码更新我的答案，我会很高兴。