Recharts

Recharts是使用React和D3构建的重新定义的图表库，主要原则有

  • 声明式的标签，让写图表和写 HTML 一样简单

  • 贴近原生 SVG 的配置项，让配置项更加自然

  • 接口式的 API，解决各种个性化的需求

安装

因为在 React 中使用，所以在 R 中的安装就不提了

  1. npm install recharts -S

使用

在 React 中引用，首先选择图表类型

  1. import { PieChart, Pie } from 'recharts'
  2. //这里我们使用 饼状图。所以引用饼状图和其子组件

然后添加数据，一般为后台请求数据，这里我们使用假数据

  1. const data = [
  2.   {name: '水分', value: 200},
  3.   {name: '糖分', value: 100},
  4.   {name: '脂肪', value: 130},
  5.   {name: '蛋白质', value: 100}
  6. ]

最后添加需要的组件

  1. <PieChart width={300} height={300}>
  2.   <Pie data={data} fill="#8884d8"></Pie>
  3. </PieChart>

修改组件配置，以达到想要的效果

  1. const COLORS = ['#f4baba', '#e0cd84', '#91e1dd', '#a48ad4']
  2. <PieChart width={220} height={220}>
  3.   <Pie
  4.     data={data}
  5.     cx={110}
  6.     cy={110}
  7.     dataKey={'value'}
  8.     outerRadius={80}
  9.     innerRadius={40}
  10.     fill="#8884d8"
  11.   >
  12.     {
  13.       data.map((entry, index) =>
  14.         <Cell key={index} fill={COLORS[index % COLORS.length]}/>
  15.       )
  16.     }
  17.   </Pie>
  18. </PieChart>

配置信息说明：

动态效果

配合react-transition-group插件实现动态效果

装包

  1. npm i react-transition-group -S

引用

  1. import { CSSTransitionGroup } from 'react-transition-group'

使用

  1. <CSSTransitionGroup
  2.   transitionName="example"
  3.   transitionEnterTimeout={500}
  4.   transitionLeaveTimeout={300}>
  5.   {items}
  6. </CSSTransitionGroup>

代码参考

代码展示

  1. import React, { Component } from 'react'
  2. import { PieChart, Pie, Cell } from 'recharts'
  3. import { CSSTransitionGroup } from 'react-transition-group'
  4. import './pie-chart.css'
  6. const COLORS = ['#f4baba', '#e0cd84', '#91e1dd', '#a48ad4']
  7. const data = [
  8.   {name: '水分', value: 300},
  9.   {name: '糖分', value: 100},
  10.   {name: '脂肪', value: 100},
  11.   {name: '蛋白质', value: 500}
  12. ]
  14. class App extends Component {
  15.   constructor(props) {
  16.     super(props);
  17.     this.state = {
  18.       items: [],
  19.       c: 'a'
  20.     }
  21.   }
  22.   clickCell = (entry, index) => {
  23.     let newItems = this.state.items.slice();
  24.     newItems.push({
  25.       name: entry.name,
  26.       value: entry.value,
  27.       color: COLORS[index % COLORS.length]
  28.     })
  29.     this.setState({
  30.       items: newItems
  31.     })
  32.   }
  33.   render() {
  34.     let width = window.innerWidth - 40
  35.     const items = this.state.items.map((item, i) => (
  36.       <div key={item.color} className="legend">
  37.         <div className="legend-name" style={{ 'background' : item.color}}>
  38.           {item.name}
  39.         </div>
  40.         <div className="legend-value" style={{ 'border' : `3px solid ${item.color}`}}>
  41.           {item.value} mg
  42.         </div>
  43.       </div>
  44.     ))
  45.     return (
  46.       <div className="App">
  47.         <PieChart width={width} height={220} onMouseEnter={this.onPieEnter}>
  48.           <Pie
  49.             data={data}
  50.             cx={width/2}
  51.             cy={110}
  52.             dataKey={'value'}
  53.             outerRadius={80}
  54.             innerRadius={40}
  55.             fill="#8884d8"
  56.           >
  57.             {
  58.               data.map((entry, index) =>
  59.                 <Cell
  60.                   key={index}
  61.                   fill={COLORS[index % COLORS.length]}
  62.                   onClick={() => this.clickCell(entry, index)}/>
  63.               )
  64.             }
  65.           </Pie>
  66.         </PieChart>
  67.         <CSSTransitionGroup
  68.           transitionName="example"
  69.           transitionEnterTimeout={500}
  70.           transitionLeaveTimeout={300}>
  71.           {items}
  72.         </CSSTransitionGroup>
  73.       </div>
  74.     )
  75.   }
  76. }
  78. export default App

参考