Android Studio 实现绘制折线图APP

已于 2022-03-21 10:50:00 修改
阅读量5.9k 收藏 79
点赞数 5
文章标签： android studio android android-studio
于 2022-02-10 15:38:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46574738/article/details/122861336
版权

目录

一.总体设计

二.具体模块实现

三.效果展示

一.总体设计

1.寻找规律，公式化的生成坐标系。

2.将生成坐标系的关键参数设置为可自定义，从而可变的可以生成自己想要的坐标系。

3.将需要绘制的点绘制在坐标系中并生成折现图。

二.具体模块实现

1.界面设计

        定为 android:id="@+id/image" 的ImageView主要负责绘制的显示，在绘制的时候通过绑定到这个IMageView上进行显示，其余的 EditTex , Button 主要负责数据的输入和功能的选择。

<?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"
    android:padding="10dp">
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentLeft="true"
        >
    </ImageView>
    <Button
        android:id="@+id/x"
        android:text="x个数:"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/numberx"/>
    <EditText
        android:id="@+id/numberx"
        android:layout_width="100dp"
        android:layout_height="45dp"
        android:layout_alignParentRight="true"/>
    <Button
        android:id="@+id/y"
        android:text="y个数:"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/numberx"
        android:layout_toLeftOf="@+id/numbery"/>
    <EditText
        android:id="@+id/numbery"
        android:layout_width="100dp"
        android:layout_height="45dp"
        android:layout_alignParentRight="true"
        android:layout_below="@id/numberx"/>
    <Button
        android:id="@+id/maxofy"
        android:text="y最大值:"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/numbery"
        android:layout_toLeftOf="@+id/maxy"/>
    <EditText
        android:id="@+id/maxy"
        android:layout_width="100dp"
        android:layout_height="45dp"
        android:layout_alignParentRight="true"
        android:layout_below="@id/numbery"/>
    <Button
        android:id="@+id/comfir"
        android:text="确认"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@id/maxy"
        android:onClick="comfir"/>
    <Button
        android:text="绘制点:"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/comfir"
        android:layout_toLeftOf="@id/point"/>
    <EditText
        android:id="@+id/point"
        android:layout_width="100dp"
        android:layout_height="45dp"
        android:layout_alignParentRight="true"
        android:layout_below="@id/comfir"/>
    <Button
        android:id="@+id/paint"
        android:text="绘制"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@id/point"
        android:onClick="paint"/>
    <Button
        android:id="@+id/clear"
        android:text="清除所有"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/paint"
        android:layout_below="@id/point"
        android:onClick="clear"/>
</RelativeLayout>

2.坐标系的生成：

       chart()负责坐标系的生成，将我们要的目标坐标系进行绘制显示，详细代码解释看注释，关于Canvas类的使用和绘图的实现可以参照我的另一个博客中我自己的理解。链接为：

Android Studio Canvas类（基本绘图实现）_.'~'.的博客-CSDN博客_androidstudiocanvas

    public void chart(){
        //将imageView绑定到布局界面中id为image的IMageView
        imageView=(ImageView)findViewById(R.id.image);
        //以下内容的实现可以看我的另一个博客的详细解释，上有链接
        newb = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        canvasTemp = new Canvas(newb);
        //Canvas canvasTemp2=new Canvas(newb);
        canvasTemp.drawColor(Color.TRANSPARENT);
        p = new Paint();
        //防锯齿
        p.setAntiAlias(true);
        p.setStyle(Paint.Style.STROKE);//STROKE,FILL
        p.setStrokeWidth(5);
        p.setColor(Color.LTGRAY);
        p.setTextAlign(Paint.Align.CENTER);
        p.setTextSize(40);
        p.setColor(Color.BLACK);
        p.setStyle(Paint.Style.FILL);//STROKE,FILL
        p.setStrokeWidth(2);
        p2=p;
        /*绘制表格，表格的绘制是有规律的，我先确认原点和x，y轴的长度，然后通过原点的的坐标和x，y                        
        轴的长度就可以得到x，y轴的终点坐标，最终通过两点确定一条直线就可以画出x，y轴了。*/
        canvasTemp.drawText("0", startx1-10, starty1+30, p);//原点
        canvasTemp.drawLine(startx1,starty1, endx1+50,starty1,p);// 绘制x轴
        canvasTemp.drawText("x", endx1+50+10, starty1+35, p);  //标记x轴
        canvasTemp.drawLine(startx1,starty1, startx1,endy1-50,p);// 绘制y轴
        canvasTemp.drawText("y", startx1-15,endy1-50, p);  //标记y轴
        //绘制x y轴箭头，与上同理，两点确定一条直线进行绘制
        canvasTemp.drawLine(endx1+50,starty1, endx1+50-10,starty1-10,p);
        canvasTemp.drawLine(endx1+50,starty1, endx1+50-10,starty1+10,p);
        canvasTemp.drawLine(startx1,endy1-50, startx1-10,endy1-50+10,p);
        canvasTemp.drawLine(startx1,endy1-50, startx1+10,endy1-50+10,p);
        /*以下是绘制间隔线，间隔线可以理解为缩短了的平移了的x，y轴（也就是说是x，y轴的缩短和平 
        移——>两点确定一条直线中的两坐标变化），确定好x，y轴的间隔线间距就可以通过x或者y坐标增加 
        或减少相应间隔倍数就可以实现间隔线的规律绘制*/
        //绘制x轴间隔线
        for(int i=1;i<=allX;i++){
            canvasTemp.drawLine(startx1+xinterval*i,starty1, startx1+xinterval*i,starty1-10,p);
            if(allX>30){
                p2.setTextSize(20);
            }
            canvasTemp.drawText(String.valueOf(i), startx1+xinterval*i, starty1+35, p2);
        }
        //绘制y轴间隔线
        for(int i=1;i<=allY;i++){
            canvasTemp.drawLine(startx1,starty1-yinterval*i, startx1+10,starty1-yinterval*i,p);
            if(allX>25){
                p2.setTextSize(20);
            }else{
                p2.setTextSize(35);
                canvasTemp.drawText(String.valueOf( (i*fully/allY)), startx1-55, starty1-yinterval*i+10, p2);
            }
        }
        //将绘制的内容在布局文件中的IMageView中显示
        imageView.setImageBitmap(newb);
    }

