基于fl_chart将三个折线图合并为单图表的技术问询

你不需要彻底重构现有代码，只需要调整数据加载逻辑和折线图组件的参数接收能力，就能把三组折线合并到同一个图表中，具体步骤如下：

1. 合并数据加载逻辑，避免重复IO #

把原来三个独立的异步数据加载函数，合并成一个函数一次性读取JSON并处理出三组数据系列。这样可以避免重复读取本地JSON文件，提升性能。

示例代码：

import 'dart:convert';
import 'package:flutter/services.dart';
import 'package:fl_chart/fl_chart.dart';

Future<List<Map<String, dynamic>>> loadAllForceSeries() async {
  // 一次性读取本地JSON
  final jsonString = await rootBundle.loadString('assets/force_data.json');
  final List<dynamic> rawData = json.decode(jsonString);

  // 分别处理最大值、最小值、平均值的折线数据点
  final maxSpots = <FlSpot>[];
  final minSpots = <FlSpot>[];
  final avgSpots = <FlSpot>[];

  for (int i = 0; i < rawData.length; i++) {
    final item = rawData[i];
    maxSpots.add(FlSpot(i.toDouble(), item['maxForce'].toDouble()));
    minSpots.add(FlSpot(i.toDouble(), item['minForce'].toDouble()));
    avgSpots.add(FlSpot(i.toDouble(), item['avgForce'].toDouble()));
  }

  // 返回包含三组系列的列表，每组包含数据点、颜色、名称（用于图例）
  return [
    {'spots': maxSpots, 'color': Colors.red, 'name': '开合力最大值'},
    {'spots': minSpots, 'color': Colors.blue, 'name': '开合力最小值'},
    {'spots': avgSpots, 'color': Colors.green, 'name': '开合力平均值'},
  ];
}

2. 修改折线图组件，支持多系列输入 #

调整你原来的generateLineChart组件，让它能接收多组折线数据，然后在同一个LineChart实例中渲染多条LineChartBarData。

示例代码：

Widget generateCombinedLineChart(List<Map<String, dynamic>> seriesList) {
  return LineChart(
    LineChartData(
      // 将多组数据转换为LineChartBarData列表
      lineBarsData: seriesList.map((series) {
        return LineChartBarData(
          spots: series['spots'],
          color: series['color'],
          width: 2,
          dotData: const FlDotData(show: true),
          belowBarData: const BarAreaData(show: false),
        );
      }).toList(),
      // 可选：添加图例、坐标轴配置
      titlesData: const FlTitlesData(
        bottomTitles: AxisTitles(sideTitles: SideTitles(showTitles: true)),
        leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: true)),
      ),
      gridData: const FlGridData(show: true),
      borderData: FlBorderData(show: true),
    ),
  );
}

如果需要保留原组件的单折线复用能力，可以给参数加默认值，比如：

Widget generateLineChart({
  List<FlSpot>? singleSeries,
  List<Map<String, dynamic>>? multiSeries,
}) {
  final lineBars = multiSeries != null
      ? multiSeries.map((series) => LineChartBarData(spots: series['spots'], color: series['color'])).toList()
      : [LineChartBarData(spots: singleSeries!)];

  return LineChart(LineChartData(lineBarsData: lineBars));
}

3. 页面渲染：用单个FutureBuilder替代三个 #

原来的三个FutureBuilder可以替换成一个，调用合并后的加载函数，传入改造后的折线图组件即可。

示例代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: FutureBuilder<List<Map<String, dynamic>>>(
        future: loadAllForceSeries(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return generateCombinedLineChart(snapshot.data!);
          } else if (snapshot.hasError) {
            return Text('数据加载失败：${snapshot.error}');
          }
          // 加载中状态
          return const CircularProgressIndicator();
        },
      ),
    ),
  );
}

关键注意点 #

• 确保三组数据的X轴坐标完全对齐，这样折线在同一图表上的位置才准确；
• 如果原有加载函数有复杂的数据处理逻辑，可以把公共逻辑抽成工具方法，避免代码冗余；
• 可以根据需求添加图例、折线样式区分（颜色、宽度、点样式），提升图表可读性。

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