如何用(x,y)点绘制折线图？Chart.js点全在x=0问题求助

问题出在Chart.js的默认x轴配置上：默认x轴类型是category，它会将你数据中的x值当作分类标签而非数值处理，导致所有数据点都被映射到第一个分类位置（视觉上的x=0处）。

解决方法很简单，在配置中添加options字段，将x轴的type设置为'linear'，让Chart.js按数值解析x坐标：

new Chart(canvasId,{
    type: 'line',
    data: {
        datasets: [
            {
                label: 'Some Data',
                data: [
                    { x: 0, y: 2.344317674636841 },
                    { x: 9, y: 2.2913742065429688 },
                    { x: 19, y: 2.2962939739227295 },
                    { x: 29, y: 2.26206374168396 },
                    { x: 39, y: 2.2287118434906006 },
                    { x: 49, y: 2.1946732997894287 },
                    { x: 59, y: 2.192193031311035 },
                    { x: 69, y: 2.1846773624420166 },
                    { x: 79, y: 2.122765064239502 },
                    { x: 89, y: 2.1172447204589844 },
                    { x: 99, y: 2.125208616256714 },
                ]
            },
        ]
    },
    options: {
        scales: {
            x: {
                type: 'linear' // 指定x轴为数值型线性轴
            }
        }
    }
});

这样配置后，x轴会根据数据中的数值自动计算刻度，数据点也会对应到正确的x位置上。

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