[英]The Chart.JS Won't Show In The Browser
I don't know what went wrong, there is no such an error notif, but the data in the chart won't show in the browser.不知道哪里出了问题,没有这样的错误提示,但是图表中的数据不会在浏览器中显示。 I'm trying to make a simple chart data using react-chartjs-2 .
我正在尝试使用 react-chartjs-2 制作简单的图表数据。
Here is my code: Chart.js这是我的代码:Chart.js
import React, {Component} from 'react';
import {Bar } from 'react-chartjs-2';
class Chart extends Component {
constructor(props) {
super(props);
this.state = {
chartData: {
labels: ['Boston', 'Worcester',
'Springfield', 'Lowell',
'Cambridge', 'New Bedford'],
datasets:[
{
label: 'Population',
data: [
617594,
181045,
153060,
106519,
105162,
95072
],
backgroundColor:[
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)',
'rgba(255, 159, 64, 0.6)',
'rgba(255, 99, 132, 0.6)'
]
}
]
}
}
}
render() {
return (
<div className="chart">
<Bar
data={this.state.chartData}
options={{
maintainAspectRatio: false
}}
/>
</div>
)
}
}
export default Chart;
And here my App.js这是我的 App.js
import './App.css';
import Chart from './components/Chart';
function App() {
return (
<div className="App">
<Chart />
</div>
);
}
export default App;
I already install the react-chartjs-2, and seems it still doesnt work here.我已经安装了 react-chartjs-2,但似乎它在这里仍然不起作用。
You need to install chart.js
too, also you need to register them like this:您还需要安装
chart.js
,还需要像这样注册它们:
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";
ChartJS.register(ArcElement, Tooltip, Legend);
<Doughnut data={...} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.