1.0.1-3 • Published 4 years ago
react-native-sumscope-kline
实现功能
缩略k线图
利率债图表
期货图表
Installation
npm install --save react-native-sumscope-kline
Usage example
import {ShrinkageKLineView,MarketKLineView} from 'react-native-sumscope-kline';
// ShrinkageKLineView
<ShrinkageKLineView
style={{ width: 200, height: 80 }}
data={this.state.lineData}
kLineWidth={1.0}
kLineColor={"#880000"}
addArrData={this.state.addData}
maxCount={200}
/>
// MarketKLineView
<MarketKLineView
style={{ width: 300, height: 180 }}
data={this.state.lineData}
kLineWidth={2}
kLineColor={"#F9C152"}
maxCount={240}
addArrData={this.state.addData}
onLinePointChanged={(e) => {console.log(e)}}
/>
<NationalDKLineView
style={{ width: width, height: width * 0.5, backgroundColor: '#121A19' }}
data={this.state.lineData}
lineType={"NationalDKLineView"}
kLineColor={"#F9C152"}
/>
ShrinkageKLineView Props
Prop | Type | Optional | Default | Description |
---|
data | array | Yes | [] | 初始显示数据 |
kLineWidth | float | Yes | | k线宽度 |
kLineColor | string | Yes | | k线显示颜色 |
maxCount | number | Yes | | 横向显示刻度总数 |
addArrData | array | Yes | [] | 增加数据 |
pointIndex | number | Yes | | 虚线点位置 |
MarketKLineView Props
Prop | Type | Optional | Default | Description |
---|
data | array | Yes | [] | 初始显示数据 |
kLineWidth | float | Yes | | k线宽度 |
kLineColor | string | Yes | | k线显示颜色 |
maxCount | number | Yes | | 横向显示刻度总数 |
addArrData | array | Yes | [] | 增加数据 |
onLinePointChanged | func | Yes | | 长按k线高亮所在k位置数据回调 |
NationalDKLineView Props
Prop | Type | Optional | Default | Description |
---|
lineType | string | Yes | | 图表类型 { NationalDKLineView:债券日k ; NationalTimeKLineView:债券分时 ; NationalDrGcTimeLine:DrGc分时 ; NationalDrGc30DLine :DrGc30日 ; BondTimeKLineView :债券详情-成交分时 ; Bond3MKLineView :债券详情-3M日线 ; Bond3MValKLineView :债券详情-3M估值} |
data | array | Yes | [] | 初始显示数据 |
kLineWidth | float | Yes | | k线宽度 |
kLineColor | string | Yes | | k线显示颜色 |
maxCount | number | Yes | | 横向显示刻度总数 |
addArrData | array | Yes | [] | 增加数据 |
onLinePointChanged | func | Yes | | 长按k线高亮所在k位置数据回调 |
pointIndex | number | Yes | | 虚线点位置 |