3.自定义坐标系参数获取并绘制：

        在第二点 chart() 方法中，坐标轴的绘制是有固定的原点，x，y长度和设置好的x，y轴间隔数，基于这三个固定的值，确定一个坐标系，因此在自定义坐标系是更改这几个参数中的一两个就可以改变坐标系绘制的数据和坐标系绘制在屏幕中的位置，comfir(View view) 中就是在修改参数的值以改变绘制的坐标系。

 public void comfir(View view) {
        EditText numberx=(EditText)findViewById(R.id.numberx);
        EditText numbery=(EditText)findViewById(R.id.numbery);
        EditText maxy=(EditText)findViewById(R.id.maxy);
        if(!numberx.getText().toString().trim().equals("")&&!numbery.getText().toString().trim().equals("")&&!maxy.getText().toString().trim().equals("")){
            /*//判断输入框中内容是否为空的错误方法：
            numberx.getText()!=null;
            numberx.getText().toString()!=null;
            numberx.getText().toString().equals("");*/
            allX= Integer.valueOf(String.valueOf(numberx.getText()));
            allY= Integer.valueOf(String.valueOf(numbery.getText()));
            fully= Integer.valueOf(String.valueOf(maxy.getText()));
            xinterval=(endx1-startx1)/allX;
            yinterval=(starty1-endy1)/allY;
            //rule1=(starty1-endy1)/allY;
            //rule2=(starty1-endy1)/fully;
            mypoint=new float[allX];
            all=0;
            chart();
        }
    }

4.将输入的点绘制在坐标系中：

          paint(View view)方法中的思路也是两点确定一条直线，从而画出折线，通过 x1,y1,x2,y2 将输入的数据的坐标信息进行存储，在画线时将这次和上次的数据拿出就能绘制出一条直线。

 public void paint(View view) {
        EditText point=(EditText)findViewById(R.id.point);
        if(all==fully){
            Toast.makeText(this,"已达最大x值",Toast.LENGTH_SHORT).show();
            point.setText("");
        }else{
            if(!point.getText().toString().trim().equals("")){
                thispoint=Float.valueOf(String.valueOf(point.getText()));
                if(thispoint>fully){
                    Toast.makeText(this,"大于最大y值,请重新输入！",Toast.LENGTH_SHORT).show();
                    point.setText("");
                }else{
                    mypoint[all]=thispoint;
                    //将输入的数据通过和y轴坐标的关系得到输入数据绘制的屏幕坐标
                    x2=startx1+xinterval*(all+1); //x轴按间隔递增就好（单单计数）
                    y2=starty1-thispoint/fully*rule1;/*y轴需要通过y轴实际最大长度和设定的最 
                    大值关系得到输入的值所应该绘制的y坐标*/
                    p.setStrokeWidth(10);
                    canvasTemp.drawPoint(x2,y2,p);
                    if(all>0){
                        p.setStrokeWidth(5);
                        canvasTemp.drawLine(x1,y1,x2,y2,p);
                    }
                    all++;
                }
                x1=x2;
                y1=y2;
            }
        }
        point.setText("");
    }

 5.参数设置和 onCreate 调用实现。

public class MainActivity extends AppCompatActivity {
    //默认屏幕长宽，横屏状态
    int w=1980;
    int h=1020;
    //默认坐标原点
    float startx1=100;
    float starty1=900;
    //默认x y轴终点，以默认屏幕长宽为标准
    float endx1=1500;
    float endy1=100;
    int allX=10;//默认x轴计数个数
    int allY=10;//默认y轴等分个数
    float fully=100;//默认最大y值
    //默认x y轴间隔值，以上面数据为基础得出
    float xinterval=(endx1-startx1)/allX;
    float yinterval=(starty1-endy1)/allY;
    //绘制点数据所需数据
    int all=0;//当前绘制个数,初始为0
    float thispoint;
    float [] mypoint=new float[ allX];; //存储点数据
    float x1,x2,y1,y2;
    float rule1=(starty1-endy1);
    float min=0;
    float max=999999;
    float x3,y3;
    //int rule2=(starty1-endy1)/fully;
    private ImageView imageView;
    private Bitmap newb;
    private  Canvas canvasTemp;
    private Paint p;
    private Paint p2;
    private Paint p3;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        chart();

    }
   /* ...... */
}

三.效果展示

 ”确认”键上面三个参数可实现对坐标系的自定义。“清除所有”按钮会将折线图清除，不会将坐标系也清除。

四.功能展望

1.多个折现图同时展示。

2.加入颜色元素增加美观性。

3.更改或优化折线图数据输入方式。

4...

注：以上内容均为原创。

