使用MPAndroidChart从Firestore数据库显示数据：完整教程-java教程-PHP中文网

使用mpandroidchart从firestore数据库显示数据：完整教程

本教程详细指导如何在Android应用中，利用MPAndroidChart库将来自Firestore数据库的数据可视化为饼图和折线图。文章将深入探讨Firebase异步数据处理机制、数据模型设计，以及如何将Firestore文档高效地转换为MPAndroidChart所需的图表条目，并提供完整的代码示例和注意事项，帮助开发者构建动态数据驱动的图表应用。

1. 引言：MPAndroidChart与Firestore数据可视化

在现代Android应用开发中，数据可视化是提升用户体验的关键一环。MPAndroidChart是一个功能强大、高度可定制的Android图表库，而Firestore作为Google Firebase的NoSQL云数据库，提供了实时、可扩展的数据存储解决方案。将这两者结合，可以轻松地从云端获取数据并以直观的图表形式展示。

本教程将重点解决从Firestore异步加载数据，并将其适配到MPAndroidChart的饼图（PieChart）和折线图（LineChart）中的常见问题。

2. MPAndroidChart基础设置

在将Firestore数据集成之前，首先需要对MPAndroidChart进行基本的初始化和配置。

2.1 饼图 (PieChart) 配置

饼图通常用于展示各部分占总体的比例。以下是基本的饼图配置代码：

// MainActivity.java
public class MainActivity extends AppCompatActivity {
    private PieChart pieChart;
    // ... 其他成员变量

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pieChart = findViewById(R.id.piechartmain);
        setPieChart(); // 调用饼图设置方法
        // ...
    }

    private void setPieChart() {
        pieChart.setDrawHoleEnabled(true); // 绘制中心圆孔
        pieChart.setUsePercentValues(true); // 使用百分比值
        pieChart.setEntryLabelTextSize(12); // 设置条目标签文字大小
        pieChart.setEntryLabelColor(Color.BLACK); // 设置条目标签文字颜色
        pieChart.setCenterText("费用支出"); // 设置中心文本
        pieChart.setCenterTextSize(24); // 设置中心文本大小
        pieChart.getDescription().setEnabled(false); // 禁用描述文本

        Legend l = pieChart.getLegend(); // 获取图例
        l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP); // 垂直对齐方式
        l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT); // 水平对齐方式
        l.setOrientation(Legend.LegendOrientation.VERTICAL); // 图例方向
        l.setDrawInside(false); // 不在图表内部绘制
        l.setEnabled(true); // 启用图例
    }
}

登录后复制

2.2 折线图 (LineChart) 配置

折线图常用于展示数据随时间变化的趋势。

// MainActivity.java (接上文)
public class MainActivity extends AppCompatAppCompatActivity {
    // ...
    LineChart lineChart;
    // ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // ...
        lineChart = findViewById(R.id.linechart);
        lineChart.setTouchEnabled(true); // 启用触摸交互
        lineChart.setPinchZoom(true); // 启用捏合缩放

        // 基础样式设置，数据加载后会重新设置
        lineChart.getDescription().setEnabled(false); // 禁用描述文本
        // ...
    }
}

登录后复制

3. Firestore数据获取与异步处理

Firestore的API是异步的。这意味着当你发起一个数据查询请求时，结果不会立即可用。相反，你需要提供一个回调函数（OnCompleteListener），当数据成功获取或发生错误时，该函数会被调用。因此，所有依赖于Firestore数据的图表更新逻辑都必须在这些回调函数内部执行。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

4. 从Firestore加载数据到饼图 (PieChart)

假设Firestore中有一个名为 Warranty 的集合，每个文档包含 type（字符串，表示类别）和 amount（浮点数，表示金额）字段。

4.1 数据模型设计（可选但推荐）

为了方便地将Firestore文档转换为Java对象，可以创建一个简单的POJO（Plain Old Java Object）类。

// WarrantyItem.java
public class WarrantyItem {
    private String type;
    private float amount;

