Android图表开发之HelloCharts

最近项目中需要集成折线图、饼状图、柱状图等各类图表，于是就去网上搜寻了一下三方的框架，看到大家用的比较多的就是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中，所以我们需要几条折线就直接new几个Line对象就行，然后分别对不同的Line对象设置不同的属性，关于属性，我们这里只是做了几个简单的设定，具体的有很多，没有必要全部都设置上去，大家感兴趣的话可以自己研究下。。。运行以后的效果图：

接下来再来看看饼状图吧，鉴于折线图的数据来源已经使用过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下载