使用Flutter包flutter_charts实现实时图表的最优实现方式是什么

解决方案 #

状态逻辑不需要放在数据集处理的静态方法中，直接抽离到GetxController中即可，无需修改现有DummyTracker组件的代码，具体实现如下：

1. 编写GetX控制器，封装数据逻辑

把数据初始化、生成图表Series、更新数据的逻辑都放在控制器中，将图表数据设置为可观察类型：

import 'package:get/get.dart';
import 'package:charts_flutter/flutter.dart' as charts;

// 替换为你自己定义的颜色常量
const Color Green = Color(0xFF2ECC71);
const Color Red = Color(0xFFE74C3C);
const Color Blue = Color(0xFF3498DB);

class DummyChartController extends GetxController {
  // 可观察的图表系列数据，修改后会自动通知UI更新
  final RxList<charts.Series<Dummy, DateTime>> chartSeries = <charts.Series<Dummy, DateTime>>[].obs;

  @override
  void onInit() {
    super.onInit();
    // 页面初始化时加载默认模拟数据
    loadMockData();
  }

  /// 加载模拟数据，对应你原来的sampleDummyData逻辑
  void loadMockData() {
    final dummy1 = [
      Dummy(DateTime(2017, 9, 19), 5),
      Dummy(DateTime(2017, 9, 26), 10),
      Dummy(DateTime(2017, 10, 3), 30),
      Dummy(DateTime(2017, 10, 10), 45),
    ];
    final dummy2 = [
      Dummy(DateTime(2017, 9, 19), 30),
      Dummy(DateTime(2017, 9, 26), 25),
      Dummy(DateTime(2017, 10, 3), 20),
      Dummy(DateTime(2017, 10, 10), 25),
    ];
    final dummy3 = [
      Dummy(DateTime(2017, 9, 19), 30),
      Dummy(DateTime(2017, 9, 26), 40),
      Dummy(DateTime(2017, 10, 3), 30),
      Dummy(DateTime(2017, 10, 10), 20),
    ];
    _buildSeries([dummy1, dummy2, dummy3]);
  }

  /// 通用生成Series的方法，新旧数据都复用该逻辑
  void _buildSeries(List<List<Dummy>> data) {
    final List<String> names = ["Type1", "Type2", "Type3"];
    final List<Color> lineColors = [Green, Red, Blue];
    final List<charts.Series<Dummy, DateTime>> returnList = [];
    for (var i = 0; i < data.length; i++) {
      returnList.add(charts.Series<Dummy, DateTime>(
        id: names[i],
        domainFn: (Dummy dummy, _) => dummy.time,
        measureFn: (Dummy dummy, _) => dummy.numDummies,
        data: data[i],
        seriesColor: charts.ColorUtil.fromDartColor(lineColors[i]),
        labelAccessorFn: (_, __) => names[i],
      ));
    }
    // 更新可观察数据
    chartSeries.value = returnList;
  }

  /// 对外暴露的更新数据方法，传入新数据集即可触发UI刷新
  void updateChartData(List<List<Dummy>> newData) {
    _buildSeries(newData);
  }
}

// 你的原有数据类
class Dummy {
  final DateTime time;
  final int numDummies;
  Dummy(this.time, this.numDummies);
}

2. 注册控制器

在使用图表的页面初始化前注册控制器，可直接在main.dart中注册，也可在页面的初始化方法中注册：

// 全局注册控制器，整个应用范围内都可以获取
Get.put(DummyChartController());

3. 改造页面组件调用逻辑

用GetX的Obx组件包裹DummyTracker，监听可观察数据的变化，自动更新UI：

// 先获取控制器实例
final DummyChartController controller = Get.find<DummyChartController>();

// 原有实例化部分改造为：
Expanded(
  child: Container(
    child: Obx(() => DummyTracker(
      seriesList: controller.chartSeries.value,
      animate: true,
    )),
  )
)

后续使用说明 #

需要更新图表数据时，直接调用controller.updateChartData(你的新数据集)即可，GetX会自动触发图表刷新，不需要手动调用任何状态更新方法，原有DummyTracker组件保持无状态即可正常工作。

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