引言：最近因為公司業務需求需要做一個訪問統計的模組，設計到圖表控制元件比較大，在Github看了一下，hellochats這個控制元件大家用了最後反映很好，我下了個demo研究了下。

1. 什麼hellochats
   https://github.com/lecho/hellocharts-android
   這個github連結，有興趣可以去看看。主要就是一個包含折線圖，柱狀圖，餅狀圖的圖形框架，功能強大，自由度高。
   
2. 折線圖的相關實現

 <lecho.lib.hellocharts.view.LineChartView
                android:id="@+id/chart"
 

                android:layout_marginBottom="10dp"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"/>

佈局檔案宣告具體應用型別。
 

 private LineChartData data;
 private  long MaxY=0;//y軸最大值
 private void generateData() {//初始化資料
        MaxY = 0;
        List<Line> lines = new ArrayList<Line>();//折現集合（可以有多根折線）
        List<PointValue> values = new ArrayList<PointValue>();//每根折線上的點的集合（每個點包括xy座標）
        for (int
 
 j = 0; j< Acclist.size(); ++j) {
              values.add(new PointValue(j, Acclist.get(j).getPv()));//新增Y軸資料
              MaxY = Math.max(MaxY,Acclist.get(j).getPv());//取出Y軸最大資料

        }
        Line line = new Line(values);
        line.setColor(Color.parseColor("#FF6600"));//設定折線的顏色
        line.setShape(ValueShape.CIRCLE);//節點圖形樣式 DIAMOND菱形、SQUARE方形、CIRCLE圓形
        line.setCubic(true);//曲線是否平滑，即是曲線還是折線
        line.setFilled(true);//是否填充曲線的面積
        line.setHasLabels(false);//曲線的資料座標是否加上備註
        line.setHasLabelsOnlyForSelected(true);//點選資料座標提示資料（設定了這個line.setHasLabels(true);就無效）
        line.setHasLines(true);//是否用線顯示。如果為false 則沒有曲線只有點顯示
        line.setHasPoints(true);//是否顯示圓點 如果為false 則沒有原點只有點顯示（每個資料點都是個大的圓點）
        line.setPointRadius(3);//設定節點半徑
        line.setPointColor(Color.RED);//設定節點顏色
        lines.add(line);
        data = new LineChartData(lines);
        Axis axisY = new Axis().setHasLines(true);
        axisY.setName("");
        List<AxisValue> axisValues = new ArrayList<AxisValue>();
        for (int i = 0; i < arrayTimekey.length; i ++) {
            axisValues.add(new AxisValue(i).setLabel(DateUtils.parseToStringStyle(arrayTimekey[i].toString(),DateUtils.Simple_Date_Format,"yyyy/MM/dd")));
        }
        //座標軸
        Axis axisX = new Axis(); //X軸
         axisX.setHasTiltedLabels(true);  //X座標軸字型是斜的顯示還是直的，true是斜的顯示
        //axisX.setTextColor(Color.BLACK);  //設定字型顏色
        axisX.setName("日期");  //表格名稱
        axisX.setHasLines(true); //x 軸分割線
        axisX.setTextSize(12);//設定字型大小
        axisX.setMaxLabelChars(10); //最多幾個X軸座標，意思就是你的縮放讓X軸上資料的個數7<=x<=mAxisXValues.length
        axisX.setValues(axisValues);  //填充X軸的座標名稱
        data.setAxisXBottom(axisX); //x 軸在底部
        //data.setAxisXTop(axisX);  //x 軸在頂部
        data.setAxisYLeft(axisY);//Y軸設定在左邊
        data.setBaseValue(Float.NEGATIVE_INFINITY);
        resetViewport();
    }
      private void resetViewport() {
        //設定行為屬性，支援縮放、滑動以及平移
        chart.setInteractive(true);
        chart.setZoomType(ZoomType.HORIZONTAL);

        chart.setMaxZoom((float) arrayTimekey.length);//最大方法比例
        chart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
        chart.setLineChartData(data);
        chart.setVisibility(View.VISIBLE);
        chart.setValueSelectionEnabled(true);//設定節點點選後動畫

        /**注：下面的7，10只是代表一個數字去類比而已
         * 當時是為了解決X軸固定資料個數。見（http://forum.xda-developers.com/tools/programming/library-hellocharts-charting-library-t2904456/page2）;
         這4句程式碼可以設定X軸資料的顯示個數（x軸0-7個數據），
         1    當資料點個數小於（29）的時候，縮小到極致hellochart預設的是所有顯示。
         2    當資料點個數大於（29）的時候，
         2.1  若不設定axisX.setMaxLabelChars(int count)這句話,則會自動適配X軸所能顯示的儘量合適的資料個數。
         2.2  若設定axisX.setMaxLabelChars(int count)這句話, 33個數據點測試，
         2.2.1  若 axisX.setMaxLabelChars(10); 裡面的10大於v.right= 7; 裡面的7，則 剛開始X軸顯示7條資料，然後縮放的時候X軸的個數會保證大於7小於10
         2.2.2  若小於v.right= 7;中的7,反正我感覺是這兩句都好像失效了的樣子 - -!
         若這兒不設定 v.right= 7; 這句話，則圖表剛開始就會盡可能的顯示所有資料，互動性太差
         */
        final Viewport v = new Viewport(chart.getMaximumViewport());
        v.bottom = 0;
        v.top = (MaxY+20);
        v.left = 0;
        v.right = 7;

        chart.setCurrentViewportWithAnimation(v);


    }

例項化Line（折線）需要傳入點的集合，例項化LinerChat需要傳入Lines的集合，以及傳入呼叫 axisX.setValues(axisValues)將X軸座標填入。
3. 餅狀圖使用

佈局宣告圖表型別為餅狀圖

<lecho.lib.hellocharts.view.PieChartView
                android:layout_marginLeft="40dp"
                android:layout_marginRight="40dp"
                android:id="@+id/chart"
                android:layout_width="match_parent"
                android:layout_height="250dp" >
            </lecho.lib.hellocharts.view.PieChartView>

初始化餅狀圖資料

   /**
     * 初始化餅狀圖資料
     */
    private PieChartData data;
    private void generateData() {
        List<SliceValue> values = new ArrayList<SliceValue>();//宣告餅狀圖集合，主要存放每個扇形區域的資料數量和區域顏色
        SliceValue sliceValue = new SliceValue(bean.getBaseShopFlow().getRefererPv().getDire(), parseColor("#FFE9C8"));//扇形區域的資料數量和區域顏色
        SliceValue sliceValue = new SliceValue(bean.getBaseShopFlow().getRefererPv().getDire(), parseColor("#FFE9C8"));//扇形區域的資料數量和區域顏色
       SliceValue sliceValue = new SliceValue(bean.getBaseShopFlow().getRefererPv().getDire(), parseColor("#FFE9C8"));//扇形區域的資料數量和區域顏色
        values.add(sliceValue);
        data = new PieChartData(values);
        data.setHasLabels(true);
        data.setHasLabelsOnlyForSelected(false);
        data.setHasLabelsOutside(false);
        data.setHasCenterCircle(false);       
        chart.setPieChartData(data);
    }