Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/418.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/node.js/38.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何显示X轴上点之间的相对距离?_Javascript_Node.js_Html_Web_Chart.js - Fatal编程技术网

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

Javascript 如何显示X轴上点之间的相对距离?,javascript,node.js,html,web,chart.js,Javascript,Node.js,Html,Web,Chart.js,我试图使用ChartJS绘制一张图表,显示特定时间段内设备的不同状态(开/关) X轴表示日期和时间,Y轴表示状态(1开0关) 我唯一的问题是,X轴上两个后续点之间的距离是恒定的,而不是两个日期时间之间的“真实”距离 例如,一个点与一秒后的另一个点之间的距离与一个点与一天后的另一个点之间的距离相同 代码如下: var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Char

我试图使用ChartJS绘制一张图表,显示特定时间段内设备的不同状态(开/关)

X轴表示日期和时间,Y轴表示状态(1开0关)

我唯一的问题是,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创建):

我试图设置“分布:'线性'”,但没有成功

你能帮忙吗

谢谢