ant-design-mobile-chart的使用（一）

ant-design-mobile-chart

react作为前端流行的框架之一，在react的移动端项目中如果需要制作大量的图表，比如柱状图，饼状图，折线图等各类图表，可以考虑使用ant-design-mobile-chart组件库来实现。ant-design-mobile-chart 是为移动端开发的 react 图表组件库，图形语法底层基于F2 实现图形语法。

使用实例

• 官方给的实例： http://npm.taobao.org/package/ant-design-mobile-chart

安装

$ npm install ant-design-mobile-chart --save

使用

import React, { Component } from 'react';
import { Chart, Line, Scale, Guide, Area, Point, Axis, Interval } from 'ant-design-mobile-chart'

const data = [
  {
    "reportDateTimestamp": 1529856000000,
    "codeType": "INDEX_CODE",
    "rate": 0
  },
  {
    "reportDateTimestamp": 1529942400000,
    "codeType": "INDEX_CODE",
    "rate": 0.0082
  },
  {
    "reportDateTimestamp": 1530028800000,
    "codeType": "INDEX_CODE",
    "rate": 0.0284
  },
  {
    "reportDateTimestamp": 1530115200000,
    "codeType": "INDEX_CODE",
    "rate": -0.0385
  },
  {
    "reportDateTimestamp": 1530201600000,
    "codeType": "INDEX_CODE",
    "rate": -0.0139
  },
  {
    "reportDateTimestamp": 1530460800000,
    "codeType": "INDEX_CODE",
    "rate": -0.0428
  },
  {
    "reportDateTimestamp": 1530547200000,
    "codeType": "INDEX_CODE",
    "rate": 0.0425
  },
  {
    "reportDateTimestamp": 1529856000000,
    "codeType": "PRODUCT_ID",
    "rate": 0
  },
  {
    "reportDateTimestamp": 1529942400000,
    "codeType": "PRODUCT_ID",
    "rate": -0.0075
  },
  {
    "reportDateTimestamp": 1530028800000,
    "codeType": "PRODUCT_ID",
    "rate": -0.0264
  },
  {
    "reportDateTimestamp": 1530115200000,
    "codeType": "PRODUCT_ID",
    "rate": -0.0355
  },
  {
    "reportDateTimestamp": 1530201600000,
    "codeType": "PRODUCT_ID",
    "rate": -0.0113
  },
  {
    "reportDateTimestamp": 1530460800000,
    "codeType": "PRODUCT_ID",
    "rate": -0.0383
  },
  {
    "reportDateTimestamp": 1530547200000,
    "codeType": "PRODUCT_ID",
    "rate": -0.0377
  }
]

class LineDemo extends Component {
  render() {
    return (
      <div>
        <Chart source={data} width="400" height="200" pixelRatio={window.devicePixelRatio}>
          <Line position="reportDateTimestamp*rate" color="codeType"/>
          <Scale field="reportDateTimestamp" range={[0, 1]} tickCount={3} type="timeCat" mask="MM-DD" />
          <Scale field="rate" tickCount={5} formatter={(rate) => `${(rate*100).toFixed(2)}%`} />
          <Guide type="tag" position={[1530028800000, 0.0284]} content="买入" />
        </Chart>
      </div>
    );
  }
}
export default LineDemo;

• 隐藏座标系

<Axis field="reportDateTimestamp" enable={false} />
<Axis field="rate" enable={false} />  

• 面积图

<Area position="reportDateTimestamp*rate" />  

• 柱状图

//其中color属性可以设置每个柱子不同的颜色
<Interval position="percent" color={['name',['#FE5D4D','#3BA4FF','#737DDE','#737D00']]} adjust="stack"/>

• 饼状图

//在柱状图的基础上设置极座标即可成为饼状图
<Coord type="polar" transposed={true} innerRadius= {0.7} radius={5}/>

• 图例

{/* 自定义图例 */}
<Legend enable={true} offsetX={-80} custom={true} items={this.state.map} position={'right'} 
itemFormatter={(val)=>{ return val}}/>

结束语

这只是react中使用ant-design-mobile-chart组件的使用方式之一，下篇文章介绍另一种使用ant-design-mobile-chart组件的方式