Papaparse搭配Chart.js 3.5.1时X轴无法显示CSV的Time字段值

问题根因 #

Chart.js 3.x对分类轴（你当前X轴默认使用的类型）的ticks.callback入参规则做了不兼容变更：

• v2版本中回调第一个入参是对应标签的实际值（也就是你CSV里的0:00、0:15这类时间文本）
• v3版本中回调第一个入参是标签在labels数组中的索引值，所以你调用value.toLocaleString()输出的就是0、2、4这类索引数字，这就是你问题的直接原因。

解决方案 #

方案1（最简单）：直接移除X轴的ticks.callback配置 #

你当前的时间标签本身就是符合展示要求的字符串，不需要额外格式化，删除以下配置即可正常显示时间：

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

方案2（需要保留自定义逻辑时）：修改回调取值方式 #

如果你需要在回调里做额外格式化，调整回调逻辑通过索引取对应标签值即可：

ticks: {
  maxTicksLimit: 60,
  callback: function(value, index, values) {
    // 从labels数组中取对应索引的时间值
    const timeLabel = this.chart.data.labels[value];
    // 有格式化需求可以在这里处理后返回
    return timeLabel;
  }
}

额外注意事项 #

你当前代码里的tooltips配置还是v2版本的写法，Chart.js 3.x中tooltips配置已经迁移到options.plugins.tooltip下，不调整的话后续tooltip自定义逻辑会失效。

内容的提问来源于stack exchange，提问作者mikez