[英]The Chart.JS Won't Show In The Browser
不知道哪里出了問題,沒有這樣的錯誤提示,但是圖表中的數據不會在瀏覽器中顯示。 我正在嘗試使用 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,但似乎它在這里仍然不起作用。
您還需要安裝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.