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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知道一点点

bootstrap快速入门笔记(五)-文本元素类,各种标签,排版

2,全局元素被直接赋予font-size 设置为 14px,line-height 设置为 1.428,<p> (段落)元素还被设置了等于 1/2 行高(即 1...

11730
来自专栏小狼的世界

如何让高度、宽度不定的容器保持水平、垂直居中

这个题目似乎解决的办法很多,JS是最能够确保各种浏览器中一致性的,但是仍然可以使用CSS的方式来解决。这个问题分解为两个方面,第一解决左右居中的问题,第二解决上...

13520
来自专栏落花落雨不落叶

简单轮播图实现

342100
来自专栏木子昭的博客

<干货>5分钟快速回顾HTML CSS

一.html (一)标签类型 1.块元素(独占一行!即使通过css设置宽度width,也会占一行的位置) div(无语义) 列表 ur/ol/li 段落 ...

38790
来自专栏Python

CSS基础

CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 1 2 3 4 5 6 7 8 9 ''' ...

32670
来自专栏云端架构

【云端架构】前端必备“层叠样式表”精选

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD

443130
来自专栏前端说吧

css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

左侧nav栏目,要固定也要用fixed。不过固定定位的元素要想高度百分百,可以使用top+bottom对应方位值的拉伸效果:

42220
来自专栏HTML5学堂

详析获取标签

在前几期的文章当中,我们学习了JS的基础语法,它是我们学习其它知识点的重要前提。小编也与大家分享了JS逻辑与DOM的相结合,并带着大家去实现了一些简单的页面交互...

33190
来自专栏用户2442861的专栏

css display table-cell

display 属性规定元素应该生成的框的类型,用的最多的就是display:block;显示 display:none;隐藏。

34210
来自专栏Pythonista

css基础

    行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

15020

扫码关注云+社区

领取腾讯云代金券