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