仿余额宝收益图实现

问题描述

最近的android客户端中需要实现类似余额宝中的折线收益图,乍一看似乎比较简单,但还是有不少细节需要解决,所以我们还是选择了Android-GraphView做为基础来进行改造.对于基本的折线功能,Android-GraphView已经能满足,但对于折线粗细,x轴等距分布以及最后一个记录的标记提示,以及空心小圆点都需要处理,如图显示.UI图例

解决方案

首先我们需要定义好一些配置常量,由于Android-GraphView的例子并没有匹配多尺寸屏幕,使用单位px,所以我们需要统一单位dp,

接着,我们需要处理图表内容的绘制,所以我们需要重写GraphViewContentView的onDraw方法,代码如下

但是这样调整之后,y轴坐标线与标签出现偏移,我们需要调整一下VerLabelsView的onDraw方法,代码如下

调整好了坐标以后,我们需要调整图表内容与样式了,我们需要实现LineGraphView的drawSeries方法,代码如下

最后完成绘制标记

这样整个调整就完成了,我们可以写出一个DEMO做测试,我们直接看下效果图,完整代码请在此下载
程序图例

发表评论(已有 3 条评论)

设置头像

*

:wink: :twisted: :smile: :sleep: :shock: :sad: :roll: :razz: :oops: :neutral: :mad: :grin: :evil: :eek: :cry: :cool:

  1. fans 说:

    霸气外露。

  2. 苏槿 说:

    很实用!项目中正好要用到,先收藏了~

  3. 西柚 说:

    请问侧面的数字怎么能多加几位啊 位数多了空间不够