最近项目中需要用到图表,技术有限,自己实现起来有难度,于是对比之后,最终决定使用 hellocharts 这个开源库,传送门: https://github.com/lecho/hellocharts-android ,一是因为引入方便,二是代码也比较清晰,便于加到项目中。还有一个重要的原因,这个库可以支持折线表,柱状表,饼状表以及气泡状表,而且实现的效果非常棒,放几张图大家感受一下:
1.gif
2.png
3.png
4.png
5.png
怎么样,效果是不是非常炫啊,下面我们来看看怎么使用吧。PS:本文操作基于 Android Studio
导入 hellocharts
有三种方式可以在我们的项目中使用 hellocharts。
- dependencies{
- compile 'com.github.lecho:hellocharts-library:1.5.8@aar'
- }
下载项目. png
如果本地配置了 git 的话,我们直接运行 git clone git@github.com: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));
经过这几步简单的设置(最后会放上 demo 地址),我们已经可以看到基本的折线图效果了:
- 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 效果. png
到这里,我们已经成功的使用 hellocharts 这个强大的图表库来展示了一个基本的折线图表,里边儿还有很多炫酷的用法等待我们去发掘。最后放上 demo 地址:https://github.com/SolveBugs/HelloChartDemo
来源: http://blog.csdn.net/weixin_38251977/article/details/69944090