Android开发MPAndroidChart实现实时更新曲线图

转载

码海航行侠 2024-11-07 09:24:40

文章标签 android android studio graphql 前端 xml 文章分类 Android 移动开发

在app监测系统中，经常要查看监测曲线，那么曲线怎么生成呢？可以用Android自带的graphics来实现这个功能。今天这个例程，先简化一下功能，从txt读取数据，来模拟从服务器上读取数据。txt文件里的数据是y值，x值为时间，间隔一致。生成的图如图1所示，曲线图中包含了x、y坐标轴，x、y轴物理量标签、箭头和分格值，以及y随时间的曲线。下边来进行介绍具体的操作步骤。

Android开发MPAndroidChart实现实时更新曲线图_xml

图1 y值随时间曲线图

一、界面设计

1、layout代码

2、layout界面图

二、其他资源文件

1、drawable/backgroud.xml

2、values/colors

3、raw/data2.txt

三、java程序

1、LineView.class

2、DrawActivity

一、界面设计

1、layout代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="com.example.mydrawline.DrawActivity">

    <LinearLayout

        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="200dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:orientation="vertical"
        android:gravity="center"
        tools:ignore="MissingConstraints">
        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:layout_marginTop="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            android:gravity="center"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="30dp"
            android:text="监测分析曲线"

            />

        <com.example.mydrawline.LineView
            android:id="@+id/line"
            android:padding="2dp"
            android:layout_marginTop="10dp"
            android:background="@color/gray"
            android:src="@drawable/background"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_weight="0.6"
            tools:ignore="MissingConstraints" />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

2、layout界面图

Android开发MPAndroidChart实现实时更新曲线图_android_02

二、其他资源文件

1、drawable/backgroud.xml

这是曲线的背景设置。

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2dp"
        android:color="@color/gray"
        android:shape="rectangle"
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp"
        />

</shape>

2、values/colors

