一. 簡介及整合

1.簡介

該開源庫可完成線形圖、柱狀圖、餅狀圖等等，具體顯示效果可參考下圖：

2. 整合到專案中的三種方法

這裡將hellocharts開源庫整合到自己的專案中，有如下3中方法

• 1 直接在app 的build.gradle中新增依賴，多適用於Android Studio

dependencies{
compile 'com.github.lecho:hellocharts-library:[email protected]' 
}

• 3 去github上下載Demo原始碼，其中有依賴的Library，新增module到專案中。

3. 三種方法稍作比較：

第一種和第二種型別相同，匯入比較簡單，但是定製性不高！個人比較推薦第三種，匯入Library到自己專案中，後續可根據自己特殊要求修改原始碼，但是我在匯入時出現了一些問題，下面詳細講解一下問題和解決方法。

4.匯入Library方法詳解：

（1）. 在AS專案中import新增module（也就是hellocharts-library）進來，AS會自動開始編譯，於是第一個錯誤出現：

（2）. 開啟hellocharts-library的build.gradle檔案，恍然大悟， 由於這個Library是官網提供的demo裡面的，所以一些配置寫的是特定常量數值，而匯入我們的專案後並不能識別出來，所以修改即可，如下圖：

這裡可以看出，參考專案中app下的build.gradle檔案，將編譯版本、sdk版本換成自己本地的即可，然後還有一些版本號、版本名字，這些不是太重要，隨便填即可。（我寫的是1）然後再次編譯。

（3）. 編譯完成後，異常再次出現：

這個錯誤在匯入github上的library時經常出現，原因就是

library has gradle tasks for uploading to the Maven repository that require some properties to be set for the gradle environment, in your project you don’t need/want that.

library中的gradle會載入Maven 庫，所以它要求在gradle環境中設定一些屬性。（若對gradle不熟悉的無須深究）而解決方法就是找到library的build.gradle中的apply引用，將apply關鍵詞後是 from 的引用去掉即可。

再次編譯，即可成功，親測有效。總結來說，在匯入library時，需要修改library中的build.gradle檔案，主要修改為：修改常量配置為app配置 和 去掉不必要gradle屬性。

二. 柱形圖使用教學

關於Demo，官網其實給出的例子很詳細，但是仔細看下來註釋非常少，著實有些晦澀難懂，特別是初學者，所以這裡我建議一個網址，這位coder自己改寫了demo，更是直接譯成了中文版，福音~
中文版介紹官方例子

廢話不多說，先上效果圖，如上所示。既然是新手教學，那麼首先要完成最基本的柱狀圖顯示：

1. xml佈局

直接使用對應的控制元件，程式碼如下

  <lecho.lib.hellocharts.view.ColumnChartView
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:layout_margin="10dp"/>

2. 資料填充

   /*========== 資料相關 ==========*/
    private ColumnChartData mColumnChartData;    //柱狀圖資料

在介紹之前先重點提一個類ColumnChartData ，檢視這個類的字面意思可知ColumnChartData中含有所有與柱狀圖有關的資料，其中不管是柱子列表的值，還是座標抽的有關設定，總之，所有柱狀圖的設定都包含其中。試想，當我們將這個類的資料都填充好後，最後只需將資料設定到view中，大功即可告成，而現在的工作就是開始填充ColumnChartData：

（1）柱體列表資料設定

既然是柱體列表，那麼一定是ArrayList，主要是柱體資料這個類的認知，此類是Column，官方介紹是

Single column for ColumnChart. One column can be divided into multiple sub-columns(ColumnValues) especially for
stacked ColumnChart.

大意為：Column是柱狀圖的一個單列，而且一個單列柱體Column可以被分成多個子柱體SubcolumnValue。檢視Column類內部原始碼可知，一個Column物件也是由SubcolumnValue列表組成。對比示意圖如下：

