原文鏈接：http://www.reibang.com/p/e2c0c8a31b09
最開始我是打算用自定義View來實(shí)現(xiàn)這個(gè)功能的蹋绽，都繪制得差不多了，但是在滑動(dòng)手勢處理并村，和縮放眠副，還有x軸的時(shí)間顯現(xiàn)等一系列問題上久戰(zhàn)不下尼斧。最后還是在github上面找到了一個(gè)非常強(qiáng)大且start上2萬星星的圖表框架：MPAndroidChart
看首頁的各種圖片我就知道荚恶，繪制K線圖，我就靠它了磷支。其實(shí)網(wǎng)上我也看了很多博客和帖子谒撼，但是很多都過時(shí)了，而且有的重點(diǎn)并沒有說出來雾狈，比如如何繪制顯示區(qū)間的最大和最小值標(biāo)記廓潜。但是他們的方法和說明也給了我很多啟發(fā)：
Android安卓使用MPAndroidChart繪制K線圖和股票指標(biāo)
看了這些我相信你也能很好的繪制出來圖表了，但是這里用的MP庫估計(jì)是以前的善榛，很多方法不對辩蛋，且沒有說到我關(guān)心的如何繪制最大最小值標(biāo)記。廢話很多移盆，下面我們就開始代碼走起悼院。
首先我們知道由于我們繪制的K線圖包含了蠟燭圖和曲線圖，所以我們單獨(dú)的使用MP庫的CandleStickChart和LineChart是畫不出來我們想要的效果的味滞。不得不說MP庫的強(qiáng)大樱蛤，它提供了一種組合圖CombinedChart，它就非常強(qiáng)大了剑鞍，可以把5種圖（BAR, BUBBLE, LINE, CANDLE, SCATTER）都融合進(jìn)來昨凡，然后循環(huán)調(diào)用不同的渲染器來繪制就可以了。
但是我們要的最大和最小值標(biāo)記蚁署，卻不是MP能完成的便脊，所以我們需要繼承這個(gè)集合圖表來重寫對應(yīng)方法繪制。
我們要先理解它是如何繪制蠟燭圖的光戈，看CombinedChart源碼：
@Override
protected void init() {
super.init();
// Default values are not ready here yet
mDrawOrder = new DrawOrder[]{
DrawOrder.BAR, DrawOrder.BUBBLE, DrawOrder.LINE, DrawOrder.CANDLE, DrawOrder.SCATTER
};
setHighlighter(new CombinedHighlighter(this, this));
// Old default behaviour
setHighlightFullBarEnabled(true);
mRenderer = new CombinedChartRenderer(this, mAnimator, mViewPortHandler);
}
通過查看我們發(fā)現(xiàn)組合圖CombinedChart在init方法中初始化了一個(gè)CombinedChartRenderer渲染器哪痰，渲染器就是繪制圖表的關(guān)鍵。
mRenderer = new CombinedChartRenderer(this, mAnimator, mViewPortHandler);
那我們進(jìn)入到CombinedChartRenderer渲染器中去看看久妆，會(huì)發(fā)現(xiàn)
public CombinedChartRenderer(CombinedChart chart, ChartAnimator animator, ViewPortHandler viewPortHandler) {
super(animator, viewPortHandler);
mChart = new WeakReference<Chart>(chart);
createRenderers();
}
/**
* Creates the renderers needed for this combined-renderer in the required order. Also takes the DrawOrder into
* consideration.
*/
public void createRenderers() {
mRenderers.clear();
CombinedChart chart = (CombinedChart)mChart.get();
if (chart == null)
return;
DrawOrder[] orders = chart.getDrawOrder();
for (DrawOrder order : orders) {
switch (order) {
case BAR:
if (chart.getBarData() != null)
mRenderers.add(new BarChartRenderer(chart, mAnimator, mViewPortHandler));
break;
case BUBBLE:
if (chart.getBubbleData() != null)
mRenderers.add(new BubbleChartRenderer(chart, mAnimator, mViewPortHandler));
break;
case LINE:
if (chart.getLineData() != null)
mRenderers.add(new LineChartRenderer(chart, mAnimator, mViewPortHandler));
break;
case CANDLE:
if (chart.getCandleData() != null)
mRenderers.add(new CandleStickChartRenderer(chart, mAnimator, mViewPortHandler));
break;
case SCATTER:
if (chart.getScatterData() != null)
mRenderers.add(new ScatterChartRenderer(chart, mAnimator, mViewPortHandler));
break;
}
}
}
我們發(fā)現(xiàn)它的構(gòu)造方法中通過createRenderers()方法創(chuàng)建并添加了各種5大渲染器晌杰，它是根據(jù)當(dāng)前chart獲取數(shù)據(jù)的不同來創(chuàng)建不同的渲染器的，如 if (chart.getBarData() != null)
mRenderers.add(new BarChartRenderer(chart, mAnimator, mViewPortHandler));如果當(dāng)前獲取的Bar數(shù)據(jù)不為null筷弦，就創(chuàng)建相關(guān)BarChartRenderer渲染器肋演，并添加到這個(gè)mRenderers渲染器集合中。
那繪制數(shù)據(jù)是在哪里呢烂琴，我們還看到了：
@Override
public void drawData(Canvas c) {
for (DataRenderer renderer : mRenderers)
renderer.drawData(c);
}
這里我們就看到它通過循環(huán)遍歷出渲染器爹殊，并調(diào)用了renderer的drawData方法來繪制對應(yīng)的圖表的。
我們要繪制的最大值和最小值肯定就是蠟燭圖的最高值和最低值了 奸绷。所以我們需要去看蠟燭圖渲染器里面的方法梗夸，才知道蠟燭圖是如何繪制的。
進(jìn)入CandleStickChartRenderer看看号醉，會(huì)發(fā)現(xiàn)
@Override
public void drawData(Canvas c) {
CandleData candleData = mChart.getCandleData();
for (ICandleDataSet set : candleData.getDataSets()) {
if (set.isVisible())
drawDataSet(c, set);
}
}
我們發(fā)現(xiàn)CandleStickChartRenderer繪制數(shù)據(jù)就是得到當(dāng)前數(shù)據(jù)反症，然后循環(huán)得到ICandleDataSet辛块，如果是顯示的就繪制它，下面重點(diǎn)來了： drawDataSet(c, set);
@SuppressWarnings("ResourceAsColor")
protected void drawDataSet(Canvas c, ICandleDataSet dataSet) {
Transformer trans = mChart.getTransformer(dataSet.getAxisDependency());
float phaseY = mAnimator.getPhaseY();
float barSpace = dataSet.getBarSpace();
boolean showCandleBar = dataSet.getShowCandleBar();
mXBounds.set(mChart, dataSet);
mRenderPaint.setStrokeWidth(dataSet.getShadowWidth());
// draw the body
for (int j = mXBounds.min; j <= mXBounds.range + mXBounds.min; j++) {
// get the entry
CandleEntry e = dataSet.getEntryForIndex(j);
if (e == null)
continue;
final float xPos = e.getX();
final float open = e.getOpen();
final float close = e.getClose();
final float high = e.getHigh();
final float low = e.getLow();
if (showCandleBar) {
// calculate the shadow
mShadowBuffers[0] = xPos;
mShadowBuffers[2] = xPos;
mShadowBuffers[4] = xPos;
mShadowBuffers[6] = xPos;
if (open > close) {
mShadowBuffers[1] = high * phaseY;
mShadowBuffers[3] = open * phaseY;
mShadowBuffers[5] = low * phaseY;
mShadowBuffers[7] = close * phaseY;
} else if (open < close) {
mShadowBuffers[1] = high * phaseY;
mShadowBuffers[3] = close * phaseY;
mShadowBuffers[5] = low * phaseY;
mShadowBuffers[7] = open * phaseY;
} else {
mShadowBuffers[1] = high * phaseY;
mShadowBuffers[3] = open * phaseY;
mShadowBuffers[5] = low * phaseY;
mShadowBuffers[7] = mShadowBuffers[3];
}
trans.pointValuesToPixel(mShadowBuffers);
// draw the shadows
if (dataSet.getShadowColorSameAsCandle()) {
if (open > close)
mRenderPaint.setColor(
dataSet.getDecreasingColor() == ColorTemplate.COLOR_NONE ?
dataSet.getColor(j) :
dataSet.getDecreasingColor()
);
else if (open < close)
mRenderPaint.setColor(
dataSet.getIncreasingColor() == ColorTemplate.COLOR_NONE ?
dataSet.getColor(j) :
dataSet.getIncreasingColor()
);
else
mRenderPaint.setColor(
dataSet.getNeutralColor() == ColorTemplate.COLOR_NONE ?
dataSet.getColor(j) :
dataSet.getNeutralColor()
);
} else {
mRenderPaint.setColor(
dataSet.getShadowColor() == ColorTemplate.COLOR_NONE ?
dataSet.getColor(j) :
dataSet.getShadowColor()
);
}
mRenderPaint.setStyle(Paint.Style.STROKE);
c.drawLines(mShadowBuffers, mRenderPaint);
// calculate the body
mBodyBuffers[0] = xPos - 0.5f + barSpace;
mBodyBuffers[1] = close * phaseY;
mBodyBuffers[2] = (xPos + 0.5f - barSpace);
mBodyBuffers[3] = open * phaseY;
trans.pointValuesToPixel(mBodyBuffers);
// draw body differently for increasing and decreasing entry
if (open > close) { // decreasing
if (dataSet.getDecreasingColor() == ColorTemplate.COLOR_NONE) {
mRenderPaint.setColor(dataSet.getColor(j));
} else {
mRenderPaint.setColor(dataSet.getDecreasingColor());
}
mRenderPaint.setStyle(dataSet.getDecreasingPaintStyle());
c.drawRect(
mBodyBuffers[0], mBodyBuffers[3],
mBodyBuffers[2], mBodyBuffers[1],
mRenderPaint);
} else if (open < close) {
if (dataSet.getIncreasingColor() == ColorTemplate.COLOR_NONE) {
mRenderPaint.setColor(dataSet.getColor(j));
} else {
mRenderPaint.setColor(dataSet.getIncreasingColor());
}
mRenderPaint.setStyle(dataSet.getIncreasingPaintStyle());
c.drawRect(
mBodyBuffers[0], mBodyBuffers[1],
mBodyBuffers[2], mBodyBuffers[3],
mRenderPaint);
} else { // equal values
if (dataSet.getNeutralColor() == ColorTemplate.COLOR_NONE) {
mRenderPaint.setColor(dataSet.getColor(j));
} else {
mRenderPaint.setColor(dataSet.getNeutralColor());
}
c.drawLine(
mBodyBuffers[0], mBodyBuffers[1],
mBodyBuffers[2], mBodyBuffers[3],
mRenderPaint);
}
} else {
mRangeBuffers[0] = xPos;
mRangeBuffers[1] = high * phaseY;
mRangeBuffers[2] = xPos;
mRangeBuffers[3] = low * phaseY;
mOpenBuffers[0] = xPos - 0.5f + barSpace;
mOpenBuffers[1] = open * phaseY;
mOpenBuffers[2] = xPos;
mOpenBuffers[3] = open * phaseY;
mCloseBuffers[0] = xPos + 0.5f - barSpace;
mCloseBuffers[1] = close * phaseY;
mCloseBuffers[2] = xPos;
mCloseBuffers[3] = close * phaseY;
trans.pointValuesToPixel(mRangeBuffers);
trans.pointValuesToPixel(mOpenBuffers);
trans.pointValuesToPixel(mCloseBuffers);
// draw the ranges
int barColor;
if (open > close)
barColor = dataSet.getDecreasingColor() == ColorTemplate.COLOR_NONE
? dataSet.getColor(j)
: dataSet.getDecreasingColor();
else if (open < close)
barColor = dataSet.getIncreasingColor() == ColorTemplate.COLOR_NONE
? dataSet.getColor(j)
: dataSet.getIncreasingColor();
else
barColor = dataSet.getNeutralColor() == ColorTemplate.COLOR_NONE
? dataSet.getColor(j)
: dataSet.getNeutralColor();
mRenderPaint.setColor(barColor);
c.drawLine(
mRangeBuffers[0], mRangeBuffers[1],
mRangeBuffers[2], mRangeBuffers[3],
mRenderPaint);
c.drawLine(
mOpenBuffers[0], mOpenBuffers[1],
mOpenBuffers[2], mOpenBuffers[3],
mRenderPaint);
c.drawLine(
mCloseBuffers[0], mCloseBuffers[1],
mCloseBuffers[2], mCloseBuffers[3],
mRenderPaint);
}
}
}
這個(gè)就是繪制的蠟燭圖的主要方法了惰帽，但是這個(gè)方法200行太長了點(diǎn)憨降，我們只看關(guān)鍵會(huì)發(fā)現(xiàn)這個(gè)mXBounds，這個(gè)是什么東西呢该酗？帶著疑問我們先看一下mXBounds授药，發(fā)現(xiàn)它是CandleStickChartRenderer的父類的父類BarLineScatterCandleBubbleRenderer的一個(gè)包級對象：
protected class XBounds {
/**
* minimum visible entry index
*/
public int min;
/**
* maximum visible entry index
*/
public int max;
/**
* range of visible entry indices
*/
public int range;
/**
* Calculates the minimum and maximum x values as well as the range between them.
*
* @param chart
* @param dataSet
*/
public void set(BarLineScatterCandleBubbleDataProvider chart, IBarLineScatterCandleBubbleDataSet dataSet) {
float phaseX = Math.max(0.f, Math.min(1.f, mAnimator.getPhaseX()));
float low = chart.getLowestVisibleX();
float high = chart.getHighestVisibleX();
Entry entryFrom = dataSet.getEntryForXValue(low, Float.NaN, DataSet.Rounding.DOWN);
Entry entryTo = dataSet.getEntryForXValue(high, Float.NaN, DataSet.Rounding.UP);
min = entryFrom == null ? 0 : dataSet.getEntryIndex(entryFrom);
max = entryTo == null ? 0 : dataSet.getEntryIndex(entryTo);
range = (int) ((max - min) * phaseX);
}
}
我們看到這個(gè)類包含了最大，最小和范圍三個(gè)屬性呜魄，聯(lián)想一下悔叽，難道它就是我們滾動(dòng)圖表顯示的最大值，最小值爵嗅，范圍娇澎。我們在
// draw the body
for (int j = mXBounds.min; j <= mXBounds.range + mXBounds.min; j++) {
// get the entry
CandleEntry e = dataSet.getEntryForIndex(j);
}
這個(gè)循環(huán)里面打印一下蠟燭圖對象數(shù)據(jù)CandleEntry的最高和最低，發(fā)現(xiàn)睹晒，還真是隨著視圖滾動(dòng)趟庄，最大值和最小值也是一直在變化的！既然繪制是在這里的伪很，那么就可用通過獲取最大和最小值得CandleEntry對象戚啥，從而拿到對應(yīng)的x值和y值，來繪制锉试！
所以我們在自定義的KLineCombinedChart的onDraw方法中來繪制就可以了猫十，
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
setMaxMinMarker(canvas);
}
/**
* 設(shè)置最大值蠟燭圖標(biāo)記
* @param canvas
*/
public void setMaxMinMarker(Canvas canvas) {
CandleData candleData = this.getCandleData();
if (candleData!=null)for (ICandleDataSet set : candleData.getDataSets()) {
if (set.isVisible())drawMaxMinCandleMarker(canvas, set);
}
}
/**
* 繪制最大最小值蠟燭圖標(biāo)記
* @param c
* @param dataSet
*/
protected void drawMaxMinCandleMarker(Canvas c, ICandleDataSet dataSet) {
Transformer trans = this.getTransformer(dataSet.getAxisDependency());
float phaseY = mAnimator.getPhaseY();
float barSpace = dataSet.getBarSpace();
mXBounds.set(this, dataSet);
float maxFloat = Float.MIN_VALUE;
float minFloat = Float.MAX_VALUE;
CandleEntry maxEntry = null;
CandleEntry minEntry = null ;
for (int j = mXBounds.min; j <= mXBounds.range + mXBounds.min; j++) {
// get the entry
CandleEntry e = dataSet.getEntryForIndex(j);
if (e == null) continue;
final float high = e.getHigh();
final float low = e.getLow();
//求最大值和最小值
if (high>maxFloat){
maxEntry = e;
maxFloat = high;
}
if (low<minFloat){
minEntry = e;
minFloat = low;
}
}
L.i("最大值=="+maxFloat+" 最小值=="+minFloat);
if (maxEntry!=null){
final float xPos = maxEntry.getX();
final float open = maxEntry.getOpen();
final float close = maxEntry.getClose();
final float high = maxEntry.getHigh();
final float low = maxEntry.getLow();
mBodyBuffers[0] = xPos - 0.5f + barSpace;
mBodyBuffers[1] = close * phaseY;
mBodyBuffers[2] = (xPos + 0.5f - barSpace);
mBodyBuffers[3] = open * phaseY;
trans.pointValuesToPixel(mBodyBuffers);
float left = mBodyBuffers[0];
float top = mBodyBuffers[3];
float right = mBodyBuffers[2];
float bottom = mBodyBuffers[1];
float x = left+(right-left)/2;
int textWidth = Utils.calcTextWidth(paintWhite, "" + maxFloat);
int textHeight = Utils.calcTextHeight(paintWhite, "" + maxFloat);
int triangleWidth=24;
Path path = new Path();
path.moveTo(x,mViewPortHandler.contentTop()-1);
path.lineTo(x+triangleWidth+1,mViewPortHandler.contentTop()-1);
path.lineTo(x+triangleWidth+1,mViewPortHandler.contentTop()-textHeight*2-1);
path.close();
//繪制三角形，矩形呆盖，文字
c.drawPath(path,paintRed);
c.drawRect(x+triangleWidth,mViewPortHandler.contentTop()-textHeight*2-1,x+textWidth+8+triangleWidth,mViewPortHandler.contentTop()-1,paintRed);
c.drawText(""+maxFloat,x+4+triangleWidth,mViewPortHandler.contentTop()-textHeight/2-1,paintWhite);
}
if (minEntry!=null){
final float xPos = minEntry.getX();
final float open = minEntry.getOpen();
final float close = minEntry.getClose();
final float high = minEntry.getHigh();
final float low = minEntry.getLow();
mBodyBuffers[0] = xPos - 0.5f + barSpace;
mBodyBuffers[1] = low * phaseY;
mBodyBuffers[2] = (xPos + 0.5f - barSpace);
mBodyBuffers[3] = open * phaseY;
trans.pointValuesToPixel(mBodyBuffers);
float left = mBodyBuffers[0];
float top = mBodyBuffers[3];
float right = mBodyBuffers[2];
float bottom = mBodyBuffers[1];
float x = left+(right-left)/2;
int textWidth = Utils.calcTextWidth(paintWhite, "" + minFloat);
int textHeight = Utils.calcTextHeight(paintWhite, "" + minFloat);
int triangleWidth=23;
float v = mViewPortHandler.contentBottom() - bottom;
Path path = new Path();
path.moveTo(x,bottom);
path.lineTo(x+triangleWidth+1,bottom);
path.lineTo(x+triangleWidth+1,bottom+textHeight*2);
path.close();
//繪制三角形拖云，矩形，文字
c.drawPath(path,paintGreen);
c.drawRect(x+triangleWidth,bottom,x+textWidth+8+triangleWidth,bottom+textHeight*2,paintGreen);
c.drawText(""+minFloat,x+4+triangleWidth,bottom+textHeight+textHeight/2,paintWhite);
}
}
提示：可能有的同學(xué)發(fā)現(xiàn)XBounds這個(gè)對象無法提取出來应又，那么我們仿照源碼中的XBounds新建一個(gè)這樣的對象就可以了：
protected XBounds mXBounds = new XBounds();
/**
* Class representing the bounds of the current viewport in terms of indices in the values array of a DataSet.
*/
protected class XBounds {
/**
* minimum visible entry index
*/
public int min;
/**
* maximum visible entry index
*/
public int max;
/**
* range of visible entry indices
*/
public int range;
/**
* Calculates the minimum and maximum x values as well as the range between them.
*
* @param chart
* @param dataSet
*/
public void set(BarLineScatterCandleBubbleDataProvider chart, IBarLineScatterCandleBubbleDataSet dataSet) {
float phaseX = Math.max(0.f, Math.min(1.f, mAnimator.getPhaseX()));
float low = chart.getLowestVisibleX();
float high = chart.getHighestVisibleX();
Entry entryFrom = dataSet.getEntryForXValue(low, Float.NaN, DataSet.Rounding.DOWN);
Entry entryTo = dataSet.getEntryForXValue(high, Float.NaN, DataSet.Rounding.UP);
min = entryFrom == null ? 0 : dataSet.getEntryIndex(entryFrom);
max = entryTo == null ? 0 : dataSet.getEntryIndex(entryTo);
range = (int) ((max - min) * phaseX);
}
}
這樣就可以繪制出最大最小值的標(biāo)記了宙项，最后上一張效果圖：
QQ圖片20180314182221.png
下一章我將給大家介紹如何繪制選中后的高亮?xí)r間和右側(cè)y軸標(biāo)記，敬請期待株扛。杉允。。
