React-Chartjs-2 圆环图

React-Chartjs-2 圆环图是一个基于 React 的圆环图库，使用 Chart.js 库来绘制。

特点

• 简单易用
• 可高度定制化
• 支持响应式设计
• 使用 Chart.js 库来绘制，拥有丰富的功能和样式

安装

npm install --save react-chartjs-2 chart.js

使用

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

const data = {
  labels: ['Red', 'Green', 'Yellow'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3],
      backgroundColor: [
        'red',
        'green',
        'yellow'
      ]
    }
  ]
};

const DoughnutChart = () => (
  <>
    <div className='header'>
      <h1 className='title'>Doughnut Chart</h1>
    </div>
    <Doughnut data={data} />
  </>
);

export default DoughnutChart;

API

React-Chartjs-2 支持多种类型的图表，包括条形图、线性图、饼图、雷达图、极地图、热力图等。在使用时，需要根据实际情况传入相应的数据和选项。

组件

<Line>

• data： Required, 数据对象， 格式为：{ labels: [...], datasets: [{ data: [...], label: '...', borderColor: '...', backgroundColor: '...', ... }] }
• options： 选项对象， 格式为：{ scales: { yAxes: [{ ticks: { beginAtZero: true } }] } }
• width： 容器宽度， 默认值：'100%'
• height： 容器高度， 默认值：300

<Bar>

• data： Required, 数据对象， 格式为：{ labels: [...], datasets: [{ data: [...], label: '...', backgroundColor: '...', ... }] }
• options： 选项对象， 格式为：{ scales: { yAxes: [{ ticks: { beginAtZero: true } }] } }
• width： 容器宽度， 默认值：'100%'
• height： 容器高度， 默认值：300

<Doughnut> / <Pie>

• data： Required, 数据对象， 格式为：{ labels: [...], datasets: [{ data: [...], label: '...', backgroundColor: '...', ... }] }
• options： 选项对象， 格式为：{ cutoutPercentage: 50 }
• width： 容器宽度， 默认值：'100%'
• height： 容器高度， 默认值：300

<Radar>

• data： Required, 数据对象， 格式为：{ labels: [...], datasets: [{ data: [...], backgroundColor: '...', borderColor: '...', ... }] }
• options： 选项对象， 格式为：{ scale: { ticks: { beginAtZero: true } } }
• width： 容器宽度， 默认值：'100%'
• height： 容器高度， 默认值：300

<PolarArea>

• data： Required, 数据对象， 格式为：{ labels: [...], datasets: [{ data: [...], backgroundColor: [...], ... }] }
• options： 选项对象， 格式为：{ scale: { ticks: { beginAtZero: true } } }
• width： 容器宽度， 默认值：'100%'
• height： 容器高度， 默认值：300

插件

React-Chartjs-2 也支持插件的使用。在使用时，需要先安装插件，然后引入和使用即可。

例如，要使用饼图上的标签插件 chartjs-plugin-labels，可以按照以下步骤进行：

1. 安装插件

   npm install --save chartjs-plugin-labels
   

2. 在组件中引入插件并配置选项

   import React from 'react';
   import { Doughnut } from 'react-chartjs-2';
   import 'chartjs-plugin-labels';
   
   const data = {
     labels: ['Red', 'Green', 'Yellow'],
     datasets: [
       {
         label: '# of Votes',
         data: [12, 19, 3],
         backgroundColor: [
           'red',
           'green',
           'yellow'
         ]
       }
     ]
   };
   
   const options = {
     plugins: {
       labels: {
         render: 'percentage',
         fontColor: ['black', 'white', 'red'],
         precision: 2
       }
     }
   };
   
   const DoughnutChart = () => (
     <>
       <div className='header'>
         <h1 className='title'>Doughnut Chart</h1>
       </div>
       <Doughnut data={data} options={options} />
     </>
   );
   
   export default DoughnutChart;
   

   在选项对象中，增加了 plugins 属性，然后在 plugins 中加入了 labels 插件，并进行了配置。

结束语

React-Chartjs-2 圆环图是一个简单易用的图表库，支持多种类型的图表和插件，可以满足大部分图表需求，而且定制灵活方便。若您有其他需求，可以进入 官方文档 进行查看。