折线图的绘制

最新推荐文章于 2024-06-05 17:52:44 发布

特辣黄焖鸡米饭

最新推荐文章于 2024-06-05 17:52:44 发布

阅读量590

点赞数

分类专栏： android

本文链接：https://blog.csdn.net/a865074284/article/details/51103648

版权

android 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

最近在做股票相关的项目，避免不了折线图，在这里温习一下写法，都是很简单的东西。

先看一下效果图

然后贴代码：

public class FTenBrokenLineView extends View {
    public int XPoint = DipUtil.dip2px(40);    //原点的X坐标
    public int YPoint = DipUtil.dip2px(210);     //原点的Y坐标
    public int XScale = 55;     //X的刻度长度
    public int YScale = 40;     //Y的刻度长度
    public int XLength = 300;        //X轴的长度
    public int YLength = 210;        //Y轴的长度
    public String[] XLabel;    //X的刻度
    public String[] YLabel;    //Y的刻度
    public String[] Data;      //数据
    public String Title;    //显示的标题

    private Context context;
    private Paint axisPaint;// 轴线
    private Paint dataPaint;// 数据线
    private Paint yTextPaint;// 文字的笔
    private Paint xTextPaint;
    private Paint titlePaint; // Y轴顶部的提示
    private Paint annulusPaint; // 数据圆环
    private Paint paint;
    private Path path;
    Paint paint1;

    private float radius = DipUtil.dip2px(4);// 数据圆环的半径

    public FTenBrokenLineView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        init();
    }

    public FTenBrokenLineView(Context context) {
        super(context);
        this.context = context;
        init();
    }

    private void init() {
        XLength = DataManager.getInstance(context).getDeviceWidth(context) - DipUtil.dip2px(70);// 这个是把屏幕的宽度减去两边的间距的和
        YLength = DipUtil.dip2px(190);
    }

    /**
     * 为折线图设置数据
     *
     * @param XLabels  x的刻度
     * @param YLabels  y的刻度
     * @param AllData  传入的数据
     */
    public void setInfo(String[] XLabels, String[] YLabels, String[] AllData) {
        XLabel = XLabels;
        YLabel = YLabels;
        Data = AllData;

        XScale = XLength / (XLabel.length - 1);
        YScale = YLength / YLabel.length;// 因为Y轴方向上第0个点没有数据，所以要特殊处理
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);//重写onDraw方法
        initPaint();
        canvas.drawLine(XPoint, YPoint, XPoint + XLength, YPoint, axisPaint);   //X轴
        canvas.drawLine(XPoint, YPoint - YLength, XPoint, YPoint, axisPaint);   //画Y轴

        for (int i = 1; i <= YLabel.length; i++) {
            canvas.drawLine(XPoint, YPoint - i * YScale, XPoint + XLength, YPoint - i * YScale, axisPaint);  //画横着方向每一个刻度，长度是X轴的长度
            int j = i - 1;// 因为Y轴方向上第0个点没有数据，这里特殊处理
            canvas.drawText(YLabel[j], XPoint - DipUtil.dip2px(25), YPoint - i * YScale + DipUtil.dip2px(3), yTextPaint);  //文字
        }

        for (int i = 0; i < XLabel.length; i++) {
            canvas.drawLine(XPoint + i * XScale, YPoint, XPoint + i * XScale, YPoint - YLength, axisPaint);  //画X轴方向刻度

            if (i > 0 && YCoord(Data[i - 1]) != -999 && YCoord(Data[i]) != -999) {  //保证有效数据
                paint1 = new Paint();
                paint1.setAntiAlias(true);
                paint1.setStyle(Paint.Style.FILL);
                paint1.setColor(0x153ea3ff);// 这个颜色就蓝色不透明8%
                path = new Path();// 以每一个间距绘制它的路径，然后填充颜色。
                path.moveTo(XPoint + (i - 1) * XScale, YCoord(Data[i - 1]));
                path.lineTo(XPoint + i * XScale, YCoord(Data[i]));
                path.lineTo(XPoint + i * XScale, YPoint);
                path.lineTo(XPoint + (i - 1) * XScale, YPoint);
                path.close();
                canvas.drawPath(path, paint1);// 这里是绘制阴影效果

                canvas.drawLine(XPoint + (i - 1) * XScale, YCoord(Data[i - 1]), XPoint + i * XScale, YCoord(Data[i]), dataPaint);// 绘制数据线
            }
        }

        // 循环X轴上的数据
        for (int i = 0; i < XLabel.length; i++) {
            // 这里是计算X轴上的标示长度，因为是分为两行，所以分割为2015 和 三季度，然后计算长度
            String str1 = XLabel[i].substring(0, 4);
            float strwid1 = xTextPaint.measureText(str1);
            String str2 = XLabel[i].substring(4);
            float strwid2 = xTextPaint.measureText(str2);

            canvas.drawText(str1, (XPoint + i * XScale) - strwid1 / 2, YPoint + DipUtil.dip2px(15), xTextPaint);// 绘制X轴上的刻度数据，第一行2015
            canvas.drawText(str2, (XPoint + i * XScale) - strwid2 / 2, YPoint + DipUtil.dip2px(30), xTextPaint);// 绘制X轴上的刻度数据，第二行三季度
            str1 = null;
            str2 = null;

            canvas.drawCircle(XPoint + i * XScale, YCoord(Data[i]), radius, annulusPaint);// 绘制数据点，是一个圆环
            paint = new Paint();
            paint.setAntiAlias(true);
            paint.setStyle(Paint.Style.FILL);
            paint.setColor(context.getResources().getColor(R.color.background_gray));
            canvas.drawCircle(XPoint + i * XScale, YCoord(Data[i]), radius * 2 / 3, paint);// 在圆环内部绘制一个圆，颜色为背景颜色
        }
    }

    private void initPaint() {
        axisPaint = new Paint();
        axisPaint.setStyle(Paint.Style.STROKE);
        axisPaint.setAntiAlias(true);
        axisPaint.setStrokeWidth(DipUtil.dip2px(1));
        axisPaint.setColor(context.getResources().getColor(R.color.line));

        dataPaint = new Paint();
        dataPaint.setStyle(Paint.Style.STROKE);
        dataPaint.setAntiAlias(true);
        dataPaint.setStrokeWidth(radius / 3);
        dataPaint.setColor(context.getResources().getColor(R.color.blue));

        annulusPaint = new Paint();
        annulusPaint.setAntiAlias(true);
        annulusPaint.setStrokeWidth(radius / 3);
        annulusPaint.setColor(context.getResources().getColor(R.color.blue));

        yTextPaint = new Paint();
        yTextPaint.setAntiAlias(true);
        yTextPaint.setColor(context.getResources().getColor(R.color.title_color));
        yTextPaint.setTextSize(context.getResources().getDimension(R.dimen.text_size_12));

        xTextPaint = new Paint();
        xTextPaint.setColor(context.getResources().getColor(R.color.text_gray));
        xTextPaint.setTextSize(context.getResources().getDimension(R.dimen.text_size_12));
        xTextPaint.setAntiAlias(true);

        titlePaint = new Paint();
        titlePaint.setAntiAlias(true);
        titlePaint.setColor(context.getResources().getColor(R.color.title_color));
        titlePaint.setTextSize(context.getResources().getDimension(R.dimen.text_size));
    }

    /**
     * 计算绘制时的Y坐标，无数据时返回-999
     * @param y0
     * @return
     */
    private float YCoord(String y0) {
        double y;
        double k;
        try {
            y = Double.parseDouble(y0);
        } catch (Exception e) {
            return -999;    //出错则返回-999
        }
        try {
            k = (YLength - YScale) / (Double.parseDouble(YLabel[YLabel.length - 1]) - Double.parseDouble(YLabel[0]));
            return (float) (((Double.parseDouble(YLabel[YLabel.length - 1]) - y) * k) + (YPoint - YLength));
        } catch (Exception e) {
        }
        return 0;
    }

}