    public WarrantyItem() {
        // 无参构造函数是Firestore自动反序列化所必需的
    }

    public WarrantyItem(String type, float amount) {
        this.type = type;
        this.amount = amount;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public float getAmount() {
        return amount;
    }

    public void setAmount(float amount) {
        this.amount = amount;
    }
}

登录后复制

4.2 查询与转换数据

修改 loadPiechartData 方法，使其从Firestore加载数据。

// MainActivity.java (接上文)
public class MainActivity extends AppCompatActivity {
    // ...
    FirebaseFirestore db = FirebaseFirestore.getInstance();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // ...
        loadPiechartData(); // 在onCreate中调用
    }

    private void loadPiechartData() {
        db.collection("Warranty")
                .get()
                .addOnCompleteListener(new OnCompleteListener<QuerySnapshot>() {
                    @Override
                    public void onComplete(@NonNull Task<QuerySnapshot> task) {
                        if (task.isSuccessful()) {
                            ArrayList<PieEntry> entries = new ArrayList<>();
                            for (QueryDocumentSnapshot document : task.getResult()) {
                                // 方法一：使用toObject()自动映射 (推荐，需定义POJO)
                                WarrantyItem item = document.toObject(WarrantyItem.class);
                                entries.add(new PieEntry(item.getAmount(), item.getType()));

                                // 方法二：手动提取字段
                                // float amount = document.get("amount", Float.class);
                                // String type = document.getString("type");
                                // if (type != null && amount != null) {
                                //     entries.add(new PieEntry(amount, type));
                                // }
                            }
                            // 数据获取成功后，在此处更新饼图
                            updatePieChart(entries);

                        } else {
                            Log.e("TAG", "Error getting documents: ", task.getException());
                        }
                    }
                });
    }

    private void updatePieChart(ArrayList<PieEntry> entries) {
        ArrayList<Integer> colors = new ArrayList<>();
        for (int color : ColorTemplate.MATERIAL_COLORS) {
            colors.add(color);
        }
        for (int color : ColorTemplate.VORDIPLOM_COLORS) {
            colors.add(color);
        }

        PieDataSet dataSet = new PieDataSet(entries, "月度开销");
        dataSet.setColors(colors);
        dataSet.setValueTextSize(12f);
        dataSet.setValueTextColor(Color.BLACK);

        PieData data = new PieData(dataSet);
        data.setDrawValues(true);
        data.setValueFormatter(new PercentFormatter(pieChart)); // 使用百分比格式化
        data.setValueTextSize(12f);
        data.setValueTextColor(Color.BLACK);

        pieChart.setData(data);
        pieChart.invalidate(); // 刷新图表
        pieChart.animateY(1000, Easing.EaseInOutQuad); // 添加动画
    }
}

登录后复制

5. 从Firestore加载数据到折线图 (LineChart)

对于折线图，假设Firestore中有一个名为 MonthlyData 的集合，每个文档包含 monthIndex（整数，表示月份索引，作为X轴）和 value（浮点数，表示对应月份的值，作为Y轴）。

5.1 数据模型设计

// MonthlyDataItem.java
public class MonthlyDataItem {
    private int monthIndex; // 例如：0代表一月，1代表二月
    private float value;

    public MonthlyDataItem() {}

    public MonthlyDataItem(int monthIndex, float value) {
        this.monthIndex = monthIndex;
        this.value = value;
    }

    public int getMonthIndex() { return monthIndex; }
    public void setMonthIndex(int monthIndex) { this.monthIndex = monthIndex; }
    public float getValue() { return value; }
    public void setValue(float value) { this.value = value; }
}

登录后复制

5.2 查询与转换数据

修改 getEntries 方法，使其从Firestore加载数据。

// MainActivity.java (接上文)
public class MainActivity extends AppCompatActivity {
    // ...
    LineChart lineChart;
    LineData lineData;
    LineDataSet lineDataSet;
    ArrayList<Entry> lineEntries; // 明确泛型类型
    // ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // ...
        lineChart = findViewById(R.id.linechart);
        lineChart.setTouchEnabled(true);
        lineChart.setPinchZoom(true);

