javascript Chart.JS不会显示在浏览器中

tcbh2hod  于 2023-01-04  发布在  Java
关注(0)|答案(1)|浏览(123)

我不知道哪里出错了,没有这样的错误通知,但是图表中的数据不会显示在浏览器中。我正在尝试使用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,似乎它仍然不工作在这里。

s4n0splo

s4n0splo1#

你也需要安装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={...} />

Check the docs here

相关问题