reactjs ChartJS图表标签错误

vc9ivgsu  于 2023-01-30  发布在  React
关注(0)|答案(1)|浏览(165)

我正在尝试使用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,
    }
]
qlvxas9a

qlvxas9a1#

我解决这个问题的方法是“伤口上的创可贴”解决方案。由于某种原因,动态Map不起作用,我不一定想出如何解决这个问题。但是,我确实改变了Map,并将数据硬编码在里面,这样就解决了这个问题。
所以我把labels: [ChartData.map((data) => data.id)]换成了labels: [2016, 2017, 2018, [...and so on]]
虽然更改此设置并没有解决最初的动态贴图问题,但我确实解决了视觉外观问题。

相关问题