Android开发 —— 实时动态折线图绘制

Afison

已于 2025-04-12 15:44:15 修改

阅读量333

点赞数 4

分类专栏： Android 文章标签： android

于 2025-04-12 15:40:47 首次发布

本文链接：https://blog.csdn.net/Afison/article/details/147166198

版权

Android 专栏收录该内容

20 篇文章

订阅专栏

在 Android 开发中，实时折线图绘制通常涉及实时数据的更新和图形界面的展示。我们可以使用 Canvas 来绘制图形，或者使用一些现成的库来更高效地实现这一功能。以下是两种常见的实现方法：

1. 使用 MPAndroidChart 库

MPAndroidChart 是一个广泛使用的开源库，提供了便捷的方式来绘制各种图表，包括实时折线图。步骤：

1.引入库依赖

在 build.gradle 中加入以下依赖：

   dependencies {
       implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
   }

2.在布局文件中添加 LineChart 控件

在 activity_main.xml 或者你想显示折线图的布局文件中，加入：

<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/lineChart"
    android:layout_width="match_parent"
    android:layout_height="300dp" />

3.在代码中实现实时折线图：

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.formatter.ValueFormatter;

public class MainActivity extends AppCompatActivity {

    private LineChart lineChart;
    private LineDataSet lineDataSet;
    private LineData lineData;
    private ArrayList<Entry> entries;
    private int counter = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        lineChart = findViewById(R.id.lineChart);
        entries = new ArrayList<>();
        lineDataSet = new LineDataSet(entries, "Real-time Data");
        lineDataSet.setColor(Color.RED);
        lineDataSet.setValueTextColor(Color.BLACK);

        lineData = new LineData(lineDataSet);
        lineChart.setData(lineData);
        lineChart.invalidate();  // Refresh the chart

        // Simulate real-time data update
        new Thread(new Runnable() {
            @Override
            public void run() {
                while (true) {
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            updateChart();
                        }
                    });
                    try {
                        Thread.sleep(1000);  // Update every 1 second
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }

    private void updateChart() {
        entries.add(new Entry(counter, (float) Math.random() * 100));  // Add random data
        counter++;
        lineData.notifyDataChanged();
        lineChart.notifyDataSetChanged();
        lineChart.invalidate();  // Redraw the chart
    }
}

我们在 LineChart 控件中添加数据，通过 Entry 来表示每个数据点（X轴是时间，Y轴是数据值）。
每隔1秒钟生成一个新的数据点并更新图表。
使用 Thread 来模拟实时数据更新，实际开发中可以替换为从服务器或者传感器获取的实时数据。

2. 使用 Canvas 自定义绘制

如果你不想依赖外部库，也可以使用 Android 自带的 Canvas 来手动绘制折线图。步骤：

1.创建自定义 View：

创建一个自定义的 View 来绘制实时折线图。

public class RealTimeLineChartView extends View {

    private Paint paint;
    private Path path;
    private ArrayList<Float> dataPoints;

    public RealTimeLineChartView(Context context) {
        super(context);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(5);
        paint.setStyle(Paint.Style.STROKE);
        path = new Path();
        dataPoints = new ArrayList<>();
    }

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

        if (dataPoints.size() > 0) {
            path.reset();
            for (int i = 0; i < dataPoints.size(); i++) {
                float x = i * 10;  // X axis with a step of 10px
                float y = dataPoints.get(i);
                if (i == 0) {
                    path.moveTo(x, y);
                } else {
                    path.lineTo(x, y);
                }
            }
            canvas.drawPath(path, paint);
        }
    }

    public void addDataPoint(float dataPoint) {
        dataPoints.add(dataPoint);
        if (dataPoints.size() > getWidth() / 10) {
            dataPoints.remove(0);  // Keep the number of points within the view width
        }
        invalidate();  // Trigger a redraw
    }
}

2.在布局文件中使用自定义 View：

<com.example.yourapp.RealTimeLineChartView
    android:id="@+id/realtimeLineChart"
    android:layout_width="match_parent"
    android:layout_height="300dp"/>

3.实时更新数据：

在你的 Activity 中实时更新图表的数据：

public class MainActivity extends AppCompatActivity {

       private RealTimeLineChartView chartView;
       private int counter = 0;

       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);

           chartView = findViewById(R.id.realtimeLineChart);

           // Simulate real-time data update
           new Thread(new Runnable() {
               @Override
               public void run() {
                   while (true) {
                       runOnUiThread(new Runnable() {
                           @Override
                           public void run() {
                               chartView.addDataPoint((float) (Math.random() * 300));  // Add random data
                           }
                       });
                       try {
                           Thread.sleep(1000);  // Update every 1 second
                       } catch (InterruptedException e) {
                           e.printStackTrace();
                       }
                   }
               }
           }).start();
       }
   }

总结: