# ant-design-mobile-chart

> react移动端图表库

Latest version **1.2.2** (published 2020-06-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install ant-design-mobile-chart
pnpm add ant-design-mobile-chart
yarn add ant-design-mobile-chart
bun add ant-design-mobile-chart
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2020-06-13 |
| First published | 2018-08-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 690.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 102 |
| Author | cycgit |
| Maintainers | cycok |
| Keywords | chart, react, f2 |

## Links

- npm: https://www.npmjs.com/package/ant-design-mobile-chart
- Repository: https://github.com/ant-design/ant-design-mobile-chart
- Homepage: https://github.com/ant-design/ant-design-mobile-chart#readme
- Issues: https://github.com/ant-design/ant-design-mobile-chart/issues
- npm.io page: https://npm.io/package/ant-design-mobile-chart

## Dependencies (1)

- [@antv/f2](https://npm.io/package/@antv/f2.md) ~3.5.0

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.2.2 (latest) — 2020-06-13
- 1.2.1 — 2020-03-16
- 1.2.0 — 2020-03-16
- 1.1.3 — 2019-07-23
- 1.1.2 — 2019-07-23
- 1.1.1 — 2019-07-23
- 1.1.0 — 2019-07-23
- 1.0.1 — 2019-07-02
- 1.0.0-beta1 — 2019-07-02
- 0.1.9 — 2018-11-26
- 0.1.8 — 2018-10-01
- 0.1.7 — 2018-10-01
- 0.1.6 — 2018-09-30
- 0.1.5 — 2018-09-30
- 0.1.4 — 2018-08-20
- … 3 more at https://npm.io/package/ant-design-mobile-chart/versions

## README

# ant-design-mobile-chart

## 说明

`ant-design-mobile-chart` 是为移动端开发的 react 图表组件库，图形语法底层基于[F2](https://antv.alipay.com/zh-cn/f2/3.x/index.html) 实现图形语法。 组件库具有轻量、灵活、易用的特点

## 安装

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

## 使用

```jsx
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](https://gw.alipayobjects.com/zos/rmsportal/vzSGCkmkOIHlVBZbqoQA.png)

---
_Source: https://npm.io/package/ant-design-mobile-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._