Question

我正在尝试使用ChartJS绘制图表，以显示特定时间段内设备的不同状态（开/关）。

X轴表示日期和时间，Y轴表示状态（1-On，0-Off）。

我唯一的问题是X轴上两个后续点之间的距离是恒定的，并且没有显示两个日期时间之间的“真实”距离。

例如，一个点与另一个点之间的距离（第二秒之后）与一个点和另一个点之间的距离（一天之后）相同。

代码如下：

        var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: [
                new Date("2019-03-31T17:41:02.517839+00:00"),new Date("2019-03-31T17:41:13.969037+00:00"),new Date("2019-03-31T17:41:22.568130+00:00"),new Date("2019-03-31T17:41:23.568130+00:00"),new Date("2019-03-31T17:41:34.010461+00:00"),new Date("2019-03-31T17:41:35.010461+00:00"),new Date("2019-03-31T17:41:55.353745+00:00"),new Date("2019-03-31T17:41:56.353745+00:00"),new Date("2019-03-31T17:42:04.254075+00:00"),new Date("2019-03-31T17:42:05.254075+00:00"),new Date("2019-03-31T17:42:15.552743+00:00"),new Date("2019-03-31T17:42:25.306603+00:00"),new Date("2019-03-31T17:42:26.306603+00:00"),new Date("2019-03-31T17:43:13.747931+00:00"),new Date("2019-03-31T17:43:14.747931+00:00"),new Date("2019-03-31T18:03:46.567253+00:00"),new Date("2019-03-31T18:03:47.567253+00:00"),new Date("2019-03-31T18:30:38.945956+00:00"),new Date("2019-03-31T18:30:39.945956+00:00"),new Date("2019-03-31T18:45:10.718018+00:00"),new Date("2019-03-31T18:45:11.718018+00:00"),new Date("2019-03-31T19:51:24.369067+00:00"),new Date("2019-03-31T19:51:25.369067+00:00"),new Date("2019-03-31T19:53:40.861770+00:00"),new Date("2019-03-31T19:53:41.861770+00:00"),
            ],
            datasets: [{
                label: 'Activity',
                backgroundColor: 'rgba(30,140,50,0.5)',
                borderColor: 'rgba(30,140,50,0.5)',
                data: [
                1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 
]
            }]
        },

        // Configuration options go here
        options: {
            scales: {
                xAxes: [{
                    display: false,
                }],
                yAxes: [{
                    display: false,
                }],
            },
            elements: {
                line: {
                    tension: 0
                }
            },
        }

，它是这样的：

只需澄清一下-这就是我想要的内容（使用其他模块-Canvas.js创建）：

我尝试将“分布：'线性'”设置为失败。

您能帮忙吗？

谢谢！

如何显示X轴上点之间的相对距离？

0 个答案: