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

来源：互联网发布：良心手游推荐知乎编辑：程序博客网时间：2024/06/11 20:12

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

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

然后就可以开始使用啦：

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

<?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>

第二步：在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);//设置数据文字样式

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

0 1