定义的颜色变量。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="splitLine">#e9e9e9</color>
    <color name="navigationBarColor">#aaaaaa</color>
    <color name="navigationPressed">#dddddd</color>
    <color name="colorPrimary">#008577</color>
    <color name="devicename">#A9A9A9</color> <!--暗灰色 -->
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="white">#FFFFFF</color> <!--白色 -->
    <color name="ivory">#FFFFF0</color> <!--象牙色 -->
    <color name="lightyellow">#FFFFE0</color> <!--亮黄色 -->
    <color name="yellow">#FFFF00</color> <!--黄色 -->
    <color name="snow">#FFFAFA</color> <!--雪白色 -->
    <color name="floralwhite">#FFFAF0</color> <!--花白色 -->
    <color name="lemonchiffon">#FFFACD</color> <!--柠檬绸色 -->
    <color name="cornsilk">#FFF8DC</color> <!--米绸色 -->
    <color name="seashell">#FFF5EE</color> <!--海贝色 -->
    <color name="lavenderblush">#FFF0F5</color> <!--淡紫红 -->
    <color name="papayawhip">#FFEFD5</color> <!--番木色 -->
    <color name="blanchedalmond">#FFEBCD</color> <!--白杏色 -->
    <color name="mistyrose">#FFE4E1</color> <!--浅玫瑰色 -->
    <color name="bisque">#FFE4C4</color> <!--桔黄色 -->
    <color name="moccasin">#FFE4B5</color> <!--鹿皮色 -->
    <color name="navajowhite">#FFDEAD</color> <!--纳瓦白 -->
    <color name="peachpuff">#FFDAB9</color> <!--桃色 -->
    <color name="gold">#FFD700</color> <!--金色 -->
    <color name="pink">#FFC0CB</color> <!--粉红色 -->
    <color name="lightpink">#FFB6C1</color> <!--亮粉红色 -->
    <color name="orange">#FFA500</color> <!--橙色 -->
    <color name="lightsalmon">#FFA07A</color> <!--亮肉色 -->
    <color name="darkorange">#FF8C00</color> <!--暗桔黄色 -->
    <color name="coral">#FF7F50</color> <!--珊瑚色 -->
    <color name="hotpink">#FF69B4</color> <!--热粉红色 -->
    <color name="tomato">#FF6347</color> <!--西红柿色 -->
    <color name="orangered">#FF4500</color> <!--红橙色 -->
    <color name="deeppink">#FF1493</color> <!--深粉红色 -->
    <color name="fuchsia">#FF00FF</color> <!--紫红色 -->
    <color name="magenta">#FF00FF</color> <!--红紫色 -->
    <color name="red">#FF0000</color> <!--红色 -->
    <color name="oldlace">#FDF5E6</color> <!--老花色 -->
    <color name="lightgoldenrodyellow">#FAFAD2</color> <!--亮金黄色 -->
    <color name="linen">#FAF0E6</color> <!--亚麻色 -->
    <color name="antiquewhite">#FAEBD7</color> <!--古董白 -->
    <color name="salmon">#FA8072</color> <!--鲜肉色 -->
    <color name="ghostwhite">#F8F8FF</color> <!--幽灵白 -->
    <color name="mintcream">#F5FFFA</color> <!--薄荷色 -->
    <color name="whitesmoke">#F5F5F5</color> <!--烟白色 -->
    <color name="beige">#F5F5DC</color> <!--米色 -->
    <color name="wheat">#F5DEB3</color> <!--浅黄色 -->
    <color name="sandybrown">#F4A460</color> <!--沙褐色 -->
    <color name="azure">#F0FFFF</color> <!--天蓝色 -->
    <color name="honeydew">#F0FFF0</color> <!--蜜色 -->
    <color name="aliceblue">#F0F8FF</color> <!--艾利斯兰 -->
    <color name="khaki">#F0E68C</color> <!--黄褐色 -->
    <color name="lightcoral">#F08080</color> <!--亮珊瑚色 -->
    <color name="palegoldenrod">#EEE8AA</color> <!--苍麒麟色 -->
    <color name="violet">#EE82EE</color> <!--紫罗兰色 -->
    <color name="darksalmon">#E9967A</color> <!--暗肉色 -->
    <color name="lavender">#E6E6FA</color> <!--淡紫色 -->
    <color name="lightcyan">#E0FFFF</color> <!--亮青色 -->
    <color name="burlywood">#DEB887</color> <!--实木色 -->
    <color name="plum">#DDA0DD</color> <!--洋李色 -->
    <color name="gainsboro">#DCDCDC</color> <!--淡灰色 -->
    <color name="crimson">#DC143C</color> <!--暗深红色 -->
    <color name="palevioletred">#DB7093</color> <!--苍紫罗兰色 -->
    <color name="goldenrod">#DAA520</color> <!--金麒麟色 -->
    <color name="orchid">#DA70D6</color> <!--淡紫色 -->
    <color name="thistle">#D8BFD8</color> <!--蓟色 -->
    <color name="lightgray">#D3D3D3</color> <!--亮灰色 -->
    <color name="lightgrey">#D3D3D3</color> <!--亮灰色 -->
    <color name="tan">#D2B48C</color> <!--茶色 -->
    <color name="chocolate">#D2691E</color> <!--巧可力色 -->
    <color name="peru">#CD853F</color> <!--秘鲁色 -->
    <color name="indianred">#CD5C5C</color> <!--印第安红 -->
    <color name="mediumvioletred">#C71585</color> <!--中紫罗兰色 -->
    <color name="silver">#C0C0C0</color> <!--银色 -->
    <color name="darkkhaki">#BDB76B</color> <!--暗黄褐色-->
    <color name="rosybrown">#BC8F8F</color> <!--褐玫瑰红 -->
    <color name="mediumorchid">#BA55D3</color> <!--中粉紫色 -->
    <color name="darkgoldenrod">#B8860B</color> <!--暗金黄色 -->
    <color name="firebrick">#B22222</color> <!--火砖色 -->
    <color name="powderblue">#B0E0E6</color> <!--粉蓝色 -->
    <color name="lightsteelblue">#B0C4DE</color> <!--亮钢兰色-->
    <color name="paleturquoise">#AFEEEE</color> <!--苍宝石绿 -->
    <color name="greenyellow">#ADFF2F</color> <!--黄绿色 -->
    <color name="lightblue">#ADD8E6</color> <!--亮蓝色 -->
    <color name="darkgray">#A9A9A9</color> <!--暗灰色 -->
    <color name="darkgrey">#A9A9A9</color> <!--暗灰色 -->
    <color name="brown">#A52A2A</color> <!--褐色 -->
    <color name="sienna">#A0522D</color> <!--赭色 -->
    <color name="darkorchid">#9932CC</color> <!--暗紫色 -->
    <color name="palegreen">#98FB98</color> <!--苍绿色 -->
    <color name="darkviolet">#9400D3</color> <!--暗紫罗兰色 -->
    <color name="mediumpurple">#9370DB</color> <!--中紫色 -->
    <color name="lightgreen">#90EE90</color> <!--亮绿色 -->
    <color name="darkseagreen">#8FBC8F</color> <!--暗海兰色 -->
    <color name="saddlebrown">#8B4513</color> <!--重褐色 -->
    <color name="darkmagenta">#8B008B</color> <!--暗洋红 -->
    <color name="darkred">#8B0000</color> <!--暗红色 -->
    <color name="blueviolet">#8A2BE2</color> <!--紫罗兰蓝色 -->
    <color name="lightskyblue">#87CEFA</color> <!--亮天蓝色 -->
    <color name="skyblue">#87CEEB</color> <!--天蓝色 -->
    <color name="gray">#808080</color> <!--灰色 -->
    <color name="grey">#808080</color> <!--灰色 -->
    <color name="olive">#808000</color> <!--橄榄色 -->
    <color name="purple">#800080</color> <!--紫色 -->
    <color name="maroon">#800000</color> <!--粟色 -->
    <color name="aquamarine">#7FFFD4</color> <!--碧绿色 -->
    <color name="chartreuse">#7FFF00</color> <!--黄绿色 -->
    <color name="lawngreen">#7CFC00</color> <!--草绿色 -->
    <color name="mediumslateblue">#7B68EE</color> <!--中暗蓝色 -->
    <color name="lightslategray">#778899</color> <!--亮蓝灰 -->
    <color name="lightslategrey">#778899</color> <!--亮蓝灰 -->
    <color name="slategray">#708090</color> <!--灰石色 -->
    <color name="slategrey">#708090</color> <!--灰石色 -->
    <color name="olivedrab">#6B8E23</color> <!--深绿褐色 -->
    <color name="slateblue">#6A5ACD</color> <!--石蓝色 -->
    <color name="dimgray">#696969</color> <!--暗灰色 -->
    <color name="dimgrey">#696969</color> <!--暗灰色 -->
    <color name="mediumaquamarine">#66CDAA</color> <!--中绿色 -->
    <color name="cornflowerblue">#6495ED</color> <!--菊兰色 -->
    <color name="cadetblue">#5F9EA0</color> <!--军兰色 -->
    <color name="darkolivegreen">#556B2F</color> <!--暗橄榄绿-->
    <color name="indigo">#4B0082</color> <!--靛青色 -->
    <color name="mediumturquoise">#48D1CC</color> <!--中绿宝石 -->
    <color name="darkslateblue">#483D8B</color> <!--暗灰蓝色 -->
    <color name="steelblue">#4682B4</color> <!--钢兰色 -->
    <color name="royalblue">#4169E1</color> <!--皇家蓝 -->
    <color name="turquoise">#40E0D0</color> <!--青绿色 -->
    <color name="mediumseagreen">#3CB371</color> <!--中海蓝 -->
    <color name="limegreen">#32CD32</color> <!--橙绿色 -->
    <color name="darkslategray">#2F4F4F</color> <!--暗瓦灰色 -->
    <color name="darkslategrey">#2F4F4F</color> <!--暗瓦灰色 -->
    <color name="seagreen">#2E8B57</color> <!--海绿色 -->
    <color name="forestgreen">#228B22</color> <!--森林绿 -->
    <color name="lightseagreen">#20B2AA</color> <!--亮海蓝色 -->
    <color name="dodgerblue">#1E90FF</color> <!--闪兰色 -->
    <color name="midnightblue">#191970</color> <!--中灰兰色 -->
    <color name="aqua">#00FFFF</color> <!--浅绿色 -->
    <color name="cyan">#00FFFF</color> <!--青色 -->
    <color name="springgreen">#00FF7F</color> <!--春绿色 -->
    <color name="lime">#00FF00</color> <!--酸橙色 -->
    <color name="mediumspringgreen">#00FA9A</color> <!--中春绿色 -->
    <color name="darkturquoise">#00CED1</color> <!--暗宝石绿 -->
    <color name="deepskyblue">#00BFFF</color> <!--深天蓝色 -->
    <color name="darkcyan">#008B8B</color> <!--暗青色 -->
    <color name="teal">#008080</color> <!--水鸭色 -->
    <color name="green">#008000</color> <!--绿色 -->
    <color name="darkgreen">#006400</color> <!--暗绿色 -->
    <color name="blue">#0000FF</color> <!--蓝色 -->
    <color name="mediumblue">#0000CD</color> <!--中兰色 -->
    <color name="darkblue">#00008B</color> <!--暗蓝色 -->
    <color name="navy">#000080</color> <!--海军色 -->
    <color name="black">#000000</color> <!--黑色 -->



