我无法使用代码片段来运行它,因此这里有一个JSFiddle https://jsfiddle.net/akmiecik/v562aghf/18/
为什么这只显示数据中间的两个数据点?我试着删除之前的所有点,什么都没有得到,之后的所有数据点也是如此。
var dates = ["10/21/22", "10/24/22", "10/27/22", "10/28/22", "10/31/22", "11/03/22", "11/14/22", "11/26/22", "11/26/22", "11/28/22", "11/28/22", "11/30/22", "12/01/22", "12/02/22", "12/06/22", "12/07/22", "12/08/22", "12/09/22", "12/12/22", "12/13/22", "12/16/22", "12/21/22", "12/28/22", "01/10/23", "01/12/23", "01/13/23", "01/16/23", "01/17/23", "01/19/23", "01/21/23", "01/24/23", "01/26/23", "01/30/23", "02/04/23", "02/06/23", "02/08/23", "02/09/23", "02/14/23", "02/10/23", "02/13/23", "02/15/23", "02/16/23", "02/17/23", "02/21/23", "02/24/23", "02/27/23"];
var lap_ave = ["1:02", "1:04", "1:00", "1:01", "1:02", "1:01", "1:03", "1:03", "1:03", "0:59", "0:59", "1:01", "1:02", "1:01", "1:00", "1:00", "1:00", "1:00", "0:59", "00:58", "01:02", "01:04", "01:00", "01:02", "1.01", "1.04", "01:03.1000", "01:00.2188", "01:01.5862", "01:01.4516", "00:57.8621", "01:00.6129", "01:01.1290", "01:00.6563", "01:00.5000", "01:00.0909", "00:59.0294", "00:59.0294", "00:59.7059", "00:59.0000", "00:59.7000", "00:59.6757", "00:58.3125", "00:59.4118", "00:58.8056", "00:58.9459"];
var options = {
type: 'line',
data: {
labels: dates,
datasets: [
{
label: 'Lap Average',
data: lap_ave,
borderWidth: 1
},
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
display: false
}],
}
}
}
var ctx = document.getElementById('theChart').getContext('2d');
new Chart(ctx, options);
2条答案
按热度按时间nr7wwzry1#
您为数据数组提供了字符串。Chart.js需要为y轴提供数字。您可以通过将y轴设置为类别刻度并为标签数组提供有效的圈速来解决此问题。
但最简单的解决方案是将
minute:seconds
转换为秒格式,并将其与自定义tick回调结合使用ukqbszuj2#
您传递的数据中似乎存在不一致。某些lap_ave为“#.##”,而其他为“#:#.##”
如果你把最后一个数值改为“1.03”,你会看到第三个数据点出现在图表上。
https://jsfiddle.net/q0a23j4z/