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开发工具

相关文章
相关标签/搜索