</resources>

3、raw/data2.txt

这是y值数据，因为数据量较大，本例不在此处贴出，会在本人资源中上传，请需要者自取。亲们也可以用自己的数据来生成曲线。

三、java程序

1、LineView.class

package com.example.mydrawline;


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;


public class LineView extends View {
    private final static String X_KEY = "Xpos";
    private final static String Y_KEY = "Ypos";
    int t=120;
    int t2=167;
    int x0=150;
    int y0=500;
    int xp=1020;
    int yp1=100;
    int yp2=1000;


    private List<Map<String, Integer>> mListPoint = new ArrayList<Map<String, Integer>>();

    Paint mPaint = new Paint();

    public LineView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
    }

    public LineView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    public LineView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);


        Paint p = new Paint();
        p.setStrokeWidth(2);
        p.setColor(Color.BLUE);// 设置红色
        p.setTextAlign(Paint.Align.CENTER);
        p.setTextSize(40);

//        画x轴
        for(int i=0;i<6;i++) {
            canvas.drawText(Integer.toString(i), x0+i*t2, y0+40, p);

        }
        canvas.drawText("t/us", xp-40, y0-50, p);//非线性曲线x坐标项目
        canvas.drawText("U/mv", x0+60, yp1+50, p);//非线性曲线x坐标项目
