目錄
一步一步教你寫股票走勢(shì)圖——分時(shí)圖一（概述）
一步一步教你寫股票走勢(shì)圖——分時(shí)圖二（自定義xy軸）
一步一步教你寫股票走勢(shì)圖——分時(shí)圖三（對(duì)齊圖表、自定義柱狀圖高亮）
一步一步教你寫股票走勢(shì)圖——分時(shí)圖四（高亮聯(lián)動(dòng)）
一步一步教你寫股票走勢(shì)圖——分時(shí)圖五（自定義標(biāo)記）
demo更新地址https://github.com/AndroidJiang/StockChart
我們先看一下之前的效果圖：
圖表的兩邊明顯不對(duì)齊，右邊尤其明顯，左邊是因?yàn)槎紝懥俗鴺?biāo)，看起來不那么明顯，但是還是沒有對(duì)齊的。我們?cè)倏匆幌赂吡粒劬€圖的高亮樣式是我們想要的，而柱狀圖的高亮他將整個(gè)那根柱子黑色顯示了，但是卻不是我們要的那種效果，我們要的也是跟上面一樣的一根線效果，下面我們先來設(shè)計(jì)圖表的對(duì)齊。
對(duì)齊圖表
我們肯定得用到getViewPortHandler這個(gè)類，只想說一句，很牛逼的一個(gè)類，大家必須得看看里面的東西，基本上有關(guān)圖表的所有信息，你都能在它里面獲取到。
代碼：
/*設(shè)置量表對(duì)齊*/
private void setOffset() {
float lineLeft = lineChart.getViewPortHandler().offsetLeft();
float barLeft = barChart.getViewPortHandler().offsetLeft();
float lineRight = lineChart.getViewPortHandler().offsetRight();
float barRight = barChart.getViewPortHandler().offsetRight();
float offsetLeft, offsetRight;
/*注：setExtraLeft...函數(shù)是針對(duì)圖表相對(duì)位置計(jì)算，比如A表offLeftA=20dp,B表offLeftB=30dp,則A.setExtraLeftOffset(10),并不是30，還有注意單位轉(zhuǎn)換*/
if (barLeft < lineLeft) {
offsetLeft = Utils.convertPixelsToDp(lineLeft-barLeft);
barChart.setExtraLeftOffset(offsetLeft);
} else {
offsetLeft = Utils.convertPixelsToDp(barLeft-lineLeft);
lineChart.setExtraLeftOffset(offsetLeft);
}
/*注：setExtra...函數(shù)是針對(duì)圖表絕對(duì)位置計(jì)算，比如A表offRightA=20dp,B表offRightB=30dp,則A.setExtraLeftOffset(30),并不是10，還有注意單位轉(zhuǎn)換*/
if (barRight < lineRight) {
offsetRight = Utils.convertPixelsToDp(lineRight);
barChart.setExtraRightOffset(offsetRight);
} else {
offsetRight = Utils.convertPixelsToDp(barRight);
lineChart.setExtraRightOffset(offsetRight);
}
}
代碼很好理解，就不做詳細(xì)說明了，具體的坑我已經(jīng)寫在注釋中，這里感謝下天才木木的指正（單位轉(zhuǎn)換），我們直接看下效果吧。
圖表的對(duì)齊到此結(jié)束，下面我們介紹一下如何自定義柱狀圖的高亮。
自定義柱狀圖形狀以及高亮
這部分就很簡(jiǎn)單了，我們直接在源碼中修改即可。
- 形狀
我們要實(shí)現(xiàn)如下效果：
首先我們找到BarChartRenderer這個(gè)類，定位到drawDataSet方法，然后有這么一段代碼：
c.drawRect(buffer.buffer[j], buffer.buffer[j + 1], buffer.buffer[j + 2],
buffer.buffer[j + 3], mRenderPaint);
這就是畫的柱狀圖，我們?cè)谋容^粗，那么我們只要自己重畫它就ok啦！
我這邊將原來的柱狀圖寬度變成原來的1/3，
c.drawRect(buffer.buffer[j] + (buffer.buffer[j + 2] - buffer.buffer[j]) / 3, buffer.buffer[j + 1], buffer.buffer[j + 2] - (buffer.buffer[j + 2] - buffer.buffer[j]) / 3,
buffer.buffer[j + 3], mRenderPaint);
看下效果（為了便于查看，我改了顏色）：
- 高亮
同樣，我們找到drawHighlighted這個(gè)方法，重寫
/*重寫高亮*/
c.drawLine(mBarRect.centerX(), mViewPortHandler.getContentRect().bottom, mBarRect.centerX(), 0, mHighlightPaint);
// c.drawRect(mBarRect, mHighlightPaint);
上效果：
哦了，對(duì)齊圖表以及自定義柱狀圖這邊就結(jié)束了，下一篇將介紹下圖表高亮的聯(lián)動(dòng)，demo中已經(jīng)有了，有興趣的可以查看一下。
目錄
一步一步教你寫股票走勢(shì)圖——分時(shí)圖一（概述）
一步一步教你寫股票走勢(shì)圖——分時(shí)圖二（自定義xy軸）
一步一步教你寫股票走勢(shì)圖——分時(shí)圖三（對(duì)齊圖表、自定義柱狀圖高亮）
一步一步教你寫股票走勢(shì)圖——分時(shí)圖四（高亮聯(lián)動(dòng)）
一步一步教你寫股票走勢(shì)圖——分時(shí)圖五（自定義標(biāo)記）
demo更新地址https://github.com/AndroidJiang/StockChart
