Android 自定义折线图

最新推荐文章于 2022-06-04 13:05:48 发布
最新推荐文章于 2022-06-04 13:05:48 发布
阅读量568 收藏 4
点赞数
分类专栏： Android 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AneTist/article/details/102665501
版权

先上图
在这里插入图片描述分析
在这里插入图片描述

x轴

x轴起始x坐标 = 原点x坐标
x轴起始y坐标 = 原点y坐标
x轴终止x坐标 = 原点x坐标 + x轴长度 + j
x轴终止y坐标 = 原点y坐标

代码

canvas.drawLine(mXPoint,mYPoint,mXLength + mXPoint + 20,mYPoint,mainPaint);
x轴刻度

可以根据传入数据的量循环画刻度

线条 a 起始x坐标 = 原点x坐标 + 循环数 × x轴刻度长度
线条 a 起始y坐标 = 原点y坐标
线条 a 终止x坐标 = 原点x坐标 + 循环数 × x轴刻度长度
线条 a 终止y坐标 = 原点y坐标 - 5 （5 是刻度的高度，可以自己设置）

线条 a 刻度文字x坐标 = 原点x坐标 + 循环数 × x轴刻度长度
线条 a 刻度文字y坐标 = 原点y坐标 +15（15 是文字向下移动的距离，可以自己设置）

代码

for (int i=0;i<mXAxialScale.length;i++){
    canvas.drawLine(mXPoint + i * mXScale,mYPoint,mXPoint + i * mXScale,mYPoint-5,mainPaint);
    canvas.drawText(mXAxialScale[i],mXPoint + i * mXScale,mYPoint + 15,textPaint);
}
x轴最后的箭头

上箭头
起始x坐标 = 原点x坐标 + x轴长度 + j
起始y坐标 = 原点y坐标
终止x坐标 = 原点x坐标 + x轴长度 + 15（个人设置为15，可以自己设置）
终止y坐标 = 原点y坐标 - 5（个人设置为5，可以自己设置）

下箭头
起始x坐标 = 原点x坐标 + x轴长度 + j
起始y坐标 = 原点y坐标
终止x坐标 = 原点x坐标 + x轴长度 + 15（个人设置为15，可以自己设置）
终止y坐标 = 原点y坐标 + 5（个人设置为5，可以自己设置）

代码

 //x上箭头
canvas.drawLine(mXLength + mXPoint + 20,mYPoint,mXLength + mXPoint + 15,mYPoint - 5,mainPaint);
//x下箭头
canvas.drawLine(mXLength + mXPoint + 20,mYPoint,mXPoint + mXLength + 15,mYPoint + 5,mainPaint);

y轴

y轴起始x坐标 = 原点x坐标
y轴起始y坐标 = 原点y坐标
y轴终止x坐标 = 原点x坐标
y轴终止y坐标 = 原点y坐标 - y轴长度 - i

代码

canvas.drawLine(mXPoint,mYPoint,mXPoint,mYPoint-mYLength-20,mainPaint);
y轴刻度

和x轴差不多，根据传入数据的量循环画即可

线条 b 起始x坐标 = 原点x坐标
线条 b 起始y坐标 = 原点y坐标 - 循环数 × y轴刻度长度
线条 b 终止x坐标 = 原点x坐标 + 5（5 是刻度的宽度，可以自己设置）
线条 b 终止y坐标 = 原点y坐标 - 循环数 × y轴刻度长度

线条 b 刻度文字x坐标 = 原点x坐标 - 20（20 是文字向左移动的距离，可以自己设置）
线条 b 刻度文字y坐标 = 原点y坐标 - 循环数 × y轴刻度长度

代码

for (int i=0;i<mYAxialScale.length;i++){
    canvas.drawLine(mXPoint,mYPoint - i * mYScale,mXPoint + 5,mYPoint - i * mYScale,mainPaint);
    canvas.drawText(mYAxialScale[i],mXPoint - 20,mYPoint - i * mYScale,textPaint);
}
y轴上面的箭头

