Android开源图表控件hellocharts-android简单使用

有时在开发的过程中需要使用到诸如拆线型，饼状形等图表统计功能。
 通常来说，自己要实现这些控件还是要花费不少时间，所以我们就想到了开源控件。
 网上相关的开源框架很多，比如：
 大名鼎鼎的MPAndroidChart，其开源地址是：https://github.com/PhilJay/MPAndroidChart。
 还有使用起来非常方便，超好用的hellocharts-android，开源地址：https://github.com/lecho/hellocharts-android。
 使用AndroidStudio开发hellocharts-android非常方便，只需要在项目gradle文件中配置：
1
2
3
4
5
6

    dependencies {
    compile 'com.github.lecho:hellocharts-library:1.5.8@aar'
}
1
2
3

然后就可以开始使用啦：

1. 第一步：在布局文件中添加图表控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="16dp"
        >

    <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/chart_cash"
            android:gravity="center"
            android:textSize="16sp"
            android:textStyle="bold"/>

    <lecho.lib.hellocharts.view.LineChartView
            android:id="@+id/cash_chart"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10dp"/>
</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

1. 第二步：在Activity中初始化控件，添加数据即可：

public class ShowCashActivity extends AppCompatActivity {
    private LineChartView mChart;
    private Map<String, Integer> chartData = new TreeMap<String, Integer>();

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_cash_show);
        initViewsAndDatas();
        initChartViews();
    }

    private void initChartViews() {
        //定义线条
        List<Line> lines = new ArrayList<>();
        //定义数据点的数据
        List<PointValue> values = new ArrayList<>();
        int index = 0;
        for (Integer integer : chartData.values()) {
            values.add(new PointValue(index, integer));
            index++;
        }
        Line line = new Line(values);
        line.setHasLabels(true);
        //折线的颜色
        line.setColor(ChartUtils.COLOR_BLUE);
        //折线图上每个数据点的形状
        line.setShape(ValueShape.CIRCLE);
        //设置数据点颜色
        line.setPointColor(ChartUtils.COLOR_RED);
        //是否用线显示。如果为false 则没有曲线只有点显示
        line.setHasLines(true);
        lines.add(line);
        //图形数据加载
        LineChartData lineChartData = new LineChartData(lines);
        //把数据放到控件中
        mChart.setLineChartData(lineChartData);
    }

    /**
     * @description 获取数据及展示
     * @author ldm
     * @time 2017/3/1 11:43
     */
    private void initViewsAndDatas() {
        mChart = (LineChartView) findViewById(R.id.cash_chart);
        List<CashModel> mDatas = CashTableUtils.getInstance().queryAllCashes();
        if (null != mDatas) {
            for (CashModel mData : mDatas) {
                String time = mData.getCostTime();
                int cost = Integer.valueOf(mData.getCostNumber());
                if (!chartData.containsKey(time)) {
                    chartData.put(time, cost);
                } else {
                    int orginCost = chartData.get(time);
                    chartData.put(time, orginCost + cost);
                }
            }
        }
    }
}
//图形更多设置可以参考开源框架DEMO
    //比如：
//Line line = new Line(pointValues);
//line.setColor(Color.GREEN);//设置折线颜色
//        line.setStrokeWidth(5);//设置折线宽度
//        line.setFilled(true);//设置折线覆盖区域颜色
//        line.setCubic(isCubic);//节点之间的过渡
//        line.setPointColor(Color.RED);//设置节点颜色
//        line.setPointRadius(10);//设置节点半径
//        line.setHasLabels(true);//是否显示节点数据
//        line.setHasLines(true);//是否显示折线
//        line.setHasPoints(true);//是否显示节点
//        line.setShape(ValueShape.CIRCLE);//节点图形样式 DIAMOND菱形、SQUARE方形、CIRCLE圆形
//        line.setHasLabelsOnlyForSelected(false);//隐藏数据，触摸可以显示
//        lines.add(line);//将数据集合添加到线
//
//        chartData = new LineChartData(lines);
//        chartData.setAxisYLeft(axisY);//将Y轴属性设置到左边
//        chartData.setAxisXBottom(axisX);//将X轴属性设置到底部
//        chartData.setBaseValue(20);//设置反向覆盖区域颜色
//        chartData.setValueLabelBackgroundAuto(false);//设置数据背景是否跟随节点颜色
//        chartData.setValueLabelBackgroundColor(Color.BLUE);//设置数据背景颜色
//        chartData.setValueLabelBackgroundEnabled(false);//设置是否有数据背景
//        chartData.setValueLabelsTextColor(Color.RED);//设置数据文字颜色
//        chartData.setValueLabelTextSize(15);//设置数据文字大小
//        chartData.setValueLabelTypeface(Typeface.MONOSPACE);//设置数据文字样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

以上2步即可通过hellocharts-android实现数据按拆线图展示出来。小Dmeo地址：https://github.com/ldm520/Android_Bill_Record