最近项目中需要集成折线图、饼状图、柱状图等各类图表,于是就去网上搜寻了一下三方的框架,看到大家用的比较多的就是MPAndroidChart(github上星赞第一)、HelloChart(github上星赞第二),还有就是百度官方推出的Echarts,但是Echarts在Android中植入有些特殊,需要用到WebView结合html进行展示,我们留着下篇文章里介绍,今天我们来谈谈HelloCharts,为什么当时在选择的时候没有选择星赞排行第一的MPAndroidChart呢?原因很简单,就是在对比二者图表的样式时,我觉得HelloCharts更加好看,不过后来因为项目的需求越来越多,HelloCharts已不能满足诸如码表、横向柱状图、复杂标签饼状图的需求,所以又不得不在项目中引入了Echarts,但HelloCharts作为简单图标的展示还是值得推荐的,因为使用简单、加载迅速、看着舒服。。。
先贴出github上的地址吧:点击打开链接,两种引入方式,compile和jar包,根据个人喜好引入就行
今天我们就说一下常用的三种图表的使用方法:折线图、饼状图和柱状图
折线图:LineChartView,使用很简单,直接在对应的xml文件中引入就行:
接着我们给出一段json数据来模拟网络请求回来的数据,绘制出我们的折线图:
{
"orderList": [
{
"time": 0,
"orders": 700
},
{
"time": 5,
"orders": 900
},
{
"time": 10,
"orders": 200
},
{
"time": 15,
"orders": 400
}
]
}
这里我们想要绘制出一个以时间为x轴,订单数为y轴的折线图,用来观察某一时间段内订单数量的变化。。。拿到json数据后我们就要开始解析,这里我们用到Gson来解析:
private void getChartData() {
Gson gson = new Gson();
Type type = new TypeToken>>() {}.getType();
Result> result = gson.fromJson(json, type);
mDataList = result.getOrderList();
}
LineData使我们定义的bean类,用来存放属性time和orders,然后用mDataList接收解析返回的数据,接着就是用我们拿到的数据来绘制折线图就可以了
private void initLineChartView() {
getChartData();
//订单数(y轴数据)
List pointValues = new ArrayList<>();
for (int i = 0; i < mDataList.size(); i++) {
pointValues.add(new PointValue(mDataList.get(i).getTime(),
mDataList.get(i).getOrders()));
}
List lines = new ArrayList<>();
//初始化一条折线
Line line = new Line(pointValues);
line.setColor(Color.RED);//设置折线颜色
line.setShape(ValueShape.CIRCLE);//折线图上每个数据点的形状(一共有三种)
line.setStrokeWidth(2);//设定折线的粗细
line.setPointRadius(4);//折线图上数据点的半径
lines.add(line);
LineChartData data = new LineChartData();
data.setLines(lines);
//x轴
Axis axisX = new Axis();
axisX.setTextSize(10);//x轴字体大小
axisX.setTextColor(Color.GRAY);//字体颜色
data.setAxisXBottom(axisX);//设定x轴在底部
//y轴
Axis axisY = new Axis();
axisX.setTextSize(10);//x轴字体大小
axisX.setTextColor(Color.GRAY);//字体颜色
data.setAxisYLeft(axisY);//设定y轴在左侧
mLineChartView.setLineChartData(data);
mLineChartView.setOnValueTouchListener(this);
}
PointValue可以将获取的坐标轴数据进行封装,构造函数分别为x轴,y轴两个参数,可以看到我们需要一条折线的话就直接new一个Line对象,然后添加到List
接下来再来看看饼状图吧,鉴于折线图的数据来源已经使用过json了,那饼状图和柱状图的数据就直接本地设置随机数了,毕竟手写一个json数据还是挺麻烦的,哈哈。。。
饼状图:PieChartView,同样的直接在我们的xml中引入就行:
然后在我们的代码中进行初始化:
private void initPieChartView() {
int numValues = 6;//六个栏目,分成六块
List values = new ArrayList<>();
for (int i = 0; i < numValues; i++) {
SliceValue sliceValue = new SliceValue((float) Math.random() * 30 + 15, ChartUtils
.pickColor());
values.add(sliceValue);
}
PieChartData pieChartData=new PieChartData(values);
pieChartData.setHasLabels(true);//显示标签,默认是不显示的
pieChartData.setHasLabelsOutside(false);//标签位置在外面
pieChartData.setHasCenterCircle(false);//是否显示圆环形饼状图
mPieChartView.setPieChartData(pieChartData);
}
饼状图的属性就少了很多了,毕竟它不像折线图那样有坐标轴,也不支持缩放,所以为了更好的显示,我们一般都设定它的宽高相等,SliceValue为饼状图中占比扇形的数据模型,PieChartData为饼状图的数据模型,可以设置相关属性来控制饼状图是否显示标签、标签位置、是否显示圆环形等等(详细的大家自己下去可以研究研究),不过这个地方的标签样式及文字好像法自定义,反正我没有找到可以改变标签样式的方法,如果有人知道了还请在下方留言告知,这也就是为什么后来我又引入了Echarts来实现比较复杂的饼状图了。。。运行以后的效果图:
当然作为简单的饼状图实现还是个不错的选择的。。。
柱状图:ColumnChartView,首先是xml:
然后是代码:
private String[] columnNames={"栏目1","栏目2","栏目3","栏目4","栏目5","栏目6"}
private void initColumnChartView() {
int numColumns = 6;//列数
int numSubcolumns = 1;//每一列柱状图的个数
List columns = new ArrayList<>();
List subcolumnValues;
List axisValues = new ArrayList<>();
for (int i = 0; i < numColumns; i++) {
subcolumnValues = new ArrayList<>();
for (int j = 0; j < numSubcolumns; j++) {
subcolumnValues.add(new SubcolumnValue((float) Math.random() * 30 + 15,
ChartUtils.pickColor()));
}
Column column = new Column(subcolumnValues);
column.setHasLabels(true);//是否显示标注
column.setHasLabelsOnlyForSelected(false);//是否点击圆柱才能显示数据标注
columns.add(column);
//给x轴坐标设置描述
axisValues.add(new AxisValue(i).setLabel(columnNames[i]));
}
ColumnChartData columnChartData=new ColumnChartData(columns);
//x轴
Axis axisX=new Axis();
axisX.hasLines();
axisX.setTextColor(Color.GRAY);
axisX.setValues(axisValues);
axisX.setHasTiltedLabels(true);//标题是否倾斜着显示
//y轴
Axis axisY=new Axis();
axisY.hasLines();
axisY.setTextColor(Color.GRAY);
axisY.setName("栏目分析");
axisY.setHasLines(true);
columnChartData.setFillRatio(0.8f);//设置组与组之间的间隔比率,取值范围0-1,1表示不留任何间隔
columnChartData.setValueLabelTextSize(8);//标签文字大小
columnChartData.setAxisXBottom(axisX);
columnChartData.setAxisYLeft(axisY);
mColumnChartView.setColumnChartData(columnChartData);
}
柱状图的底部文字可以设置倾斜状态来减小文字过长产生的影响,运行效果图:
至此,三种常见的图表样式和用法就介绍完了,其实用法很简单,毕竟HelloCharts已经帮我们封装得很好了,还有气泡图(BubbleChartView)、联合折线和柱状图的图表(ComboLineColumnChartView)等,大家有兴趣可以自己研究一下,下一篇我会介绍一个更加强大的图表工具Echarts,敬请期待!
附上Demo下载地址:HelloChartDemo下载