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

最近項目中須要用到圖表,技術有限,本身實現起來有難度,因而對比以後,最終決定使用hellocharts這個開源庫,傳送門:https://github.com/lecho/hellocharts-android ,一是由於引入方便,二是代碼也比較清晰,便於加到項目中。還有一個重要的緣由,這個庫能夠支持折線表,柱狀表,餅狀表以及氣泡狀表,並且實現的效果很是棒,放幾張圖你們感覺一下:android

1.gif

2.png

3.png

4.png

5.png
怎麼樣,效果是否是很是炫啊,下面咱們來看看怎麼使用吧。 PS:本文操做基於Android Studio

導入hellochartsgit

有三種方式能夠在咱們的項目中使用hellocharts。github

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

下載項目.png
若是本地配置了git的話,咱們直接運行git clone git@github.com:lecho/hellocharts-android.git 便可將項目克隆到本地,不然的話,就點擊Download ZIP也能夠。 將項目下載本地後,在你本身的項目中,依次選擇File-New-Import Module,而後選擇hellocharts-library肯定便可完成導入。

源碼目錄.png

基本折線表的使用bash

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

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

在hellocharts中,每種圖表都有它本身的一個數據類型,在折線表中,最終設置給圖表顯示的是LineChartData,咱們能夠簡單想下,這個數據中確定包含線,線上的點,以及座標軸,下面咱們分別用代碼來展示。app

  1. 聲明一條折線
Line line = new Line(values).setColor(Color.BLUE);//聲明線並設置顏色
line.setCubic(false);//設置是平滑的仍是直的
lines = new ArrayList<Line>();
lines.add(line);
複製代碼
  1. 初始化折線上的點
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));
複製代碼
  1. 設置折線表相關屬性和數據
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地址),咱們已經能夠看到基本的折線圖效果了:工具

demo效果.png

到這裏,咱們已經成功的使用hellocharts這個強大的圖表庫來展現了一個基本的折線圖表,裏邊兒還有不少炫酷的用法等待咱們去發掘。最後放上demo地址:https://github.com/SolveBugs/HelloChartDemo開發工具

相關文章
相關標籤/搜索