目錄
一步一步教你寫股票走勢圖——分時(shí)圖一（概述）
一步一步教你寫股票走勢圖——分時(shí)圖二（自定義xy軸）
一步一步教你寫股票走勢圖——分時(shí)圖三（對齊圖表第岖、自定義柱狀圖高亮）
一步一步教你寫股票走勢圖——分時(shí)圖四（高亮聯(lián)動(dòng)）
一步一步教你寫股票走勢圖——分時(shí)圖五（自定義標(biāo)記）
demo更新地址https://github.com/AndroidJiang/StockChart
我們先看一下之前的效果圖：
圖表的兩邊明顯不對齊块差，右邊尤其明顯，左邊是因?yàn)槎紝懥俗鴺?biāo)燎潮，看起來不那么明顯喻鳄，但是還是沒有對齊的。我們再看一下高亮确封，折線圖的高亮樣式是我們想要的除呵，而柱狀圖的高亮他將整個(gè)那根柱子黑色顯示了再菊，但是卻不是我們要的那種效果，我們要的也是跟上面一樣的一根線效果颜曾，下面我們先來設(shè)計(jì)圖表的對齊纠拔。
對齊圖表
我們肯定得用到getViewPortHandler這個(gè)類，只想說一句泛豪，很牛逼的一個(gè)類稠诲，大家必須得看看里面的東西，基本上有關(guān)圖表的所有信息诡曙，你都能在它里面獲取到臀叙。
代碼：
/*設(shè)置量表對齊*/
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ù)是針對圖表相對位置計(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ù)是針對圖表絕對位置計(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)換）炸卑，我們直接看下效果吧既鞠。
圖表的對齊到此結(jié)束，下面我們介紹一下如何自定義柱狀圖的高亮盖文。
自定義柱狀圖形狀以及高亮
這部分就很簡單了嘱蛋，我們直接在源碼中修改即可。
- 形狀
我們要實(shí)現(xiàn)如下效果：
首先我們找到BarChartRenderer這個(gè)類五续，定位到drawDataSet方法洒敏，然后有這么一段代碼：
c.drawRect(buffer.buffer[j], buffer.buffer[j + 1], buffer.buffer[j + 2],
buffer.buffer[j + 3], mRenderPaint);
這就是畫的柱狀圖，我們原生的比較粗疙驾，那么我們只要自己重畫它就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);
上效果：
哦了扳肛，對齊圖表以及自定義柱狀圖這邊就結(jié)束了傻挂，下一篇將介紹下圖表高亮的聯(lián)動(dòng)，demo中已經(jīng)有了挖息，有興趣的可以查看一下金拒。
目錄
一步一步教你寫股票走勢圖——分時(shí)圖一（概述）
一步一步教你寫股票走勢圖——分時(shí)圖二（自定義xy軸）
一步一步教你寫股票走勢圖——分時(shí)圖三（對齊圖表、自定義柱狀圖高亮）
一步一步教你寫股票走勢圖——分時(shí)圖四（高亮聯(lián)動(dòng)）
一步一步教你寫股票走勢圖——分時(shí)圖五（自定義標(biāo)記）
demo更新地址https://github.com/AndroidJiang/StockChart
