当x值与标签重合时，Chartjs折线图会全部乱码

Question

我正在使用react-chartjs-2绘制折线图，​​但是当我使用以下代码时

const data = {
    labels: [0, 11, 21, 31, 41, 50],
    datasets: [
        {
            label: 'Radiant',
            data: [1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50].map((e) => ({
                x: e,
                y: Math.round(50 + Math.random() * 30),
            })),
            fill: false,
            borderColor: 'green',
            backgroundColor: 'green',
        },
        {
            label: 'Dire',
            data: [1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50].map((e) => ({
                x: e,
                y: Math.round(50 + Math.random() * 30),
            })),
            fill: false,
            borderColor: 'red',
            backgroundColor: 'red',
        },
    ],
};

我的最后一点被两次显示。

当我将标签修改为0、10、20等时，它变得更加疯狂，并且得到以下结果。

Answer 1

我通过在xAxes中将类型设置为线性来固定它：

    scales: {
        xAxes: [
            {
                type: 'linear',
            },
        ],
    },