前言:
最近在技术群里面,总是有人在问这个股票图怎么做,有没有相关的三方库可以使用呢?其实我也想研究这类的项目,刚好在github上面遇到了一个制作K线图的库,叫做ikvStockChart,于是写了一个Demo,还是写这篇博客跟大家仔细讲一下把。虽然官方文档也有,但不是很清晰。于是我整理了这篇博客,让大家一看就明白使用的正确姿势。
OK,Show me your code!Go!Go!Go!
先来看一波效果图:

一、新版本功能介绍(当前最新版本:0.1.5)
ikvStockChart一个简单的Android图表库,支持时间线,k线,macd,kdj,rsi,boll索引和交互式手势操作,包括左右滑动刷新,缩放,突出显示。
1. 支持在 XML 布局文件和代码中设置各个线条颜色、大小配置
2. 支持左滑、右滑加载
3. 支持长按高亮、短按点击、双指缩放事件
4. 支持 fling 滑动
5. 支持 MACD、RSI、KDJ、BOLL 四个指标
6. 支持自定义的指标显示方式
ikvStockChart这个库附带的sample有:默认左滑右滑加载、禁用左滑右滑加载、多个指标共同联动显示、在 Fragment 中使用、带有下拉刷新的需求中使用、横竖屏切换(自动旋转)、简单分时图
二、基本使用
1. 添加依赖
compile 'com.wordplat:ikvStockChart:0.1.5'
2. 布局里面设置
<com.wordplat.ikvstockchart.InteractiveKLineLayout
android:id="@+id/kLineLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
3. 代码里面使用
比如:
final EntrySet entrySet = new EntrySet();
entrySet.addEntry(new Entry(...));
kLineLayout.getKLineView().setEntrySet(entrySet);
kLineLayout.getKLineView().notifyDataSetChanged();
kLineLayout.getKLineView().setKLineHandler(new KLineHandler() {
@Override
public void onLeftRefresh() {
kLineLayout.getKLineView().refreshComplete();
}
@Override
public void onRightRefresh() {
kLineLayout.getKLineView().refreshComplete();
}
@Override
public void onSingleTap(MotionEvent e, float x, float y) {
}
@Override
public void onDoubleTap(MotionEvent e, float x, float y) {
}
@Override
public void onHighlight(Entry entry, int entryIndex, float x, float y) {
}
@Override
public void onCancelHighlight() {
}
});
4. 设置各个线条颜色大小
比如:
SizeColor sizeColor = kLineLayout.getKLineView().getRender().getSizeColor();
sizeColor.setXXX();
5. ikvStockChart 支持 66 个属性配置,具体如下:
- 1.与轴、网格有关的属性和方法
xml布局 | Java代码 | 描述 | 从哪个版本起使用该属性 |
---|---|---|---|
app:xLabelSize | setXLabelSize | X 轴标签字符大小 | 0.1.0 |
app:xLabelColor | setXLabelColor | X 轴标签字符颜色 | 0.1.0 |
app:xLabelViewHeight | setXLabelViewHeight | X 轴 Label 区域的高度 | 0.1.0 |
app:yLabelSize | setYLabelSize | Y 轴标签字符大小 | 0.1.0 |
app:yLabelColor | setYLabelColor | Y 轴标签字符颜色 | 0.1.0 |
app:yLabelAlign | setYLabelAlign | Y 轴标签对齐方向 1: left, 2: right | 0.1.2 |
app:axisSize | setAxisSize | 轴线条大小 | 0.1.0 |
app:axisColor | setAxisColor | 轴线条颜色 | 0.1.0 |
app:gridSize | setGridSize | 网格线大小 | 0.1.0 |
app:gridColor | setGridColor | 网格线颜色 | 0.1.0 |
- 2.与高亮、MarkerView 有关的属性和方法
xml布局 | Java代码 | 描述 | 从哪个版本起使用该属性 |
---|---|---|---|
app:highlightSize | setHighlightSize | 高亮线条大小 | 0.1.0 |
app:highlightColor | setHighlightColor | 高亮线条颜色 | 0.1.0 |
app:markerBorderSize | setMarkerBorderSize | MarkerView 边框大小 | 0.1.0 |
app:markerBorderColor | setMarkerBorderColor | MarkerView 边框颜色 | 0.1.0 |
app:markerTextSize | setMarkerTextSize | MarkerView 字符大小 | 0.1.0 |
app:markerTextColor | setMarkerTextColor | MarkerView 字符颜色 | 0.1.0 |
app:xMarkerAlign | setXMarkerAlign | X 轴 MarkerView 对齐方向 | 0.1.3 |
app:yMarkerAlign | setYMarkerAlign | Y 轴 MarkerView 对齐方向 | 0.1.3 |
- 3.与分时图有关的属性和方法
xml布局 | Java代码 | 描述 | 从哪个版本起使用该属性 |
---|---|---|---|
app:timeLineSize | setTimeLineSize | 分时线大小 | 0.1.0 |
app:timeLineColor | setTimeLineColor | 分时线颜色 | 0.1.0 |
app:timeLineMaxCount | setTimeLineMaxCount | 分时图 entry 最多个数。注:此值与 entrySet 里的 entries.size() 意义不同,这里指 X 轴上最多能容纳多少个 entry | 0.1.4 |
- 4.与蜡烛图有关的属性和方法
xml布局 | Java代码 | 描述 | 从哪个版本起使用该属性 |
---|---|---|---|
app:candleBorderSize | setCandleBorderSize | 蜡烛图矩形边框大小 | 0.1.0 |
app:candleExtremumLabelSize | setCandleExtremumLabelSize | 蜡烛图极值字符大小 | 0.1.0 |
app:candleExtremumLableColor | setCandleExtremumLableColor | 蜡烛图极值字符颜色 | 0.1.0 |
app:shadowSize | setShadowSize | 影线大小 | 0.1.0 |
app:increasingColor | setIncreasingColor | 上涨颜色 | 0.1.0 |
app:decreasingColor | setDecreasingColor | 下跌颜色 | 0.1.0 |
app:neutralColor | setNeutralColor | 不涨不跌颜色 | 0.1.0 |
app:portraitDefaultVisibleCount | setPortraitDefaultVisibleCount | 竖屏默认显示多少个蜡烛图 | 0.1.0 |
app:zoomInTimes | setZoomInTimes | 最多放大次数 | 0.1.0 |
app:zoomOutTimes | setZoomOutTimes | 最多缩小次数 | 0.1.0 |
app:increasingStyle | setIncreasingStyle | 上涨蜡烛图填充样式。默认实心 | 0.1.4 |
app:decreasingStyle | setDecreasingStyle | 下跌蜡烛图填充样式,默认实心 | 0.1.4 |
- 5.与股票指标有关的属性和方法
xml布局 | Java代码 | 描述 | 从哪个版本起使用该属性 |
---|---|---|---|
app:maLineSize | setMaLineSize | MA 平均线大小 | 0.1.0 |
app:ma5Color | setMa5Color | MA5 平均线颜色 | 0.1.0 |
app:ma10Color | setMa10Color | MA10 平均线颜色 | 0.1.0 |
app:ma20Color | setMa20Color | MA20 平均线颜色 | 0.1.0 |
app:bollLineSize | setBollLineSize | BOLL 线条大小 | 0.1.0 |
app:bollMidLineColor | setBollMidLineColor | BOLL MID 线条颜色 | 0.1.0 |
app:bollUpperLineColor | setBollUpperLineColor | BOLL UPPER 线条颜色 | 0.1.0 |
app:bollLowerLineColor | setBollLowerLineColor | BOLL LOWER 线条颜色 | 0.1.0 |
app:kdjLineSize | setKdjLineSize | KDJ 线条大小 | 0.1.0 |
app:kdjKLineColor | setKdjKLineColor | KDJ K 线条颜色 | 0.1.0 |
app:kdjDLineColor | setKdjDLineColor | KDJ D 线条颜色 | 0.1.0 |
app:kdjJLineColor | setKdjJLineColor | KDJ J 线条颜色 | 0.1.0 |
app:macdLineSize | setMacdLineSize | MACD 两条线大小 | 0.1.0 |
app:macdHighlightTextColor | setMacdHighlightTextColor | 高亮的 MACD 字符颜色 | 0.1.0 |
app:deaLineColor | setDeaLineColor | DEA 线条颜色 | 0.1.0 |
app:diffLineColor | setDiffLineColor | DIFF 线条颜色 | 0.1.0 |
app:rsiLineSize | setRsiLineSize | RSI 线条大小 | 0.1.0 |
app:rsi1LineColor | setRsi1LineColor | RSI 第一条线颜色 | 0.1.0 |
app:rsi2LineColor | setRsi2LineColor | RSI 第二条线颜色 | 0.1.0 |
app:rsi3LineColor | setRsi3LineColor | RSI 第三条线颜色 | 0.1.0 |
app:maTextSize | setMaTextSize | MA 字符大小 | 0.1.0 |
app:maTextColor | setMaTextColor | MA 字符颜色 | 0.1.0 |
app:bollTextSize | setBollTextSize | BOLL 字符大小 | 0.1.0 |
app:bollTextColor | setBollTextColor | BOLL 字符颜色 | 0.1.0 |
app:kdjTextSize | setKdjTextSize KDJ | 字符大小 | 0.1.0 |
app:kdjTextColor | setKdjTextColor | KDJ 字符颜色 | 0.1.0 |
app:macdTextSize | setMacdTextSize | MACD 字符大小 | 0.1.0 |
app:macdTextColor | setMacdTextColor | MACD 字符颜色 | 0.1.0 |
app:rsiTextSize | setRsiTextSize RSI | 字符大小 | 0.1.0 |
app:rsiTextColor | setRsiTextColor | RSI 字符颜色 | 0.1.0 |
- 6.其它
xml布局 | Java代码 | 描述 | 从哪个版本起使用该属性 |
---|---|---|---|
app:loadingTextSize | setLoadingTextSize | loading 字符大小 | 0.1.0 |
app:loadingTextColor | setLoadingTextColor | loading 字符颜色 | 0.1.0 |
app:loadingText | setLoadingText | loading 字符 | 0.1.0 |
app:errorTextSize | setErrorTextSize | error 字符大小 | 0.1.0 |
app:errorTextColor | setErrorTextColor | error 字符颜色 | 0.1.0 |
app:errorText | setErrorText | error 字符 | 0.1.0 |
网友评论
关于缩放优化修改了
com.wordplat.ikvstockchart.InteractiveKLineView.java
的onTouchEvent() 方法
case MotionEvent.ACTION_POINTER_DOWN: 事件中修改
..mSavedMatrix.set(render.getMatrixZoom());//保存矩阵
..mSavedXDist = getXDist(e);// 记录最后一次 x轴 两点的距离
case MotionEvent.ACTION_MOVE: 事件中修改
..if(onDoubleFingerPress){
....float xDist = getXDist(e);
....float scaleX = xDist / mSavedXDist; // x轴变化的比例
....mSavedXDist = xDist;// 记录 最后一次 x轴 两点的距离
....if (scaleX != 1) {
......mSavedMatrix.postScale(scaleX, 1f);//scaleX < 1 缩小 , scaleX > 1 放大 ,scaleX != 1 不变化
......render.setMatrixZoom(mSavedMatrix);
......invalidate();
....}
..}
PS:setMatrixZoom() 和 getMatrixZoom()方法是获取com.wordplat.ikvstockchart.render.AbstractRender.java中的matrixTouch// 缩放和平移矩阵
希望博主,更加完善这个股票行情画图library。
Ps:QQ563084073,微信也是QQ,欢迎骚扰!
蜡烛图还有美国线、收盘线三种形态,其绑定的指标也是有几种。
缩放和拓展性 可以参考MPAndroidChart。
MT4上 可以再图上手动画图,并且与行情绑定。
还有一个更高级的,金十数据的交易侠APP用cocos2dx写的。
真的写的很好!
在哪里高就?
到时候借鉴一部分源码,不介意吧