我不知道哪里出错了,没有这样的错误通知,但是图表中的数据不会显示在浏览器中。我正在尝试使用react-chartjs-2制作一个简单的图表数据。
以下是我的代码: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;
这是我的App.js
import './App.css';
import Chart from './components/Chart';
function App() {
return (
<div className="App">
<Chart />
</div>
);
}
export default App;
我已经安装了react-chartjs-2,似乎它仍然不工作在这里。
1条答案
按热度按时间s4n0splo1#
你也需要安装
chart.js
,你也需要像这样注册它们:Check the docs here