手撸一个Android柱形图和线型图的组合图表

       项目开发中经常用到统计图表,网上也有很多的图表类库,比如 :MPAndroidChart,XCL-chart,hellochart,AChartEngine等等,以前我最常用的就是MPAndroidChart,这个库做的非常细致用起来也简单。

    但是用别人的东西好处就是快方便,坏处就是不好维护了,而且它们也只是实现了一些主流的效果,当我们面对产品经理天马行空的想法的时候,总有一些效果是这些库无法实现的。所以掌握Android中的一些绘制的基本技能是非常重要的。因为当需求来临的时候,假如你身边没有老司机,所有的东西都只能靠自己查资料,不要指望网上的一些牛人会帮助你,他们好像很忙,去找他们回馈率基本为0。

     前几天有个需求,要求柱形图和线型图组合,柱形图的数据依赖左边Y轴,还得分成3段,线型图有3条,右边的Y轴分成3份分别对应3条线的数据。好吧,找不到轮子只能自己造了。

     先上个图:


     首先在onSizeChanged()方法中初始化宽高。一开始是在onMeasure()中设置的,但是当加入到项目中view的高度有时候会动态的改变,不能自适应就改到了这里面了


    然后就是在onDraw()中绘制,先绘制柱形图,因为线型图的X坐标在柱形图的中间,在画线型图的路径就好画多了。每个柱形图有3个部分,从最下面的开始绘制矩形,第二个的底部坐标就是第一个的顶部,以此类推。其实onDraw()中其实就是一些对坐标的计算,只要计算对了 使用android提供的绘制的api绘制就可以了。

    然后是当我们的数据太多绘制超出了view的宽度之后,可以通过手势滑动来看到后面的数据。这部分一开始没有思路,网上问别人也没有回馈,后来运气好找到了一篇博客使用canvas绘柱状统计图(自动计算宽高及分度值、可左右滑动) ,在onTouchEvent中的根据手指在X轴滑动的距离,来改变我们绘制图形的X轴的坐标值然后重新绘制就可以了

开始也想过这样,后来感觉一直绘制会不会效率会很低,结果写完后运行并没有丝毫卡顿,通过android studio中的Memory内存监视工具看到也没有消耗很多内存。

    最后是给每个柱形图添加点击事件。通过GestureDetector中的onGestureListener中的onSingleTapUp实现,关键是计算我们点击的坐标的范围是不是在一个柱形图的范围内。demo中只计算了X轴的坐标。原理,当我们绘制柱形图的时候,每绘制一个,将讲它的x坐标的左边的坐标和右边的坐标存起来。循环判断我们点击的位置是不是在左边和右边的坐标之间如果是就返回当前的i,反之就是点击的无效的位置。

     项目地址:https://github.com/chsmy/MyCombineChartView

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值