目錄
一步一步教你寫股票走勢圖——分時圖一（概述）
一步一步教你寫股票走勢圖——分時圖二（自定義xy軸）
一步一步教你寫股票走勢圖——分時圖三（對齊圖表、自定義柱狀圖高亮）
一步一步教你寫股票走勢圖——分時圖四（高亮聯動）
一步一步教你寫股票走勢圖——分時圖五（自定義標記）

demo更新地址https://github.com/AndroidJiang/StockChart

我們先看一下之前的效果圖：

這里寫圖片描述

圖表的兩邊明顯不對齊，右邊尤其明顯，左邊是因為都寫了坐標，看起來不那么明顯，但是還是沒有對齊的。我們再看一下高亮，折線圖的高亮樣式是我們想要的，而柱狀圖的高亮他將整個那根柱子黑色顯示了，但是卻不是我們要的那種效果，我們要的也是跟上面一樣的一根線效果，下面我們先來設計圖表的對齊。

對齊圖表

我們肯定得用到getViewPortHandler這個類，只想說一句，很牛逼的一個類，大家必須得看看里面的東西，基本上有關圖表的所有信息，你都能在它里面獲取到。

代碼：

 /*設置量表對齊*/
    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...函數是針對圖表相對位置計算，比如A表offLeftA=20dp,B表offLeftB=30dp,則A.setExtraLeftOffset(10),并不是30，還有注意單位轉換*/
        if (barLeft < lineLeft) {
            offsetLeft = Utils.convertPixelsToDp(lineLeft-barLeft);
            barChart.setExtraLeftOffset(offsetLeft);
        } else {
            offsetLeft = Utils.convertPixelsToDp(barLeft-lineLeft);
            lineChart.setExtraLeftOffset(offsetLeft);
        }
  /*注：setExtra...函數是針對圖表絕對位置計算，比如A表offRightA=20dp,B表offRightB=30dp,則A.setExtraLeftOffset(30),并不是10，還有注意單位轉換*/
        if (barRight < lineRight) {
            offsetRight = Utils.convertPixelsToDp(lineRight);
            barChart.setExtraRightOffset(offsetRight);
        } else {
            offsetRight = Utils.convertPixelsToDp(barRight);
            lineChart.setExtraRightOffset(offsetRight);
        }

    }

代碼很好理解，就不做詳細說明了，具體的坑我已經寫在注釋中，這里感謝下天才木木的指正（單位轉換），我們直接看下效果吧。

這里寫圖片描述

圖表的對齊到此結束，下面我們介紹一下如何自定義柱狀圖的高亮。

自定義柱狀圖形狀以及高亮

這部分就很簡單了，我們直接在源碼中修改即可。

• 形狀

我們要實現如下效果：

這里寫圖片描述

首先我們找到BarChartRenderer這個類，定位到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這個方法，重寫

 /*重寫高亮*/
                    c.drawLine(mBarRect.centerX(), mViewPortHandler.getContentRect().bottom, mBarRect.centerX(), 0, mHighlightPaint);
                   // c.drawRect(mBarRect, mHighlightPaint);

上效果：

這里寫圖片描述

哦了，對齊圖表以及自定義柱狀圖這邊就結束了，下一篇將介紹下圖表高亮的聯動，demo中已經有了，有興趣的可以查看一下。

目錄
一步一步教你寫股票走勢圖——分時圖一（概述）
一步一步教你寫股票走勢圖——分時圖二（自定義xy軸）
一步一步教你寫股票走勢圖——分時圖三（對齊圖表、自定義柱狀圖高亮）
一步一步教你寫股票走勢圖——分時圖四（高亮聯動）
一步一步教你寫股票走勢圖——分時圖五（自定義標記）

demo更新地址https://github.com/AndroidJiang/StockChart