本教程详细指导如何在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) 配置
折线图常用于展示数据随时间变化的趋势。
digital-solution-designer
下载
系统化设计数字化解决方案，涵盖方案类型识别、政策背景分析、需求分析、建设思路设计、架构设计（业务、功能、数据、技术四维度）、技术选型、具体建设内容、实施规划、风险评估和投资估算的全流程能力。适用于规划类、申报类、可研类、投标类和工作汇报类等多种方案产出场景，覆盖政府数字化转型和企业数字化转型两大核心领域。
// 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 