左箭头
起始x坐标 = 原点x坐标
起始y坐标 = 原点y坐标 - y轴长度 - i
终止x坐标 = 原点x坐标 - 5（个人设置为5，可以自己设置）
终止y坐标 = 原点y坐标 - y轴长度 - 15（个人设置为15，可以自己设置）

右箭头
起始x坐标 = 原点x坐标
起始y坐标 = 原点y坐标 - y轴长度 - i
终止x坐标 = 原点x坐标 + 5（个人设置为5，可以自己设置）
终止y坐标 = 原点y坐标 - y轴长度 - 15（个人设置为15，可以自己设置）

代码

//y左箭头
canvas.drawLine(mXPoint,mYPoint - mYLength - 20,mXPoint - 5,mYPoint - mYLength - 15,mainPaint);
//y右箭头
canvas.drawLine(mXPoint,mYPoint - mYLength - 20,mXPoint + 5,mYPoint - mYLength - 15,mainPaint);

画标题

位置随意，不超出屏幕，不遮挡数据就行…
代码

canvas.drawText(mTitle, (mXPoint+mXLength+100)/2, mYPoint+100, textPaint);

画点、点与点之间的折线

循环画即可，直接上代码

        for (int i=0;i<mData.length;i++){
            if (i>0){
                //原点坐标+第一个刻度,y坐标,原点+第二个刻度,y坐标
                canvas.drawLine(mXPoint + (i - 1) * mXScale,getY(mData[i - 1]),mXPoint + i * mXScale,getY(mData[i]),mainPaint);
            }
            //画点
            canvas.drawCircle(mXPoint + i * mXScale,getY(mData[i]),5,pointPaint);
            canvas.drawText(mData[i],mXPoint +  i * mXScale+10,getY(mData[i]),indexPaint);
        }
获取折线的y坐标
    private float getY(String y){
        return mYPoint - Float.valueOf(y) * mYScale / mStep;
    }

坐标原点可以自己设置，y轴和x轴长度也可以自己设置，只要不超过手机屏幕宽度和高度就可以

x轴和y轴刻长度可以设置为固定值，也可以通过传入数据的数量动态设置，但如果数量过多，刻度与刻度之间会比较拥挤，其他就是上面的内容了

全部代码

AndroidManifest.xml 设置横屏

        <activity android:name=".MainActivity"
            android:screenOrientation="landscape">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

自定义布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.iot.nss.customchart.ChartView
        android:id="@+id/chart_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <Button
        android:id="@+id/update_btn"
        android:layout_alignParentRight="true"
        android:text="更新数据"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

ChartView.java

public class ChartView extends View {
    private Paint mainPaint;//主画笔
    private Paint pointPaint;//点
    private Paint indexPaint;//坐标
    private Paint textPaint;//文字

    private int mXPoint = 150;//原点X轴坐标
    private int mYPoint = 700;//原点Y轴坐标
    private int mXScale;//X轴刻度长度
    private int mYScale;//Y轴刻度长度
    private int mXLength;//X轴长度
    private int mYLength;//Y轴长度

    private String[] mXAxialScale;//X轴刻度值
    private String[] mYAxialScale;//Y轴刻度值
    private String[] mData;//数据
    private String mTitle;//标题
    private int mStep;//y轴步增值

    public void setInfo(String[] mXAxialScale, String[] mYAxialScale,String strTitle,int mStep) {
        this.mXAxialScale = mXAxialScale;//横坐标
        this.mYAxialScale = mYAxialScale;//纵坐标
        this.mTitle = strTitle;
        this.mStep = mStep;
    }

    public void setData(String[]data){
        this.mData = data;
        postInvalidate();//更新
    }

