ChartJS 无法读取null的属性(阅读'labels')

vulvrdjw  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(208)

我尝试使用chartjs构建一个LineChart,但我在阅读图表数据时遇到了一些问题,问题似乎是我的标签为空,但我将它们作为一个日期数组(已选中,数组从服务器传输过来就好)。我不确定问题是什么,知道是什么导致了这些问题吗?
这是图表现在的样子:

我得到了几个错误:

下面是我的代码:

import { Link } from "react-router-dom";
import { Line } from "react-chartjs-2";
import {Chart as chartjs, Title, Tooltip, LineElement, Legend, CategoryScale, LinearScale, PointElement} from "chart.js";

chartjs.register(
  Title, Tooltip, LineElement, Legend, CategoryScale, LinearScale, PointElement
)

function BitCoin() {
  const [data, setData] = React.useState(null);
  const [dates, setDates] = React.useState(null);
  const [coinValue, setCoinValue] = React.useState(null);

  React.useEffect(() => {
    fetch("http://localhost:3001/bitcoin")
      .then((res) => res.json()) 
      .then((data) => {

        const twoDimensionArr = data.message;
        setData(twoDimensionArr);               
        setDates(twoDimensionArr.map(item => item[0]));    
        setCoinValue(Number(twoDimensionArr.map(item => item[1])));
   })
   .then(console.log(data))
  }, []);

  const [chartData, setChartData] = useState({
    lables: dates,
    datasets:[
      {
        lable: "value of BTC in ILS",
        data: coinValue,
        backgroundColor:'gold'
      }
    ]
  })

  return (
    <div style={{textAlign:"center", fontFamily:"Comic Sans MC", fontSize:"100"}}>
      THIS IS THE BitCoin PAGE

      <nav>
        <Link to="/"> Home </Link>
      </nav>

      <nav>
        <Link to="/coins"> Coins </Link>
      </nav>

      <Line
      data = {chartData}
      />
    </div>
  )
}

export default BitCoin;
avwztpqn

avwztpqn1#

你没有一个labels数组,在你的数据对象中你有一个datasets键和一个lables键,最后一个键是错误的,它应该是labels。如果你把它改成这样,它就会工作:

const [chartData, setChartData] = useState({
  labels: dates,
  datasets: [{
    label: "value of BTC in ILS",
    data: coinValue,
    backgroundColor: 'gold'
  }]
})

对于数据集中的lable键也是如此,它应该是label

sshcrbum

sshcrbum2#

您写的labellabels的拼写不正确,应该是label而不是lable,应该是labels而不是lables。我还建议您将Line组件 Package 在一个条件中,如下所示

...other code

{ dates.length > 0 && 
  <Line data = {chartData} />
}

...other code

这只是等待api调用和dates状态改变。

相关问题