ant-design / Ant Design Mobile Chart
Ant Design Mobile Chart based on F2
Stars: ✭ 100
Programming Languages
javascript
184084 projects - #8 most used programming language
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;
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].