Recharts

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

  1. 声明式的标签,让写图表和写 HTML 一样简单

  2. 贴近原生 SVG 的配置项,让配置项更加自然

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

参考