經過上面的圖文講解後，得知在建立Column物件時，我們先要填充它的子柱體SubcolumnValue。之所以這樣設計也是為了滿足各式的需求，但是我這裡的需求暫時不涉及到子列，所以實現方法為上圖第二種，程式碼如下：

  /*========== 柱狀圖資料填充 ==========*/
        List<Column> columnList = new ArrayList<>(); //柱子列表
        List<SubcolumnValue> subcolumnValueList;     //子柱列表（即一個柱子，因為一個柱子可分為多個子柱）
        for (int i = 0; i < 7; ++i) {
            subcolumnValueList = new ArrayList<>();
            subcolumnValueList.add(new SubcolumnValue((float) Math.random() * 50f, ChartUtils.pickColor()));

            Column column = new Column(subcolumnValueList);
            columnList.add(column);
            }

        mColumnChartData = new ColumnChartData(columnList);               //設定資料

最後填充好柱體列表columnList，回想我一開始所說的，柱狀圖所有有關資料存放到ColumnChartData類，也就是以上程式碼最後一句，此時，柱體列表資料填充完畢。

（2）座標軸資料設定

往ColumnChartData類放置了柱體列表資料後，需要設定好座標軸資料，比較簡單，配有註釋，看程式碼即可：

     /*===== 座標軸相關設定 =====*/
        Axis axisX = new Axis();
        Axis axisY = new Axis().setHasLines(true);
        axisX.setName("Axis X");    //設定橫軸名稱
        axisY.setName("Axis Y");    //設定豎軸名稱
        mColumnChartData.setAxisXBottom(axisX); //設定橫軸
        mColumnChartData.setAxisYLeft(axisY);   //設定豎軸

        //以上所有設定的資料、座標配置都已存放到mColumnChartData中，接下來給mColumnChartView設定這些配置
        mColumnChartView.setColumnChartData(mColumnChartData);

三. 程式猿與PM的需求探索

以上完成後，恭喜你，新手教學成功，可以將程式跑到手機上，而效果就是我一開始展示的那樣，簡單的柱狀圖和座標顯示。突然，PM來了，看著這張圖不禁陷入了沉思，效果還行，可是達不到我理想的需求啊。

PM：你這不行…….

android程式猿：這不挺好看的嗎，紅紅綠綠的

PM：首先啊，你這座標名不符合實際，得改！橫軸下的名稱1.2.3.4誰看的懂啊，得改！這豎軸的最大值怎麼是39？這學生成績最高應該是100，得改！

android程式猿：恩…..似乎有些道理，第一：座標名上面的程式碼已經提到過了，就是一個setName，簡單！第二：需要修改橫座標的顯示值，那麼需要一組ArrayList設定橫座標值，應該不難。第三：可以看出，豎軸最大值是根據我們設定的值，選取最大的作為豎軸最大值，確實有些不妥，這裡設定一下豎軸最大值即可。好了，我去修改

PM：等會，還沒說完，雖然這個柱狀圖顯示效果不錯，但是每個柱體代表的具體數值最好能顯示出來，更加精確。

android程式猿：恩…..就是給每個柱體設定列標籤，顯示具體數值。瞭解了，再見

PM：誒誒誒，別走啊，還沒說完呢。柱體標籤實現好後，雖然起到了一個顯示的效果，但是互動方面並不達標，使用者肯定會點選相關的柱體，這是需要在介面上顯示具體的資料。

android程式猿：簡單，這不就是平常我們給View設定Click監聽嗎？雖然方法不同，但是性質是一樣的，然後………（我睜開卡姿蘭大眼睛45度角深情地望著PM的雙下巴）

PM：好的，誒，你怎麼還不去修改啊？

android程式猿：我…….以為你還有需求

PM：哎喲，還想我提，那我說啦

android程式猿：別別別，今天還想早點下班呢，下班一起吃飯去啊，走了走了

擼起袖子開始幹！

四. 新手進階教學

根據以上程式猿和PM愉快的交流，咳咳，我們來實現需求吧…….

1. 座標軸設定進階

• 自定義橫軸顯示值列表
• 設定豎軸最大值
• 修改座標名字

（1）自定義橫軸顯示值列表

關於自定義橫軸顯示值列表，官方在介紹Column柱體類的時候已經說明：

Note: you can set X value for columns or sub-columns, columns are by default indexed from 0 to numOfColumns-1
column index is used as column X value, so first column has X value 0, second clumn has X value 1 etc.
If you want to display AxisValue for given column you should initialize AxisValue with X value of that column.

