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		虚线点位置