papparse与chart.js不显示csv值在x轴上

Question

目前使用papaparse 5.1和chart.js 3.5.1一起在X轴上显示15分钟间隔。这是在chart.js的v2中工作，但现在它不会在图表上显示csv的"时间"值了。相反，它显示的是0、2、4、6、8等…

Time,8/18/2021,8/19/2021,8/20/2021
0:00,172202,160823,126604
0:15,170955,159931,123954
0:30,170269,159414,121677

看'return value.toLocaleString();'我想我这里有问题吗?

https://i.stack.imgur.com/ePv16.jpg

$(document).ready(function() {
$.get('data.csv', {'_': $.now()}, function(csvString) {
var data = Papa.parse(csvString).data;
var timeLabels = data.slice(1).map(function(row) { return row[0]; });
var datasets = [];
for (var i = 1; i < data[0].length; i++) {
datasets.push(
{
label: data[0][i], // column name
data: data.slice(1).map(function(row) {return row[i]}), // data in that column
fill: false, // `true` for area charts, `false` for regular line charts
pointStyle: 'line'
}
)
}
// Get container for the chart
var ctx = document.getElementById('chart-container').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: timeLabels,
datasets: datasets,
},
options: {
maintainAspectRatio: false,
scales: {
x: {
title: {
display: true,
text: X_AXIS
},
grid: {
display: false,
},
ticks: {
maxTicksLimit: 60,
callback: function(value, index, values) {
return value.toLocaleString('en-US');
}
}
},
y: {
stacked: false, // `true` for stacked area chart, `false` otherwise
beginAtZero: true,
title: {
display: true,
text: Y_AXIS
},
grid: {
display: true,
},
ticks: {
maxTicksLimit: 10,
beginAtZero: true,
callback: function(value, index, values) {
return value.toLocaleString()
}
}
}
},
tooltips: {
callbacks: {
label: function(tooltipItem, all) {
return all.datasets[tooltipItem.datasetIndex].label
+ ':' + tooltipItem.yLabel.toLocaleString();
}
}
},
plugins: {
legend: {
labels: {
usePointStyle: true,
},
display: true,
},
title: {
display: true,
text: TITLE,
fontSize: 14,
},
colorschemes: {
scheme: 'office.Frame6'
}
}
}
});
});
});

[1]: https://i.stack.imgur.com/oFPdX.png

Answer 1

因为你没有改变x轴的刻度类型，它是一个category刻度，类别刻度使用刻度的索引作为内部数据格式，所以你没有得到你的标签，为了得到你的标签，你需要让你的回调像这样根据文档提示:

callback: function(value, index, values) {
return this.getLabelForValue(value).toLocaleString('en-US');
}