这就是一个自定义的view，使用的时候就在xml文件中使用

<com.....FTenBrokenLineView
    android:id="@+id/flBrokenLine"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

上面是xml文件中的

下面是在代码中添加数据：

private FTenBrokenLineView flBrokenLine;

public String[] YLabel = {"0.5", "0.6", "0.7", "0.8", "0.9", "1.0", "1.1", "1.2"};    //X的刻度
public String[] XLabel = {"2014三季度", "2014年报", "2015一季度", "2015中报", "2015三季度"};    //Y的刻度
public String[] Data = {"0.9", "0.8", "1.1", "0.65", "0.92"};      //数据

flBrokenLine = ViewHolder.init(view, R.id.flBrokenLine);
flBrokenLine.setInfo(XLabel, YLabel, Data);

自定义的view代码写的很乱，因为中间写的时候会有覆盖问题，所以为了能显示出效果，就写的很随便了，也不是很通用。

diputil.dip2px方法就是px和dp转换的方法。

DataManager.getInstance(context).getDeviceWidth(context)这个方法就是获取屏幕的宽度。

YCoord() 方法是：根据传入的要显示的参数，把这些值转换为屏幕上Y轴的像素，然后绘制出数据点。转换的跪着就是计算y轴上每一个间距对应的像素的一个比率K，然后用最大值减去传入的参数得到的值乘，这个K，再加上上面空隙的间距，就是返回的值(这写的。。。。我自己都看不懂。。。。。。)反正就是一个数学的比率。

反正代码很简单，复习一下。。。。

特辣黄焖鸡米饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
折线图的绘制

最近在做股票相关的项目，避免不了折线图，在这里温习一下写法，都是很简单的东西。先看一下效果图然后贴代码：package com.znz.goldfinger.views.stock;import android.content.Context;import android.graphics.Canvas;import android.graphics.P
复制链接

扫一扫