//        画y轴
        for(int i=0;i<10;i++) {
            canvas.drawText(String.valueOf((float)(i-5)/1000), x0-70, y0-(int)((1*(i-5))*90), p);
        }


        canvas.drawLine(x0, y0, xp, y0, p);// 画x轴线
        canvas.drawLine(x0, yp1, x0, yp2, p);// 画y轴线

//        画x轴箭头
        Path path = new Path();
        path.moveTo(xp-30, y0+15);// 此点为多边形的起点
        path.lineTo(xp, y0);
        path.lineTo(xp-30, y0-15);
        path.close(); // 使这些点构成封闭的多边形
        canvas.drawPath(path, p);

//        画y轴箭头
        Path path1 = new Path();
        path1.moveTo(x0+15, yp1);// 此点为多边形的起点
        path1.lineTo(x0-15, yp1);
        path1.lineTo(x0, yp1-30);
        path1.close(); // 使这些点构成封闭的多边形
        canvas.drawPath(path1, p);
        mPaint.setColor(Color.YELLOW);
        mPaint.setStrokeWidth(3);
        mPaint.setAntiAlias(true);

        for (int index=0; index<mListPoint.size(); index++)
        {
            if (index > 0)
            {
                canvas.drawLine(mListPoint.get(index-1).get(X_KEY), mListPoint.get(index-1).get(Y_KEY),
                        mListPoint.get(index).get(X_KEY), mListPoint.get(index).get(Y_KEY), mPaint);
                canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG| Paint.FILTER_BITMAP_FLAG));
            }
        }
    }
    /**
     * @param curX  which x position you want to draw.
     * @param curY	which y position you want to draw.
     */
    public void setLinePoint(int curX, int curY)
    {
        Map<String, Integer> temp = new HashMap<String, Integer>();
        temp.put(X_KEY, curX);
        temp.put(Y_KEY, curY);
        mListPoint.add(temp);
        invalidate();
    }
}

2、DrawActivity

package com.example.mydrawline;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.res.Resources;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;

import java.io.InputStream;
import java.util.Scanner;

public class DrawActivity extends Activity {
    private static final int MSG_DATA_CHANGE = 0x11;
    private LineView mLineView;

    private Handler mHandler;
    private int mX =150;

    int no;
    Scanner scan;
    @SuppressLint("HandlerLeak")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.draw);
        final Resources res = super.getResources();//获取资源文件

        mLineView = (LineView) this.findViewById(R.id.line);
        InputStream input1 = res.openRawResource(R.raw.data2);
                    scan = new Scanner(input1);

        mHandler = new Handler(){
            @Override
            public void handleMessage(Message msg) {
                // TODO Auto-generated method stub
                switch (msg.what) {
                    case MSG_DATA_CHANGE:
                        mLineView.setLinePoint(msg.arg1, msg.arg2);
                        break;

                    default:
                        break;
                }
                super.handleMessage(msg);
            }
        };

        new Thread(){
            public void run() {
                while(scan.hasNext())
                {
                    no++;
                    double data= Double.parseDouble(scan.nextLine());
                    if(no % 60==0) {
                        Message message = new Message();
                        message.what = MSG_DATA_CHANGE;
                        message.arg1 = mX;
                        message.arg2 =500- (int) (data * 100);
                        mHandler.sendMessage(message);
                        try {
                            sleep(1);
                        } catch (InterruptedException e) {
                            // TODO Auto-generated catch block
                            e.printStackTrace();
                        }

                        mX += 1;
                    }
                }

            };
        }.start();
    }




    private Handler handler = new Handler();
    private Runnable task = new Runnable() {
        public void run() {
            // TODO Auto-generated method stub
            handler.postDelayed(this,1*2000);//设置循环时间，此处是5秒
        }
    };
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：在内核源码中通过execve执行python脚本

下一篇：大模型自回归模型怎么做

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