Chart.js峰值点绘制异常：显示在0、1、2位置而非对应x轴数值

问题核心是你当前配置的X轴为默认的category（类别）类型，这类轴的位置仅和全局labels数组的索引绑定，不会识别数据中自定义的x字段数值，因此三个峰值点只会按照数据索引对应到0、1、2的位置展示。

具体修改步骤： #

1. 修改X轴类型为线性数值轴 #

在X轴配置中添加type: 'linear'，让X轴按照数值大小计算坐标位置：

scales: {
    xAxes: [{
        type: 'linear', // 新增这一行
        ticks: {
            beginAtZero: true
        }
    }]
}

2. 调整原有折线图的数据集格式 #

X轴改为数值轴后，原有仅传Y值的数据集无法匹配X轴数值，需要把第一个数据集的data也调整为{x: 对应X轴数值, y: 对应Y轴数值}的对象数组格式：

// 原有values是纯Y值数组，labels是对应X值数组，需要合并为对象数组
const formattedData = {{ labels | safe }}.map((label, index) => ({
    x: label,
    y: {{ values | safe }}[index]
}))

// 第一个dataset的data改成这个格式化后的数组
datasets: [{
    label: 'Value',
    data: formattedData,
    backgroundColor: 'white',
    borderWidth: 1,
    order: 2
},
// 峰值点的dataset保持原有配置即可
]

可选优化 #

不需要再保留全局的labels字段，数值轴模式下该字段不会生效，可以直接删除。 #

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