charts_flutter散点折线图选择行为异常，选散点匹配错误折线点求助

我在使用Flutter开发应用时，采用已归档的charts_flutter包实现散点折线组合图（参考官方示例），遇到了点击交互异常的问题：点击散点时，被选中的折线点并非该散点对应的最近数据点，代码运行无报错，无法直接定位问题根源。

环境信息 #

• Flutter版本：[请替换为你的实际Flutter版本]
• charts_flutter版本：[请替换为你使用的归档版本]

相关代码片段 #

// 散点折线组合图实现示例代码
class ScatterLineComboChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  ScatterLineComboChart(this.seriesList, {this.animate = false});

  factory ScatterLineComboChart.withSampleData() {
    return ScatterLineComboChart(
      _createSampleData(),
      animate: true,
    );
  }

  @override
  Widget build(BuildContext context) {
    return charts.ScatterPlotChart(
      seriesList,
      animate: animate,
      selectionModels: [
        charts.SelectionModelConfig(
          type: charts.SelectionModelType.info,
          changedListener: (charts.SelectionModel model) {
            if (model.hasDatumSelection) {
              print('当前选中数据：${model.selectedDatum}');
            }
          },
        )
      ],
      rendererSpec: {
        'lineRenderer': charts.LineRendererConfig(includePoints: true),
        'scatterRenderer': charts.ScatterPlotRendererConfig(),
      },
    );
  }

  static List<charts.Series<LinearSales, int>> _createSampleData() {
    final lineData = [
      LinearSales(0, 5),
      LinearSales(1, 25),
      LinearSales(2, 100),
      LinearSales(3, 75),
    ];

    final scatterData = [
      LinearSales(0, 10),
      LinearSales(1, 30),
      LinearSales(2, 110),
      LinearSales(3, 80),
    ];

    return [
      charts.Series<LinearSales, int>(
        id: 'Line',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        data: lineData,
      )..setAttribute(charts.rendererIdKey, 'lineRenderer'),
      charts.Series<LinearSales, int>(
        id: 'Scatter',
        colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        data: scatterData,
      )..setAttribute(charts.rendererIdKey, 'scatterRenderer'),
    ];
  }
}

class LinearSales {
  final int year;
  final int sales;

  LinearSales(this.year, this.sales);
}

问题截图 #

解决方案 #

1. 校验数据匹配性 #

确保散点和折线的domain轴数据完全对齐：

• 两边domain值类型一致（比如都是int或都是double）
• 每个散点的domain值都存在对应的折线数据点，避免出现数据偏移

2. 自定义选中匹配逻辑 #

因为charts_flutter已停止维护，内置选中逻辑可能存在bug，可手动在changedListener中匹配最近折线点：

selectionModels: [
  charts.SelectionModelConfig(
    type: charts.SelectionModelType.info,
    changedListener: (charts.SelectionModel model) {
      if (model.hasDatumSelection) {
        // 获取点击的散点数据
        final scatterDatum = model.selectedDatum.first.datum as LinearSales;
        // 遍历折线数据，找到domain最接近的点
        LinearSales? closestLinePoint;
        double minDiff = double.infinity;
        final lineSeries = seriesList.firstWhere((s) => s.id == 'Line');
        
        for (final datum in lineSeries.data) {
          final lineDatum = datum as LinearSales;
          final diff = (lineDatum.year - scatterDatum.year).abs().toDouble();
          if (diff < minDiff) {
            minDiff = diff;
            closestLinePoint = lineDatum;
          }
        }

        // 在这里处理选中后的逻辑，比如高亮对应折线点
        if (closestLinePoint != null) {
          print('匹配到对应折线点：${closestLinePoint.year} - ${closestLinePoint.sales}');
        }
      }
    },
  )
]

3. 统一轴配置 #

确保折线和散点图使用相同的domain轴配置，避免因刻度计算差异导致选中错位：

domainAxis: charts.NumericAxisSpec(
  tickProviderSpec: charts.BasicNumericTickProviderSpec(
    dataIsInWholeNumbers: true, // 若domain为整数则开启
    desiredTickCount: 4,
  ),
),

4. 迁移至维护中图表包（长期方案） #

鉴于charts_flutter已归档，后续无更新，推荐迁移到活跃维护的替代包：

• fl_chart：轻量灵活，支持丰富自定义交互
• syncfusion_flutter_charts：专业级图表库，提供完善的官方支持

内容的提问来源于stack exchange，提问作者Tuấn Hoàng Anh