大意是說橫軸的顯示值預設是從 0 ~ 柱體總數-1，如果你想使用自定義的橫軸顯示值，需要定義AxisValue集合，而這個類定義為軸，通常設定時需要結合其位置，所以最好在設定柱體列表值的迴圈中去處理：

    public final static String[] xValues = new String[]{"語文", "數學", "英語", "音樂", "科學", "體育"};


  /*========== 柱狀圖資料填充 ==========*/
        List<Column> columnList = new ArrayList<>(); //柱子列表
        List<SubcolumnValue> subcolumnValueList;     //子柱列表（即一個柱子，因為一個柱子可分為多個子柱）
        List<AxisValue> axisValues = new ArrayList<>();//自定義橫軸座標值
        for (int i = 0; i < xValues.length; ++i) {
            subcolumnValueList = new ArrayList<>();
            subcolumnValueList.add(new SubcolumnValue((float) Math.random() * 100f, ChartUtils.pickColor()));

            Column column = new Column(subcolumnValueList);
            columnList.add(column);

            //設定座標值
            axisValues.add(new AxisValue(i).setLabel(xValues[i]));
        }

    ......
    //將自定義x軸顯示值傳入建構函式
    Axis axisX = new Axis(axisValues); 

同柱體列表資料填充一樣，獲得填充好的axisValues集合，需要設定給相關軸，由於這是橫軸，所以在建立new橫軸時，需要將資料傳遞給建構函式。

（2）設定豎軸最大值

介紹之前我又要提到一個重要的類Viewport，定義如下：

Partial copy of android.graphics.Rect but here the top should be greater then the bottom. Viewport holds 4 float
coordinates for a chart extremes. The viewport is represented by the coordinates of its 4 edges (left, top, right,bottom).These fields can be accessed directly. Use width() and height() to retrieve the viewport’s width and height.

大意是Viewport類copy了android.graphics.Rect一部分，相當於一個矩形，但是這裡特別需要注意的是它的高必須大於底，右要大於左，可由四個邊的座標（左，上，下，右）表示，這些欄位可以直接訪問。 使用width（）和height（）來檢索視口的寬度和高度。

通俗的講，就把它當成這個圖表的外框，而這跟設定豎軸最大值有什麼干係呢？我的理解是：它有點類似於View，在柱狀圖資料設定好給mColumnChartView之後（此時，柱狀圖可以正常展示了)，我們可以獲取到Viewport的引用，因為mColumnChartView就是裝載在Viewport裡，然後修改它的top也就是豎軸最大值（當然其餘值也可以修改，暫時需求不涉及），這樣是否與View有點相似？

//法一：
        Viewport v = mColumnChartView.getMaximumViewport();
        v.top = 100;
        mColumnChartView.setCurrentViewport(v);
//法二：
        Viewport v = mColumnChartView.getCurrentViewport();
        v.top = 100;
        mColumnChartView.setMaximumViewport(v);
        mColumnChartView.setCurrentViewport(v);

以上則是實現程式碼，是不是簡單到吐血？但是摸索的過程是相反的…..

(tips : 我發現設定100，他顯示了最大，但100數值為出現，好像上部分被遮擋住了幾個畫素？不是很清楚，所以設定成103，比理想值稍大一點，效果可以完美顯示)

（3）座標軸其餘設定

• 設定線條 setHasLines
• 設定座標軸名稱 setName

/*===== 座標軸相關設定 =====*/
        Axis axisX = new Axis(); //將自定義x軸顯示值傳入建構函式
        Axis axisY = new Axis().setHasLines(true); //setHasLines是設定線條
        axisX.setName("Axis X");    //設定橫軸名稱
        axisY.setName("Axis Y");    //設定豎軸名稱

• 隱藏座標軸

            mColumnChartData.setAxisXBottom(null);
            mColumnChartData.setAxisYLeft(null);

2. 柱體設定進階