.'~'.
关注
  • 5
    点赞
  • 踩
  • 79
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
Android画折线图和柱状图
06-29
Android画折线图和柱状图---源码，源码中附有详细解释，能正确运行，还有程序效果图。
Android开发Canvas画折线图
03-22
用Canvas画的折线图，将坐标点输入之后就能自动绘制。
Android实现统计图——条形图和折线图
2201_75488282的博客
06-15 838
通过这样的方式，你可以绘制两条不同颜色的折线，并且不会填充它们围起来的空间。你可以根据需要调整数据点和其他属性，以适应你的具体需求。这样，当用户点击某个月份的柱条时，会在柱条上方显示所需的提示信息。对象，一个用于绘制文本，另一个用于绘制线条，分别设置了它们的颜色、文本大小、对齐方式、样式和线宽。当鼠标悬停在某个月份的折线上时，会在折线上方显示相应的提示信息。为了实现绘制两条不同颜色的折线，并且确保它们围起来的空间不被填充，在。这意味着只绘制线条的轮廓，而不是填充线条内部。绘制的所有线条都会是黑色的。
Android中折线图实现方法（各类图表实现）
热门推荐
张平的专栏
12-20 2万+
需要外部资源：mpandroidchartlibrary-2-1-6.jar 下载地址： http://download.csdn.net/detail/u011084603/9369473效果图： 实现Android折线图，基于mpandroidchartlibrary-2-1-6.jar。 直接上代码，后面含有适用于Android studio的gradle文件。如果在eclipse中使
Android studio 绘制折线图
le9406的博客
12-04 7137
1.在项目的build.gridle里面的allprojects添加 maven { url “https://jitpack.io” } llprojects { repositories { google() jcenter() maven { url "https://jitpack.io" } } } 2.导入相关的依赖，在...
android 温度折线图,使用自定义View实现天气折线图效果
weixin_42461108的博客
05-28 1213
下面会详细的介绍实现的过程。1.构想思路其实在拿到设计的一个效果，我们首先要做的就是去思考，怎么实现，就算不好实现，也要实现一个折中的两边都可以妥协的方案。由于当前是要展示10天以上的天气的情况，那么如果采用一个view绘制的形式肯定会影响到性能，那其实很快就想到了ListView，这不就是一个横向的ListView的效果么，考虑到ListView并没有横向的效果，转而就想到了RecyclerVi...
Android使用MPAndroidChart 绘制折线图
weixin_68443051的博客
06-22 461
1.1在项目根目录下的。
android 字符串折线图,Android 使用 MPAndroidChart 实现折线图
weixin_35651191的博客
05-26 760
Android 使用 MPAndroidChart 实现折线图做Android项目的时候用到了折线图，不光折线图，还可能遇到很多的图表需要展示渲染，自己手画的话那好玩了，今天使用MPAndroidChart插件来实现接入EChartsMPAndroidChart 库开发环境开发环境主要包括开源库版本、IDE的环境和操作系统，不同环境会有不同的配置和使用方法，很多技术贴不喜欢在文章开头声明自己所用的...
Android Studio平台下使用hellochart实现从txt文件读取数据绘折线图
NYH19961125的博客
11-12 2719
Android Studio平台下使用hellochart实现从文本读取数据绘折线图 本人是一个刚刚接触Android不超过两个月的小白，最近在做的论文是关于这一块的相关内容。所有的东西都是自学的，听导师的建议也是第一次留个这样的资料，可能有很多地方理解不到位，也欢迎大家给我更多的建议，让我学习进步。 首先先导入了一个第三方包：hellocharts-library-1.5.8.jar，目的是用来...
android studio 统计图生成app（柱状图/折线图/饼图/折线柱状结合图）
03-29
在Android Studio中开发一款应用，实现统计图生成是常见的需求，尤其对于数据分析或者展示来说尤为重要。本项目专注于四种类型的图表：柱状图、折线图、饼图以及折线柱状结合图，这些图表能够直观地展示数据变化趋势...
Android APP源码 蓝牙接收数据，折线图实时显示
12-19
4. **折线图绘制**：在Android中，常用的图表库有MPAndroidChart，它支持多种图表类型，包括折线图。首先，你需要在布局文件中添加Chart组件，然后在代码中初始化并设置数据。折线图的数据由Entry对象表示，每个...
第二篇、APP画简易的折线图
11-02
工程对应于我的博客《【Android Studio学习】第二篇、APP实现画简易的波形图》https://blog.csdn.net/Learning1232/article/details/127650162
Android studio画曲线
05-10
本篇将深入探讨如何利用Achartengine库在Android Studio中实现手机传感器数据的实时曲线绘制，并讲解如何导出历史数据。 Achartengine是一个轻量级的图表库，适用于Android应用，它支持多种图表类型，包括线形图、...
AndroidStudio实现的录音机可以显示波形和频谱
11-13
这个项目基于Android Studio，利用其强大的集成开发环境和丰富的Android SDK资源来实现。下面我们将详细探讨如何实现这一功能。 首先，我们需要了解录音的基础知识。在Android中，录音主要依赖`android.media....
Android 自定义折线图实现教程
xq610928的博客
04-30 1496
前言： 各位同学大家好，有段时间没有给大家更新文章了，具体多久我也记不清楚了。最近重新复习了一下原生安卓的知识点，写了一个安卓原生自定义折线图的效果，就想着分享给大家。希望帮助到各位学习和工作，那份废话不多说我们正式开始。 效果图： 具体实现 自定义 ：BrokenView private Context mContext; private int bWidth,bHeight; // 左边距 除去下边距的距离 private int totalValue, pJValue;
Android使用achartengine绘制折线图linechart
Northwestern的专栏
12-13 1182
01 需求 最近项目需求需要接收数据，绘制折线图，具体需求如下： 双Y轴，其中一个可以动态调节y轴刻度，另外一个刻度固定 显示两条折线 X轴显示时间 动态的实时的展示数据 最后的效果如下图所示 02 技术选型 A 自定义view 实现绘制曲线， 实时刷新， y轴自适应， 多曲线绘制， 工期紧，难度略大 B 使用开源组件： AChartEngine MPAnd...
Android studio下载与安装（Windows）
最新发布
nanke_yh的博客
07-24 305
Android studio下载与安装（Windows）
android studio 实现折线图
09-16
要在Android Studio中实现折线图，你可以使用开源图表库MPAndroidChart。下面是实现折线图的基本步骤： 1. 在项目的build.gradle文件中的dependencies块中添加以下依赖项： ```groovy implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' ``` 2. 在你的布局文件中添加一个`LineChart`视图： ```xml <com.github.mikephil.charting.charts.LineChart android:id="@+id/chart" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 3. 在你的Activity或Fragment中，找到`LineChart`视图并对其进行配置和设置数据： ```java LineChart lineChart = findViewById(R.id.chart); // 创建数据集合 ArrayList<Entry> entries = new ArrayList<>(); entries.add(new Entry(0, 4)); entries.add(new Entry(1, 6)); entries.add(new Entry(2, 2)); // 添加更多数据... // 创建数据集 LineDataSet dataSet = new LineDataSet(entries, "折线图"); // 设置数据集的样式 dataSet.setColor(Color.BLUE); dataSet.setValueTextColor(Color.RED); // 创建数据集合的集合 ArrayList<ILineDataSet> dataSets = new ArrayList<>(); dataSets.add(dataSet); // 创建折线图数据对象 LineData lineData = new LineData(dataSets); // 配置折线图 lineChart.setData(lineData); lineChart.getDescription().setEnabled(false); lineChart.invalidate(); ``` 这里只是一个简单的示例，你可以根据自己的需求进行进一步的配置和定制。你可以通过修改数据集合、样式、坐标轴等来创建不同类型的折线图。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值