我正在尝试使用ChartJS，当我创建图表时，我看到我的标签在X轴上堆叠在彼此的顶部，正如您在graph image中所看到的。
最初，X轴应该包含“年”，但当我第一次注意到这个问题时，我想这可能只是一个目标问题，然后我将其从年改为“ID”，但正如你所看到的，它仍然堆叠在另一个上面。我确实觉得非常奇怪，Y轴非常好，但X轴不是，因为我没有对其中一个或另一个做任何不同。

**编辑：**好的，我知道错误是从哪里来的，如果你查看“这是我的应用程序. JS”

下面我将附上我的代码片段，希望这能有所帮助，我们可以一起找到一个解决方案。在useState中我有labels: [ChartData.map((data) => data.id)],。虽然我发现这是它的来源，但我还没有找到一个解决方案。

这是我的应用

import { useState, useEffect } from "react";
import BarChart from "./components/BarChart";
import { ChartData } from "./Data";
import LineChart from "./components/LineChart";

import React from "react";
import { Bar } from 'react-chartjs-2'

const App = () => {

  const [chartData, setChartData] = useState({
    // LABELS CAN BE CONSIDERED THE NAME ON THE X & Y AXIS 
    // IN THIS EXAMPLE, I HAVE YEARS AS DATA, 2016-2022, THIS WOULD BE LABEL 
    labels: [ChartData.map((data) => data.id)],
    datasets: [{
        label: "Users Gained",
        data: ChartData.map((data) => data.userGain)

    }],
})

  return (
    <>
        <div class="col-12">
            <h1 className="fs-6">WEBSITE VISITORS</h1>
            <BarChart chartData={chartData} />
        </div>
    </>
  )
}

export default App

这是我的律师行

import React from "react"
import { Bar } from 'react-chartjs-2'

import {Chart as ChartJS} from "chart.js/auto"

const BarChart = ({chartData}) => {

    return (
        <>
            <Bar data={chartData} />
        </>
    )
}

export default BarChart

这是我的数据

export const ChartData = [
    {
        id: 1,
        year: 2016,
        userGain: 80000,
        userLost: 823,
    },
    {
        id: 2,
        year: 2017,
        userGain: 45677,
        userLost: 345,
    },
    {
        id: 3,
        year: 2018,
        userGain: 78888,
        userLost: 555,
    },
    {
        id: 4,
        year: 2019,
        userGain: 98437,
        userLost: 395,
    },
    {
        id: 5,
        year: 2020,
        userGain: 74638,
        userLost: 923,
    },
    {
        id: 6,
        year: 2021,
        userGain: 84732,
        userLost: 435,
    },
    {
        id: 7,
        year: 2022,
        userGain: 84738,
        userLost: 673,
    }
]