	//一定要写这个构造不然会报错  这个构造会在创建控件时自动调用
    public ChartView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    private void initPaint() {
        mainPaint = new Paint();
        mainPaint.setStrokeWidth(2);//线宽
        mainPaint.setAntiAlias(true);//去锯齿
        mainPaint.setColor(Color.DKGRAY);//颜色
        mainPaint.setTextSize(12);

        //文字
        textPaint = new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setColor(Color.DKGRAY);
        textPaint.setTextSize(12);

        //坐标
        indexPaint = new Paint();
        indexPaint.setAntiAlias(true);
        indexPaint.setColor(Color.RED);
        indexPaint.setTextSize(12);

        //点
        pointPaint = new Paint();
        pointPaint.setAntiAlias(true);
        pointPaint.setStyle(Paint.Style.FILL);//实心
        textPaint.setTextSize(16);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        getXScale();


        //画x
        canvas.drawLine(mXPoint,mYPoint,mXLength + mXPoint + 20,mYPoint,mainPaint);
        //显示刻度
        for (int i=0;i<mXAxialScale.length;i++){
            canvas.drawLine(mXPoint + i * mXScale,mYPoint,mXPoint + i * mXScale,mYPoint-5,mainPaint);
            canvas.drawText(mXAxialScale[i],mXPoint + i * mXScale,mYPoint + 15,textPaint);
        }
        //x上箭头
        canvas.drawLine(mXLength + mXPoint + 20,mYPoint,mXLength + mXPoint + 15,mYPoint - 5,mainPaint);
        //x下箭头
        canvas.drawLine(mXLength + mXPoint + 20,mYPoint,mXPoint + mXLength + 15,mYPoint + 5,mainPaint);

        //画y
        canvas.drawLine(mXPoint,mYPoint,mXPoint,mYPoint-mYLength-20,mainPaint);
        //显示刻度
        for (int i=0;i<mYAxialScale.length;i++){
            canvas.drawLine(mXPoint,mYPoint - i * mYScale,mXPoint + 5,mYPoint - i * mYScale,mainPaint);
            canvas.drawText(mYAxialScale[i],mXPoint - 20,mYPoint - i * mYScale,textPaint);
        }
        //y左箭头
        canvas.drawLine(mXPoint,mYPoint - mYLength - 20,mXPoint - 5,mYPoint - mYLength - 15,mainPaint);
        //y右箭头
        canvas.drawLine(mXPoint,mYPoint - mYLength - 20,mXPoint + 5,mYPoint - mYLength - 15,mainPaint);

        //折线
        for (int i=0;i<mData.length;i++){
            if (i>0){
                //原点坐标+第一个刻度,y坐标,原点+第二个刻度,y坐标
                canvas.drawLine(mXPoint + (i - 1) * mXScale,getY(mData[i - 1]),mXPoint + i * mXScale,getY(mData[i]),mainPaint);
            }
            //画点
            canvas.drawCircle(mXPoint + i * mXScale,getY(mData[i]),5,pointPaint);
            canvas.drawText(mData[i],mXPoint +  i * mXScale+10,getY(mData[i]),indexPaint);
        }

        //设置标题
        canvas.drawText(mTitle, (mXPoint + mXLength + 100)/2, mYPoint + 100, textPaint);
    }

    //获取y坐标
    private float getY(String y){
        return mYPoint - Float.valueOf(y) * mYScale / mStep;
    }

    //设置x和y轴长度以及刻度长度
    private void getXScale(){
        mXLength = getWidth() - 200;
        mYLength = getHeight() - 400;
        mXScale = mXLength/(mXAxialScale.length - 1);
        mYScale = mYLength/(mYAxialScale.length - 1);
    }
}

主界面使用

    private ChartView chartView;

    private String[] xScale = {"0","1","2","3","4","5","6","7","8","9"};
    private String[] yScale = {"0", "2", "4", "6", "8", "10", "12", "14", "16", "18", "20"};
    private String[] data = new String[10];

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        chartView = findViewById(R.id.chart_view);
        Button updateBtn = findViewById(R.id.update_btn);
        chartView.setInfo(xScale,yScale,"测试",2);
        updateData();
        updateBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                updateData();
            }
        });
    }

    private void updateData(){
        for (int i=0;i<data.length;i++){
            data[i] = String.valueOf(new Random().nextInt(20));
        }
        chartView.setData(data);
    }
