美文网首页股票行情Android知识点和文章分享
10分钟学会ikvStockChart制作K线图(股票走势图)

10分钟学会ikvStockChart制作K线图(股票走势图)

作者: AWeiLoveAndroid | 来源:发表于2017-07-01 12:14 被阅读1368次

前言:
最近在技术群里面,总是有人在问这个股票图怎么做,有没有相关的三方库可以使用呢?其实我也想研究这类的项目,刚好在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

相关文章

网友评论

  • 哈哈哈xx:你好 还在不在
  • d26168ad953a:
    关于缩放优化修改了
    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。
    d26168ad953a:代码 仅供参考
    d26168ad953a:点.代表空格,简书把空格都过滤了,用点.方便阅读!
    Ps:QQ563084073,微信也是QQ,欢迎骚扰!
  • d26168ad953a:不过在指标这一块 实际中PC版有上千种指标。
    蜡烛图还有美国线、收盘线三种形态,其绑定的指标也是有几种。
    缩放和拓展性 可以参考MPAndroidChart。
    MT4上 可以再图上手动画图,并且与行情绑定。
    还有一个更高级的,金十数据的交易侠APP用cocos2dx写的。
    真的写的很好!
    在哪里高就?
    d26168ad953a:正在优化 行情画图这一块功能,之前是用MPAndroidChart 做的,MP太笨重了,各种变态需求的改动就很不适合,改源码也只是缓解了 一时的问题,在寻找处理,看到大神的股票画图,觉得很好,但是和这边实际还是有很大的出入。要改调整 不过思路很好。
    到时候借鉴一部分源码,不介意吧:smile:
    AWeiLoveAndroid::smile: 大佬 你有更好的解决方案吗 ?求大佬带路
  • 5038d14509f1:你好 请问在缩放的时候不是太灵敏 有点缩放不了的感觉 ,请问怎么处理
    AWeiLoveAndroid:额。。这个问题还没有仔细研究。
  • 5038d14509f1:很棒,学习了

本文标题:10分钟学会ikvStockChart制作K线图(股票走势图)

本文链接:https://www.haomeiwen.com/subject/vvywcxtx.html