使用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.javapublic 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数据的图表更新逻辑都必须在这些回调函数内部执行。

Vizard

AI驱动的视频编辑器

101 查看详情

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

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

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

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

// WarrantyItem.javapublic 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() {                    @Override                    public void onComplete(@NonNull Task task) {                        if (task.isSuccessful()) {                            ArrayList 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 entries) {        ArrayList 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.javapublic 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 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() {                    @Override                    public void onComplete(@NonNull Task 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 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() {                    @Override                    public void onComplete(@NonNull Task task) {                        if (task.isSuccessful()) {                            ArrayList 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 entries) {        ArrayList 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() {                    @Override                    public void onComplete(@NonNull Task task) {                        if (task.isSuccessful()) {                            ArrayList 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 entries) {        LineDataSet lineDataSet = new LineDataSet(entries, "月度趋势");        lineDataSet.setColors(ColorTemplate.JOYFUL_COLORS);        lineDataSet.setValueTextColor(Color.BLACK

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