仿金融APP收益曲线图

最新推荐文章于 2024-04-07 19:58:18 发布

binbinqq86

最新推荐文章于 2024-04-07 19:58:18 发布

阅读量4.3k

点赞数 2

分类专栏： Android开发文章标签：金融支付宝开源曲线 chart

本文链接：https://blog.csdn.net/binbinqq86/article/details/74127768

版权

本文介绍如何自定义实现金融APP中的七天收益曲线图，避免使用大型图表库，通过自定义View绘制坐标轴、曲线和动画。详细讲述了实现思路、数据模型以及关键代码，包括坐标点的计算、动画实现和触摸事件处理。最后提供了源码下载链接。

摘要由CSDN通过智能技术生成

转载请注明出处：http://blog.csdn.net/binbinqq86/article/details/74127768

很多金融APP都会给我们呈现七天收益曲线图（貌似一开始是支付宝里面的余额宝先发明的），最近做项目需要用到，之前也接触过图表相关的开源库，比如hellocharts、MPChart等比较出名的两个，但是感觉就这么一个图表不需要去集成一个开源库，还是自己去实现一个吧！于是周末在家用了一天时间去实现并完善这个图表，看效果图：

这里写图片描述

怎么样，自我感觉良好~下面说说主要实现思路：

自定义view，去绘制这些坐标轴还有曲线
根据后台返回数据（这里用的模拟数据）计算相应坐标轴文本和曲线上的点的绘制位置
加入动画
完善一些配置信息，使图表可配置

说起来就这么几步，先看一下数据model：

package com.example.tianbin.myincomechart;

/**
 * Created by TianBin on 2017/7/1 12:53.
 * Description :
 */

public class Model {
   
    public String date;
    public float percent;
}

两个成员变量，一个是X轴日期，一个是Y轴收益百分比，然后就是我们的主角——自定义图表部分。先来分析一下：我们需要绘制的是X轴Y轴坐标系，并且有横向分割线，另外就是具体的坐标点。Y轴首先是分为6等份，有一份分给x轴坐标文本，另外5份是Y轴刻度值均分的结果（根据后台返回数据的最大最小值均分，算出每个刻度值），而在绘制的过程中，需要根据图表的高度以及总刻度值来计算每一份收益百分比所占像素，最后根据每个model的percent值来计算出应该绘制在屏幕的位置。然后用path方法把所有的点连在一起，绘制出最终的曲线，至于下面阴影部分的绘制，只需要让path闭合就可以了，来看这部分关键代码：

//...代码省略
        //放大为整数，避免浮点运算
        min= (int) (datas.get(0).percent*100);
        max= (int) (datas.get(0).percent*100);
        if(datas.get(0).percent<0){
            negativePos=0;
        }

        for (int i = 1; i < datas.size(); i++) {
            int f= (int) (datas.get(i).percent*100);
            if(min>f){
                min=f;
            }
            if(max<f){
                max=f;
            }
            if(datas.get(i).percent<0){
                negativePos=i;
            }
        }


        //转换比例，找出最大和最小进行换算每个梯度所占像素
        perPercent=(max-min)/(ySize-1);