番茄小炒西红柿
关注
专栏目录
Android:自定义折线图
嘿呦
04-27 452
创建Activity去加载自定义布局 LineView public class LineView extends View { private String[] timeArr={ "00:00","06:00","12:00","18:00","24:00" }; //温度值 private String[] arr={ ...
Android新手之旅(9) 自定义的折线图
weixin_34253539的博客
07-24 126
　　希望实现一个折线图，但没有找到合适的控件或者代码，只有一个基本样子的，在它的基础上，进行了一些改进，改得比较灵活，可以传递参数，可以设置位置，坐标轴长度，刻度长度等。 　　自定义的ChartView.java package jetz.common; import android.content.Context;import android.graphics.Canvas;import ...
Android自定义折线图
□□□□□□
03-18 284
今天来撸一个折线图，斜体文本给我整的直难受，当初找了半天就是没有正常能用的， 后来费了半天劲才整明白，哎，画布真是有点搞不懂，不多说，先上图； 先来初始化一下 /** * 初始化画笔 */ private void initPaint() { xyPaint = new Paint(); xyPaint.setAntiAlia...
android 自定义折线图
zhouzhangcheng123的专栏
03-30 7206
先不多说，直接先看效果图。 思路： 1.什么都不管，先把折线图表格画出来再说 2.画出折线 3.做出动画效果 4.最后做的阴影效果 代码解释： 1：自定义view，重写 onDraw方法。 先使用画笔画出折线图表格。 /** * 外框线 */ // 设置颜色 getPaint().setColor(Color.parseColor("#A5A5
Android丨自定义折线图
余杭探险家
06-04 1837
日前，有一个“折现图”的需求，如下图所示：如何自定义折线图？首先将折线图的绘制部分拆分成三部分：第一步，需要定义出“折线图”原点的位置，由图得：可以发现，原点的位置由X轴、Y轴所占空间决定： 计算Y轴宽度 思路：遍历Y轴的绘制文字，用画笔测量其最大宽度，在加上其左右Margin间距即Y轴宽度 计算X轴高度 思路：获取X轴画笔FontMetrics，根据其top、bottom计算出X轴文字高度，在加上其上下Margin间距即X轴高度 X轴 第二步，根据原点位置，绘制X轴轴线、网格线、文本绘制轴线比较简单，沿原
android自定义折线图曲线图
10-15
在Android开发中，自定义视图是实现特定图形或交互效果的重要手段，而自定义折线图和曲线图则是数据可视化中的常见需求。本篇将深入探讨如何在Android环境中实现这两种图表。 首先，我们需要理解折线图和曲线图的...
Android自定义折线图，可左右滑动，可点击
01-10
首先，要创建这样一个自定义折线图，你需要了解Android的图形绘制原理，特别是使用Canvas和Paint类。Canvas是画布，用于绘制图形；Paint则包含了图形的样式和颜色等属性。在自定义视图（View）中，重写onDraw()方法...
Android自定义折线图，可设置基准线，不同点颜色
08-16
总的来说，Android自定义折线图是一项挑战性的任务，它涉及到图形绘制、布局适配、用户交互等多个方面。通过这个知识点的学习，开发者不仅可以创建美观的图表，还能提升对Android系统绘图机制的理解。在实际开发中，...
android自定义简单折线图
06-29
demo可以直接跑起来，未优化界面，供大家参考。
Android 自定义View，实现折线图
06-10
Android 自定义View，实现折线图 ，可参考博客http://blog.csdn.net/yifei1989/article/details/29891211
android自定义折线图表格控件
04-16
android自定义折线图表格控件 采用自己在画布绘制实现的一个折线图控件 支持多条线的展示以及各种自定义的方法
android自定义折线图
10-08
android自定义折线图，在android平台上画XY折线图的例子
Android自定义折线图View实现详解与属性设置
总结来说，这篇文章提供了自定义Android View创建简易折线图的基本框架，包括自定义属性的设置、视图的初始化和绘制过程中的关键步骤。对于想要学习自定义View和图形绘制的开发者来说，这是一个很好的起点，可以帮助...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值