hellocharts-android-Android圖表開源庫的使用(一)

最近項目中需要用到圖表，技術有限，自己實現起來有難度，於是對比之後，最終決定使用hellocharts這個開源庫，傳送門:https://github.com/lecho/hellocharts-android ，一是因爲引入方便，二是代碼也比較清晰，便於加到項目中。還有一個重要的原因，這個庫可以支持折線表，柱狀表，餅狀表以及氣泡狀表，而且實現的效果非常棒，放幾張圖大家感受一下：

1.gif

2.png

3.png

4.png

5.png

怎麼樣，效果是不是非常炫啊，下面我們來看看怎麼使用吧。
PS：本文操作基於Android Studio

導入hellocharts

有三種方式可以在我們的項目中使用hellocharts。

感謝Android Studio,讓我們可以非常方便的使用一些開源的庫，如果你的開發工具是它的話，那麼引入項目非常簡單，只需要在你的app下的build文件的dependencies閉包中添加如下代碼，然後同步即可：
```
dependencies{
compile 'com.github.lecho:hellocharts-library:1.5.8@aar' 
}
```
當然，我們也可以下載最新的jar包來導入使用，點擊https://github.com/lecho/hellocharts-android/releases ，會看到作者發佈的最新jar包。下載jar包之後，放到app目錄下的libs文件夾下，然後同步項目即可。
前兩種方法雖然比較方便，但是不能修改庫的源碼，有時候我們需要在開源庫的基礎上做一些修改，這個時候我們就可以以添加module的方式來導入。導入過程也非常簡單。
首先，我們可以在項目主頁將代碼下載到本地。有兩種方式：

下載項目.png

如果本地配置了git的話，我們直接運行git clone [email protected]:lecho/hellocharts-android.git 即可將項目克隆到本地，否則的話，就點擊Download ZIP也可以。
將項目下載本地後，在你自己的項目中，依次選擇File-New-Import Module，然後選擇hellocharts-library確定即可完成導入。

源碼目錄.png

基本折線表的使用

經過以上幾步，我們的項目現在已經成功即成了hellocharts，下面我們來簡單看下最基本的圖表-折線表是如何使用的吧。
首先，在xml文件中添加折線表控件：

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

在hellocharts中，每種圖表都有它自己的一個數據類型，在折線表中，最終設置給圖表顯示的是LineChartData，我們可以簡單想下，這個數據中肯定包含線，線上的點，以及座標軸，下面我們分別用代碼來展現。

聲明一條折線

Line line = new Line(values).setColor(Color.BLUE);//聲明線並設置顏色
line.setCubic(false);//設置是平滑的還是直的
lines = new ArrayList<Line>();
lines.add(line);

初始化折線上的點

values = new ArrayList<PointValue>();//折線上的點
values.add(new PointValue(0, 2));
values.add(new PointValue(1, 4));
values.add(new PointValue(2, 3));
values.add(new PointValue(3, 4));

設置折線表相關屬性和數據

mChartView.setInteractive(true);//設置圖表是可以交互的（拖拽，縮放等效果的前提）
mChartView.setZoomType(ZoomType.HORIZONTAL_AND_VERTICAL);//設置縮放方向
LineChartData data = new LineChartData();
Axis axisX = new Axis();//x軸
Axis axisY = new Axis();//y軸
data.setAxisXBottom(axisX);
data.setAxisYLeft(axisY);
data.setLines(lines);
mChartView.setLineChartData(data);//給圖表設置數據

經過這幾步簡單的設置（最後會放上demo地址），我們已經可以看到基本的折線圖效果了：