ChartContainer

使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/*分时图*/
<ChartContainer
style={{ flex: 1, paddingHorizontal: 10, paddingTop: StyleSheet.hairlineWidth, backgroundColor: Const.bgColor2 }}
data={timelineData.result}
horizontal={this.props.isHorizontal}
statusBarHeight={Const.statusBarHeight}
preClosedPrice={timelineData.lastClosePrice}
totalCount={1321}
xDateTicks={['06:00', '17:00', '04:00']}
chartType={'timeline'}
eventCaptures={['longPress', 'doublePress']}
plotState={plotState}
plotConfig={this._plotConfig}
onLoadMore={() => this._onLoadMore()}
onLongPress={this._onLongPress}
onDoublePress={this._onDoublePress}
>
{...children}
</ChartContainer>
/*五日图*/
<ChartContainer
style={{ flex: 1, paddingHorizontal: 10, paddingTop: StyleSheet.hairlineWidth, backgroundColor: Const.bgColor2 }}
data={fivedayData}
horizontal={this.props.isHorizontal}
statusBarHeight={Const.statusBarHeight}
preClosedPrice={this._lastClosePrice}
totalCount={1321 * 5}
xDateTicks={this._dateStrArray}
chartType={'fiveday'}
dataOffset={this.state.dataOffset}
eventCaptures={['longPress', 'doublePress']}
plotState={plotState}
plotConfig={this._plotConfig}
onLongPress={this._onLongPress}
onDoublePress={this._onDoublePress}
>
{...children}
</ChartContainer>
/*K线图*/
<ChartContainer
style={{ flex: 1, paddingHorizontal: 10, paddingBottom: paddingBottom, paddingTop: StyleSheet.hairlineWidth, backgroundColor: Const.bgColor2 }}
data={klineData}
horizontal={this.props.isHorizontal}
statusBarHeight={Const.statusBarHeight}
chartType={'kline'}
indicators={this.state.indicators}
threshold={60}
domain={domain}
plotState={plotState}
plotConfig={this._plotConfig}
hasMore={hasMore}
onLoadMore={() => this._onLoadMore()}
updateDomain={(chartType, domain) => this._updateDomain(chartType, domain)}
updatePlotState={(plotState) => this._updatePlotState(plotState)}
eventCaptures={['pan', 'press', 'longPress', 'doublePress', 'pinch']}
onLongPress={this._onLongPress}
onPress={this._onPress}
onPan={this._onPan}
onDoublePress={this._onDoublePress}
>
{...children}
</ChartContainer>

props列表

属性 类型 参数 默认值 是否为必须 描述
chartType string 当前图表类型(timeline \ kline)
horizontal bool false 是否为横屏
statusBarHeight number 0 导航栏高度
dataOffset number 0 数据偏移量,主要用于不从起始位置开始的五日图
preClosedPrice string 昨日收盘价,假如为5日图,则为早一天的昨日收盘价
totalCount number 分时图、五日图的总数据量
xDateTicks array 分时图、五日图的横坐标数组
threshold number 加载更多阈值(K线左侧距离左边界的距离),一般设置为60
data array 图表原始数据
indicators object 图表技术指标
eventCaptures array [] 支持手势数组,假如不设置则不支持交互,支持手势种类(pan \ pinch \ press \ longPress \ doublePress)
domain object 数据显示区间,{start:XX, end:YY}
plotConfig object {spacing:2, barWidth:6} 图标配置
plotState object 图标状态{currScale:aa, currBarWidth:bb, currStep:cc, xGridGap:dd}
hasMore bool 是否有更多历史数据
onLoadMore function 加载更多历史数据
onDoublePress function 触发双击事件
onLongPress function (currentItem) 触发长按事件
onPan function (dx,dy) 滑动事件回调
updateDomain function (chartType, newDomain) 更新数据显示区间
updatePlotState function (newPlotState) 更新图标状态