我尝试使用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;
2条答案
按热度按时间avwztpqn1#
你没有一个labels数组,在你的数据对象中你有一个
datasets
键和一个lables
键,最后一个键是错误的,它应该是labels
。如果你把它改成这样,它就会工作:对于数据集中的
lable
键也是如此,它应该是label
sshcrbum2#
您写的
label
和labels
的拼写不正确,应该是label
而不是lable
,应该是labels
而不是lables
。我还建议您将Line组件 Package 在一个条件中,如下所示这只是等待api调用和
dates
状态改变。