如何在Flutter中从Firestore取数据并渲染SfCartesianChart

1. 完善GraphModel的Firestore映射能力 #

首先确保你的GraphModel能将Firestore文档转换为模型实例，添加工厂构造函数：

class GraphModel {
  final String productName;
  final int count;

  GraphModel({required this.productName, required this.count});

  // 从Firestore文档转为模型实例
  factory GraphModel.fromFirestore(DocumentSnapshot doc) {
    final data = doc.data() as Map<String, dynamic>;
    return GraphModel(
      productName: data['productName'] ?? '',
      count: (data['count'] ?? 0) as int,
    );
  }
}

2. 异步获取并绑定Firestore数据 #

Firestore数据是异步返回的，你可以选择一次性获取数据或实时监听数据变化，以下是两种实现方式：

方式一：一次性获取数据（FutureBuilder） #

用FutureBuilder处理数据加载的不同状态，完成后将数据传入图表：

Widget build(BuildContext context) {
  // 定义获取Firestore数据的方法
  Future<List<GraphModel>> _fetchChartData() async {
    final snapshot = await FirebaseFirestore.instance.collection('你的集合名称').get();
    return snapshot.docs.map((doc) => GraphModel.fromFirestore(doc)).toList();
  }

  return Scaffold(
    body: Center(
      child: FutureBuilder<List<GraphModel>>(
        future: _fetchChartData(),
        builder: (context, snapshot) {
          // 加载中状态
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const CircularProgressIndicator();
          }
          // 错误状态
          if (snapshot.hasError) {
            return Text('加载失败: ${snapshot.error}');
          }
          // 无数据状态
          if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return const Text('暂无数据');
          }
          // 成功加载，渲染图表
          return Container(
            child: SfCartesianChart(
              legend: const Legend(isVisible: true),
              primaryXAxis: const CategoryAxis(),
              series: <ChartSeries>[
                LineSeries<GraphModel, String>(
                  dataSource: snapshot.data!,
                  xValueMapper: (GraphModel data, _) => data.productName,
                  yValueMapper: (GraphModel data, _) => data.count,
                )
              ],
            ),
          );
        },
      ),
    ),
  );
}

方式二：实时监听数据变化（StreamBuilder） #

如果需要图表实时同步Firestore的数据更新，使用StreamBuilder：

Widget build(BuildContext context) {
  // 监听Firestore集合的实时变化
  Stream<List<GraphModel>> _chartDataStream() {
    return FirebaseFirestore.instance.collection('你的集合名称')
        .snapshots()
        .map((snapshot) => snapshot.docs.map((doc) => GraphModel.fromFirestore(doc)).toList());
  }

  return Scaffold(
    body: Center(
      child: StreamBuilder<List<GraphModel>>(
        stream: _chartDataStream(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const CircularProgressIndicator();
          }
          if (snapshot.hasError) {
            return Text('加载失败: ${snapshot.error}');
          }
          if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return const Text('暂无数据');
          }
          return Container(
            child: SfCartesianChart(
              legend: const Legend(isVisible: true),
              primaryXAxis: const CategoryAxis(),
              series: <ChartSeries>[
                LineSeries<GraphModel, String>(
                  dataSource: snapshot.data!,
                  xValueMapper: (GraphModel data, _) => data.productName,
                  yValueMapper: (GraphModel data, _) => data.count,
                )
              ],
            ),
          );
        },
      ),
    ),
  );
}

3. 关键注意事项 #

• 替换代码中的你的集合名称为Firestore中对应的集合名
• 确保Firestore规则允许读取该集合（开发阶段可临时设置为allow read, write: if true;，生产环境需配置安全规则）
• 检查Firestore字段名（如productName、count）与GraphModel中的字段名完全一致，避免映射错误

内容的提问来源于stack exchange，提问作者Unknown Programmer