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 軸标簽字元顔色
app:xLabelViewHeight	setXLabelViewHeight	X 軸 Label 區域的高度
app:yLabelSize	setYLabelSize	Y 軸标簽字元大小
app:yLabelColor	setYLabelColor	Y 軸标簽字元顔色
app:yLabelAlign	setYLabelAlign	Y 軸标簽對齊方向 1: left, 2: right	0.1.2
app:axisSize	setAxisSize	軸線條大小
app:axisColor	setAxisColor	軸線條顔色
app:gridSize	setGridSize	網格線大小
app:gridColor	setGridColor	網格線顔色

• 2.與高亮、MarkerView 有關的屬性和方法

app:highlightSize	setHighlightSize	高亮線條大小
app:highlightColor	setHighlightColor	高亮線條顔色
app:markerBorderSize	setMarkerBorderSize	MarkerView 邊框大小
app:markerBorderColor	setMarkerBorderColor	MarkerView 邊框顔色
app:markerTextSize	setMarkerTextSize	MarkerView 字元大小
app:markerTextColor	setMarkerTextColor	MarkerView 字元顔色
app:xMarkerAlign	setXMarkerAlign	X 軸 MarkerView 對齊方向	0.1.3
app:yMarkerAlign	setYMarkerAlign	Y 軸 MarkerView 對齊方向

• 3.與分時圖有關的屬性和方法

app:timeLineSize	setTimeLineSize	分時線大小
app:timeLineColor	setTimeLineColor	分時線顔色
app:timeLineMaxCount	setTimeLineMaxCount	分時圖 entry 最多個數。注：此值與 entrySet 裡的 entries.size() 意義不同，這裡指 X 軸上最多能容納多少個 entry	0.1.4

• 4.與蠟燭圖有關的屬性和方法

app:candleBorderSize	setCandleBorderSize	蠟燭圖矩形邊框大小
app:candleExtremumLabelSize	setCandleExtremumLabelSize	蠟燭圖極值字元大小
app:candleExtremumLableColor	setCandleExtremumLableColor	蠟燭圖極值字元顔色
app:shadowSize	setShadowSize	影線大小
app:increasingColor	setIncreasingColor	上漲顔色
app:decreasingColor	setDecreasingColor	下跌顔色
app:neutralColor	setNeutralColor	不漲不跌顔色
app:portraitDefaultVisibleCount	setPortraitDefaultVisibleCount	豎屏預設顯示多少個蠟燭圖
app:zoomInTimes	setZoomInTimes	最多放大次數
app:zoomOutTimes	setZoomOutTimes	最多縮小次數
app:increasingStyle	setIncreasingStyle	上漲蠟燭圖填充樣式。預設實心
app:decreasingStyle	setDecreasingStyle	下跌蠟燭圖填充樣式，預設實心

• 5.與股票名額有關的屬性和方法

app:maLineSize	setMaLineSize	MA 平均線大小
app:ma5Color	setMa5Color	MA5 平均線顔色
app:ma10Color	setMa10Color	MA10 平均線顔色
app:ma20Color	setMa20Color	MA20 平均線顔色
app:bollLineSize	setBollLineSize	BOLL 線條大小
app:bollMidLineColor	setBollMidLineColor	BOLL MID 線條顔色
app:bollUpperLineColor	setBollUpperLineColor	BOLL UPPER 線條顔色
app:bollLowerLineColor	setBollLowerLineColor	BOLL LOWER 線條顔色
app:kdjLineSize	setKdjLineSize	KDJ 線條大小
app:kdjKLineColor	setKdjKLineColor	KDJ K 線條顔色
app:kdjDLineColor	setKdjDLineColor	KDJ D 線條顔色
app:kdjJLineColor	setKdjJLineColor	KDJ J 線條顔色
app:macdLineSize	setMacdLineSize	MACD 兩條線大小
app:macdHighlightTextColor	setMacdHighlightTextColor	高亮的 MACD 字元顔色
app:deaLineColor	setDeaLineColor	DEA 線條顔色
app:diffLineColor	setDiffLineColor	DIFF 線條顔色
app:rsiLineSize	setRsiLineSize	RSI 線條大小
app:rsi1LineColor	setRsi1LineColor	RSI 第一條線顔色
app:rsi2LineColor	setRsi2LineColor	RSI 第二條線顔色
app:rsi3LineColor	setRsi3LineColor	RSI 第三條線顔色
app:maTextSize	setMaTextSize	MA 字元大小
app:maTextColor	setMaTextColor	MA 字元顔色
app:bollTextSize	setBollTextSize	BOLL 字元大小
app:bollTextColor	setBollTextColor	BOLL 字元顔色
app:kdjTextSize	setKdjTextSize KDJ	字元大小
app:kdjTextColor	setKdjTextColor	KDJ 字元顔色
app:macdTextSize	setMacdTextSize	MACD 字元大小
app:macdTextColor	setMacdTextColor	MACD 字元顔色
app:rsiTextSize	setRsiTextSize RSI
app:rsiTextColor	setRsiTextColor	RSI 字元顔色

• 6.其它

app:loadingTextSize	setLoadingTextSize	loading 字元大小
app:loadingTextColor	setLoadingTextColor	loading 字元顔色
app:loadingText	setLoadingText	loading 字元
app:errorTextSize	setErrorTextSize	error 字元大小
app:errorTextColor	setErrorTextColor	error 字元顔色
app:errorText	setErrorText	error 字元