当 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',
            },
        ],
    },

当 x 值与标签重合时，Chartjs 折线图会变得混乱

Chartjs line chart gets all scrambled up when an x value coincides with a label

javascript

chart.js

react-chartjs