Javascript 如何显示X轴上点之间的相对距离?
我试图使用ChartJS绘制一张图表,显示特定时间段内设备的不同状态(开/关) X轴表示日期和时间,Y轴表示状态(1开0关) 我唯一的问题是,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
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创建):
我试图设置“分布:'线性'”,但没有成功
你能帮忙吗
谢谢