        loadLineChartData(); // 调用加载折线图数据的方法
        // ...
    }

    private void loadLineChartData() {
        db.collection("MonthlyData")
                .orderBy("monthIndex") // 通常折线图数据需要排序
                .get()
                .addOnCompleteListener(new OnCompleteListener<QuerySnapshot>() {
                    @Override
                    public void onComplete(@NonNull Task<QuerySnapshot> task) {
                        if (task.isSuccessful()) {
                            lineEntries = new ArrayList<>();
                            for (QueryDocumentSnapshot document : task.getResult()) {
                                MonthlyDataItem item = document.toObject(MonthlyDataItem.class);
                                // X轴通常是顺序索引，Y轴是数据值
                                lineEntries.add(new Entry(item.getMonthIndex(), item.getValue()));
                            }
                            // 数据获取成功后，在此处更新折线图
                            updateLineChart(lineEntries);

                        } else {
                            Log.e("TAG", "Error getting documents: ", task.getException());
                        }
                    }
                });
    }

    private void updateLineChart(ArrayList<Entry> entries) {
        lineDataSet = new LineDataSet(entries, "月度趋势");
        lineDataSet.setColors(ColorTemplate.JOYFUL_COLORS); // 设置颜色
        lineDataSet.setValueTextColor(Color.BLACK);
        lineDataSet.setValueTextSize(18f);
        lineDataSet.setLineWidth(3f); // 设置线宽
        lineDataSet.setCircleRadius(5f); // 设置数据点圆圈半径
        lineDataSet.setDrawValues(true); // 绘制数据点值
        lineDataSet.setDrawFilled(true); // 填充线条下方区域

        lineData = new LineData(lineDataSet);
        lineData.setValueTextSize(12f);
        lineData.setValueTextColor(Color.BLACK);

        lineChart.setData(lineData);
        lineChart.invalidate(); // 刷新图表
        lineChart.animateX(1000); // 添加X轴动画
    }
}

登录后复制

6. 完整示例代码 (MainActivity.java)

package com.example.mpchartfirestore; // 根据你的项目包名修改

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.charts.PieChart;
import com.github.mikephil.charting.components.Legend;
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.data.PieData;
import com.github.mikephil.charting.data.PieDataSet;
import com.github.mikephil.charting.data.PieEntry;
import com.github.mikephil.charting.formatter.PercentFormatter;
import com.github.mikephil.charting.utils.ColorTemplate;
import com.github.mikephil.charting.animation.Easing;

