简体   繁体   English

如何在反应中创建饼图?

[英]How to create a Pie chart in react?

I have tried to create pie chart like this:我试图创建这样的饼图:


import React from 'react';
import {Pie} from 'react-chartjs-2';

const state = {
  labels: ['January', 'February', 'March','April',
            'May', 'June', 'July', 'August',
            'September', 'October', 'November', 'December'],
  dataset: [
    {
      label: 'Rainfall',
      backgroundColor: 'rgba(75,192,192,1)',
      borderColor: 'rgba(0,0,0,1)',
      borderWidth: 1,
      data: [65, 59, 80, 81, 56, 34, 97, 25,69,75,62,45]
    }
  ]
}

export default class PieChartComponent extends React.Component {
  render() {
    return (
      <div className="container">
        <Pie
          data={state}
          options={{
            title:{
              display:true,
              text:'Average Rainfall per month',
              fontSize:16
            },
            legend:{
              display:true,
              position:'right'
            }
          }}
        />
      </div>
    );
  }
}

There is a small typo where you defined the state:您在定义状态时有一个小错误:

const state = {
  labels: ['January', 'February', 'March','April',
            'May', 'June', 'July', 'August',
            'September', 'October', 'November', 'December'],
  datasets: [
    {
      label: 'Rainfall',
      backgroundColor: 'rgba(75,192,192,1)',
      borderColor: 'rgba(0,0,0,1)',
      borderWidth: 1,
      data: [65, 59, 80, 81, 56, 34, 97, 25,69,75,62,45]
    }
  ]
}

Change dataset to datasets.将数据集更改为数据集。 It will work.它会起作用。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM