组件自定义

1. 组件 Line , Area , Bar , XAxis, YAxis 的 labels 支持自定义

例如，我们可以创建具有自定义label的<Bar />，以及自定义<XAxis /> 的刻度。

  1. import { BarChart, Bar, XAxis, XAxis } from 'recharts';
  2. const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
  3. const renderCustomAxisTick = ({ x, y, payload })  => {
  4.   let path = '';
  6.   switch (payload.value)  {
  7.     case 'Page A':
  8.       path = 'M899.072 99.328q9.216 13.312 17.92 48.128t16.384 81.92 13.824 100.352 11.264 102.912 9.216 90.112 6.144 60.928q4.096 30.72 7.168 70.656t5.632 79.872 4.096 75.264 2.56 56.832q-13.312 16.384-30.208 25.6t-34.304 11.264-34.304-2.56-30.208-16.896q-1.024-10.24-3.584-33.28t-6.144-53.76-8.192-66.56-8.704-71.68q-11.264-83.968-23.552-184.32-7.168 37.888-11.264 74.752-4.096 31.744-6.656 66.56t-0.512 62.464q1.024 18.432 3.072 29.184t4.608 19.968 5.12 21.504 5.12 34.304 5.12 56.832 4.608 90.112q-11.264 24.576-50.688 42.496t-88.576 29.696-97.28 16.896-74.752 5.12q-18.432 0-46.08-2.56t-60.416-7.168-66.048-12.288-61.952-17.92-49.664-24.064-28.16-30.208q2.048-55.296 5.12-90.112t5.632-56.832 5.12-34.304 5.12-21.504 4.096-19.968 3.584-29.184q2.048-27.648-0.512-62.464t-6.656-66.56q-4.096-36.864-11.264-74.752-13.312 100.352-24.576 184.32-5.12 35.84-9.216 71.68t-8.192 66.56-6.656 53.76-2.56 33.28q-13.312 12.288-30.208 16.896t-34.304 2.56-33.792-11.264-29.696-25.6q0-21.504 2.048-56.832t4.096-75.264 5.632-79.872 6.656-70.656q2.048-20.48 6.144-60.928t9.728-90.112 11.776-102.912 13.824-100.352 16.384-81.92 17.92-48.128q20.48-12.288 56.32-25.6t73.216-26.624 71.168-25.088 50.176-22.016q10.24 13.312 16.896 61.44t13.312 115.712 15.36 146.432 23.04 153.6l38.912-334.848-29.696-25.6 43.008-54.272 15.36 2.048 15.36-2.048 43.008 54.272-29.696 25.6 38.912 334.848q14.336-74.752 23.04-153.6t15.36-146.432 13.312-115.712 16.896-61.44q16.384 10.24 50.176 22.016t71.168 25.088 73.216 26.624 56.32 25.6';
  9.       break;
  10.     case 'Page B':
  11.       path = 'M662.528 451.584q10.24 5.12 30.208 16.384t46.08 31.744 57.856 52.736 65.024 80.896 67.072 115.2 64.512 154.624q-15.36 9.216-31.232 21.504t-31.232 22.016-31.744 15.36-32.768 2.56q-44.032-9.216-78.336-8.192t-62.976 7.68-53.248 16.896-47.616 19.968-46.08 16.384-49.664 6.656q-57.344-1.024-110.592-16.896t-101.376-32.256-89.6-25.088-75.264 4.608q-20.48 8.192-41.984 1.024t-38.912-18.432q-20.48-13.312-39.936-33.792 37.888-116.736 86.016-199.68t92.672-136.704 78.848-81.408 43.52-33.792q9.216-5.12 10.24-25.088t-1.024-40.448q-3.072-24.576-9.216-54.272l-150.528-302.08 180.224-29.696q27.648 52.224 53.76 79.36t50.176 36.864 45.568 5.12 39.936-17.92q43.008-30.72 80.896-103.424l181.248 29.696q-20.48 48.128-45.056 99.328-20.48 44.032-47.616 97.28t-57.856 105.472q-12.288 34.816-13.824 57.344t1.536 36.864q4.096 16.384 12.288 25.6z';
  12.       break;
  13.       ...
  14.     default:
  15.       path = '';
  16.   }
  18.   return (
  19.     <svg x={x - 12} y={y + 4} width={24} height={24} viewBox="0 0 1024 1024" fill="#666">
  20.       <path d={path} />
  21.     </svg>
  22.   ) ;
  23. };
  24. const renderCustomBarLabel = ({ payload, x, y, width, height, value })  => {
  25.   return <text x={x + width / 2} y={y} fill="#666" textAnchor="middle" dy={-6}>{`value: ${value}`}</text>;
  26. };
  1. const renderBarChart = (
  2.   <BarChart width={600} height={300} data={data}>
  3.     <XAxis dataKey="name" tick={renderCustomAxisTick} />
  4.     <YAxis />
  5.     <Bar type="monotone" dataKey="uv" barSize={30} fill="#8884d8"
  6.       label={renderCustomBarLabel}/>
  7.   </BarChart>
  8. ) ;

组件自定义 - 图1

2. 组件的形状可以自定义

例如，当 <Bar /> 的属性 shape 是一个函数或者 react element 的时候，可以用来自定义柱子的形状。

  1. import { BarChart, Bar, XAxis, XAxis } from 'recharts';
  2. const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
  3. ...
  4. const getPath = (x, y, width, height)  => (
  5.   `M${x},${y + height}
  6.    C${x + width / 3},${y + height} ${x + width / 2},${y + height / 3} ${x + width / 2}, ${y}
  7.    C${x + width / 2},${y + height / 3} ${x + 2 * width / 3},${y + height} ${x + width}, ${y + height}
  8.    Z`
  9. ) ;
  11. const TriangleBar = (props)  => {
  12.   const {
  13.     fill, x, y, width, height,
  14.   } = props;
  16.   return <path d={getPath(x, y, width, height) } stroke="none" fill={fill} />;
  17. };
  1. const renderBarChart = (
  2.   <BarChart width={600} height={300} data={data}>
  3.     <XAxis dataKey="name" tick={renderCustomAxisTick} />
  4.     <YAxis />
  5.     <Bar type="monotone" dataKey="uv" fill="#8884d8"
  6.       shape={<TriangleBar />} />
  7.   </BarChart>
  8. ) ;

组件自定义 - 图2

3. Tooltip 的内容可以自定义

我们经常需要在提示浮层中展示更多的信息，这时候就可以时候自定义的 content 。

  1. import { BarChart, Bar, XAxis, XAxis, Tooltip } from 'recharts';
  2. const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
  3. ...
  4. function getIntroOfPage(label)  {
  5.   if (label === 'Page A')  {
  6.     return 'Page A is about men's clothing';
  7.   } if (label === 'Page B')  {
  8.     return 'Page B is about women's dress';
  9.   } if (label === 'Page C')  {
  10.     return 'Page C is about women's bag';
  11.   } if (label === 'Page D')  {
  12.     return 'Page D is about household goods';
  13.   } if (label === 'Page E')  {
  14.     return 'Page E is about food';
  15.   } if (label === 'Page F')  {
  16.     return 'Page F is about baby food';
  17.   }
  18. }
  20. function CustomTooltip({ payload, label, active })  {
  21.   if (active)  {
  22.     return (
  23.       <div className="custom-tooltip">
  24.         <p className="label">{`${label} : ${payload[0].value}`}</p>
  25.         <p className="intro">{getIntroOfPage(label) }</p>
  26.         <p className="desc">Anything you want can be displayed here.</p>
  27.       </div>
  28.     ) ;
  29.   }
  31.   return null;
  32. }
  1. const renderBarChart = (
  2.   <BarChart width={600} height={300} data={data}>
  3.     <XAxis dataKey="name" tick={renderCustomAxisTick} />
  4.     <YAxis />
  5.     <Tooltip content={<CustomTooltip />}/>
  6.     <Bar type="monotone" dataKey="uv" fill="#8884d8"
  7.       shape={<TriangleBar />} />
  8.   </BarChart>
  9. ) ;

组件自定义 - 图3

4. 组件样式支持 svg 属性

除了 Tooltip 和 Legend 使用 html 实现的，其他的组件都是纯 svg 实现，支持 svg 的所有属性。

  1. import { BarChart, Bar, XAxis, XAxis, Tooltip, CartesianGrid } from 'recharts';
  2. const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
  4. const renderBarChart = (
  5.   <BarChart width={600} height={300} data={data}>
  6.     <XAxis dataKey="name" stroke="#8884d8" />
  7.     <YAxis />
  8.     <Tooltip />
  9.     <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
  10.     <Bar type="monotone" dataKey="uv" fill="#8884d8" barSize={30} />
  11.   </BarChart>
  12. ) ;

组件自定义 - 图4

5. Tooltip 和 Legend 支持自定义的 style

Tooltip 和 Legend 是使用 html 实现的，开放了 style 相关的 api ，当然也可以通过 css 来改变样式。

  1. import { BarChart, Bar, XAxis, XAxis, Tooltip, Legend, CartesianGrid } from 'recharts';
  2. const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
  4. const renderBarChart = (
  5.   <BarChart width={600} height={300} data={data}>
  6.     <XAxis dataKey="name" stroke="#8884d8" />
  7.     <YAxis />
  8.     <Tooltip wrapperStyle={{ width: 100, backgroundColor: '#ccc' }} />
  9.     <Legend width={100} wrapperStyle={{ top: 40, right: 20, backgroundColor: '#f5f5f5', border: '1px solid #d5d5d5', borderRadius: 3, lineHeight: '40px' }} />
  10.     <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
  11.     <Bar type="monotone" dataKey="uv" fill="#8884d8" barSize={30} />
  12.   </BarChart>
  13. ) ;

组件自定义 - 图5

  • 组件自定义 - 图6uv