Flutter技术问询：点击charts_flutter饼图区域能否跳转应用内页面？

我之前也碰到过一模一样的情况——给PieChart加上自定义defaultRenderer后，原本正常的点击选择监听突然就失效了。其实核心问题是自定义Renderer时要确保交互选择的逻辑被正确绑定，下面是具体的解决步骤和代码示例：

1. 确保自定义Renderer不阻断交互 #

你的ArcRendererConfig可以保留所有自定义样式（比如弧宽、标签装饰器等），不需要额外修改什么特殊配置，但要注意PieChart本身的interactionsEnabled属性保持默认的true（如果之前手动修改过的话，改回true即可）。

2. 正确配置SelectionModel监听 #

关键是要确保selectionModels的配置和自定义Renderer兼容，这里核心是使用SelectionModelType.info类型的选择模型，并且在监听回调里正确获取选中的数据：

PieChart(
  series: _buildPieSeries(), // 你的饼图数据系列
  defaultRenderer: ArcRendererConfig(
    // 你的自定义样式配置，比如：
    arcWidth: 70,
    arcRendererDecorators: [
      ArcLabelDecorator(
        labelPosition: ArcLabelPosition.inside,
        labelStyle: TextStyle(fontSize: 12),
      ),
    ],
    // 这里不需要额外配置交互，只要PieChart的interactionsEnabled为true即可
  ),
  selectionModels: [
    SelectionModelConfig(
      type: SelectionModelType.info,
      changedListener: (SelectionModel model) {
        // 只有当有数据被选中时才执行跳转
        if (model.hasDatumSelection) {
          // 获取选中的饼图数据项
          final selectedData = model.selectedDatum.first.datum;
          
          // 根据数据跳转到对应页面，比如根据数据的类型或id区分
          Navigator.of(context).push(MaterialPageRoute(
            builder: (context) => TargetDetailPage(data: selectedData),
          ));
        }
      },
    ),
  ],
)

3. 确保数据系列的可识别性 #

为了能准确区分点击的是哪个饼图切片，你的数据模型最好包含唯一标识（比如id、类型字段），举个简单的例子：

class PieData {
  final String category;
  final double value;
  final Color color;
  final int id; // 唯一标识，用于区分不同切片

  PieData(this.category, this.value, this.color, this.id);
}

// 构建数据系列
List<PieChartSeries<PieData, String>> _buildPieSeries() {
  return [
    PieChartSeries<PieData, String>(
      id: 'category',
      data: [
        PieData('品类A', 35, Colors.blueAccent, 1),
        PieData('品类B', 45, Colors.greenAccent, 2),
        PieData('品类C', 20, Colors.orangeAccent, 3),
      ],
      domainFn: (PieData data, _) => data.category,
      measureFn: (PieData data, _) => data.value,
      colorFn: (PieData data, _) => data.color,
    )
  ];
}

4. 额外检查：避免冲突的Behavior #

如果你给PieChart添加了其他Behavior（比如SelectNearest），确保它们不会和selectionModel的监听冲突。一般来说，只要没有手动禁用选择功能，默认的交互逻辑是可以和自定义Renderer共存的。

按照这个方式配置后，点击饼图的任意切片都能触发跳转逻辑，同时你也能保留自定义的圆弧样式。

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