import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.firestore.QueryDocumentSnapshot;
import com.google.firebase.firestore.QuerySnapshot;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    private PieChart pieChart;
    private LineChart lineChart;
    private FirebaseFirestore db = FirebaseFirestore.getInstance();

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

        // 初始化饼图
        pieChart = findViewById(R.id.piechartmain);
        setPieChartConfig(); // 饼图基础配置
        loadPieChartDataFromFirestore(); // 从Firestore加载饼图数据

        // 初始化折线图
        lineChart = findViewById(R.id.linechart);
        setLineChartConfig(); // 折线图基础配置
        loadLineChartDataFromFirestore(); // 从Firestore加载折线图数据
    }

    /**
     * 配置饼图的基本样式和行为
     */
    private void setPieChartConfig() {
        pieChart.setDrawHoleEnabled(true);
        pieChart.setUsePercentValues(true);
        pieChart.setEntryLabelTextSize(12);
        pieChart.setEntryLabelColor(Color.BLACK);
        pieChart.setCenterText("费用支出");
        pieChart.setCenterTextSize(24);
        pieChart.getDescription().setEnabled(false);

        Legend l = pieChart.getLegend();
        l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
        l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
        l.setOrientation(Legend.LegendOrientation.VERTICAL);
        l.setDrawInside(false);
        l.setEnabled(true);
    }

    /**
     * 从Firestore加载数据并更新饼图
     */
    private void loadPieChartDataFromFirestore() {
        db.collection("Warranty") // 假设集合名为"Warranty"
                .get()
                .addOnCompleteListener(new OnCompleteListener<QuerySnapshot>() {
                    @Override
                    public void onComplete(@NonNull Task<QuerySnapshot> task) {
                        if (task.isSuccessful()) {
                            ArrayList<PieEntry> entries = new ArrayList<>();
                            for (QueryDocumentSnapshot document : task.getResult()) {
                                // 将Firestore文档映射到WarrantyItem对象
                                WarrantyItem item = document.toObject(WarrantyItem.class);
                                if (item != null) {
                                    entries.add(new PieEntry(item.getAmount(), item.getType()));
                                }
                            }
                            updatePieChart(entries); // 使用获取到的数据更新饼图
                        } else {
                            Log.e("MainActivity", "Error getting PieChart documents: ", task.getException());
                        }
                    }
                });
    }

    /**
     * 使用给定的数据更新饼图
     * @param entries 饼图条目列表
     */
    private void updatePieChart(ArrayList<PieEntry> entries) {
        ArrayList<Integer> colors = new ArrayList<>();
        for (int color : ColorTemplate.MATERIAL_COLORS) {
            colors.add(color);
        }
        for (int color : ColorTemplate.VORDIPLOM_COLORS) {
            colors.add(color);
        }

        PieDataSet dataSet = new PieDataSet(entries, "月度开销");
        dataSet.setColors(colors);
        dataSet.setValueTextSize(12f);
        dataSet.setValueTextColor(Color.BLACK);

        PieData data = new PieData(dataSet);
        data.setDrawValues(true);
        data.setValueFormatter(new PercentFormatter(pieChart));
        data.setValueTextSize(12f);
        data.setValueTextColor(Color.BLACK);

        pieChart.setData(data);
        pieChart.invalidate(); // 刷新图表
        pieChart.animateY(1000, Easing.EaseInOutQuad); // 动画效果
    }

    /**
     * 配置折线图的基本样式和行为
     */
    private void setLineChartConfig() {
        lineChart.setTouchEnabled(true);
        lineChart.setPinchZoom(true);
        lineChart.getDescription().setEnabled(false); // 禁用描述文本
        // 其他折线图特有配置，如X轴、Y轴的配置可以在这里添加
    }

    /**
     * 从Firestore加载数据并更新折线图
     */
    private void loadLineChartDataFromFirestore() {
        db.collection("MonthlyData") // 假设集合名为"MonthlyData"
                .orderBy("monthIndex") // 确保数据按月份顺序显示
                .get()
                .addOnCompleteListener(new OnCompleteListener<QuerySnapshot>() {
                    @Override
                    public void onComplete(@NonNull Task<QuerySnapshot> task) {
                        if (task.isSuccessful()) {
                            ArrayList<Entry> entries = new ArrayList<>();
                            for (QueryDocumentSnapshot document : task.getResult()) {
                                // 将Firestore文档映射到MonthlyDataItem对象
                                MonthlyDataItem item = document.toObject(MonthlyDataItem.class);
                                if (item != null) {
                                    entries.add(new Entry(item.getMonthIndex(), item.getValue()));
                                }
                            }
                            updateLineChart(entries); // 使用获取到的数据更新折线图
                        } else {
                            Log.e("MainActivity", "Error getting LineChart documents: ", task.getException());
                        }
                    }
                });
    }

    /**
     * 使用给定的数据更新折线图
     * @param entries 折线图条目列表
     */
    private void updateLineChart(ArrayList<Entry> entries) {
        LineDataSet lineDataSet = new LineDataSet(entries, "月度趋势");
        lineDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
        lineDataSet.setValueTextColor(Color.BLACK

登录后复制

以上就是使用MPAndroidChart从Firestore数据库显示数据：完整教程的详细内容，更多请关注php中文网其它相关文章！