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

有时在开发的过程中需要使用到诸如拆线型,饼状形等图表统计功能。
 通常来说,自己要实现这些控件还是要花费不少时间,所以我们就想到了开源控件。
 网上相关的开源框架很多,比如:
 大名鼎鼎的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'
}

然后就可以开始使用啦:

  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. 第二步:在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
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值