• 給每個柱體設定列標籤 setHasLabels(true)

  這個需求我們還是放到填充柱體資料的迴圈裡去完成，在每次建立填充好單個 Column柱體物件後，給它設定屬性setHasLabels(true)即可，程式碼如下：

     /*========== 柱狀圖資料填充 ==========*/
        List<Column> columnList = new ArrayList<>(); //柱子列表
        List<SubcolumnValue> subcolumnValueList;     //子柱列表（即一個柱子，因為一個柱子可分為多個子柱）
        List<AxisValue> axisValues = new ArrayList<>();
        for (int i = 0; i < xValues.length; ++i) {
            subcolumnValueList = new ArrayList<>();
            subcolumnValueList.add(new SubcolumnValue((float) Math.random() * 100f, ChartUtils.pickColor()));

            Column column = new Column(subcolumnValueList);
            columnList.add(column);
            column.setHasLabels(true);//☆☆☆☆☆設定列標籤

            //設定座標值
            axisValues.add(new AxisValue(i).setLabel(xValues[i]));
        }

• 點選時再顯示列標籤

        //只有當點選時才顯示列標籤
        column.setHasLabelsOnlyForSelected(true);       

3. 柱狀圖View監聽設定

同其它View設定監聽沒什麼不同，給View設定監聽方法為setOnValueTouchListener，值得注意的是這裡實現ColumnChartOnValueSelectListener只為View提供了兩種狀態時可進行的操作，那就是點選 和 未點選。而這裡我的實現需求只是在點選時Toast對應柱體的值，各位也可以在其中實現更完美的效果，程式碼如下：

        mColumnChartView.setOnValueTouchListener(new ValueTouchListener());

        private class ValueTouchListener implements ColumnChartOnValueSelectListener {

        @Override
        public void onValueSelected(int columnIndex, int subcolumnIndex, SubcolumnValue value) {
            Toast.makeText(ColumnActivity.this, xValues[columnIndex]+"成績 : " +
                    (int)value.getValue(),Toast.LENGTH_SHORT).show();
        }

            @Override
            public void onValueDeselected() {
                // TODO Auto-generated method stub

            }

        }

4. 相關類總結

根據以上的花式教學，可以看出柱狀體使用其實並不難，只是涉及到許多類的聯絡，初次學習確實有些晦澀難懂，在此將涉及到的類做一個簡單的總結：

類名	大致介紹
ColumnChartData	控制柱狀圖的資料模型，有關資料、座標等相關配置都涉及到此類
Column	柱狀圖中單個柱體類
SubcolumnValue	柱狀圖中單個子柱體類（一個柱體由多個子柱體組成）
Axis	單個座標模型（如橫座標、豎座標）
AxisValue	單個座標的值（其中包含座標分佈的名稱、標籤）
Viewport	相當於圖表的外殼，裡面包含有柱狀圖，可以獲取圖表top、bottom、left、right值和長、寬度等等

5. tips

github原作者提供的demo初次學習確實有些困難，包括以上我對涉及類的解釋，都是檢視的程式碼註釋。所以對學習此開源庫的friends分享一個學習方法：

• 1 可以先將演示app下載到手機上，將圖表的不同的效果、和其它圖表作對比，檢視其中的差異，也可以找到自己心儀的效果。
• 2 根據心儀的效果在原始碼中找到對應的圖表實現類，模仿著先實現最簡單的顯示效果，再根據配備的不同特效慢慢嘗試學習。
• 3 動手實現！其中我為了學習ViewPort，一行一行修改程式碼檢視其中的不同。

以上涵蓋了柱狀圖開發的大部分講解，當然，它的功能還不止這些，有些什麼反向子列、堆疊效果等等，但是跟我的需求沒什麼聯絡，在這裡不做太多介紹，有興趣的可以去看官方demo。

以上所有程式碼實現都已包含在demo中，另外demo中有個package包，裡面包含的是官方demo中的柱狀圖演示部分（此部分來源於iamxiarui部落格，有改寫官方demo，中文版且註釋很多，多謝分享~），可結合檢視

就醬~

最後效果圖如下：

最後PM露出滿意的微笑，摟著android程式猿吃飯去啦…….haha~~

以上教程夠花式了吧，初次嘗試以程式猿和PM對話來確定需求和功能實現，這種對話模式自己寫起來覺得很有趣，haha（並無黑PM的含義）

希望對你們有幫助 ：）