Ant Design Mobile Chart based on F2
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo feat: update demo and readme Aug 16, 2018
src fix: remove test case Oct 1, 2018
test feat: appendPadding Aug 19, 2018
.babelrc add: init Aug 16, 2018
.eslintignore add: init Aug 16, 2018
.eslintrc.js add: init Aug 16, 2018
.gitignore add: init Aug 16, 2018
.npmignore add: init Aug 16, 2018
README.md Update README.md Aug 16, 2018
jest.config.js add: init Aug 16, 2018
package.json fix: remove test case Oct 1, 2018
webpack.config.js fix: remove test case Oct 1, 2018

README.md

ant-design-mobile-chart

说明

ant-design-mobile-chart 是为移动端开发的 react 图表组件库,图形语法底层基于F2 实现图形语法。 组件库具有轻量、灵活、易用的特点

安装

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

使用

import React, { Component } from 'react';
import { Chart, Line, Scale, Guide } 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;

chart