Flutter中用flutter_charts实现饼图点击显示自定义矩形框可行吗？

首先需要明确：flutter_charts的饼图组件默认点击事件逻辑和折线/柱状图不同，没有直接绑定扇区点击的回调，需要通过以下两种方式实现需求：

方法一：通过手势检测手动判断点击扇区 #

给饼图外层包裹GestureDetector，通过点击坐标计算落点所属的扇区：

import 'dart:math' as math;

// 定义选中扇区索引变量
int? selectedSliceIndex;
// 饼图数据与总值
final List<DataItem> chartData = [...];
final double totalValue = chartData.fold(0, (sum, item) => sum + item.value);
// 饼图中心坐标（可通过LayoutBuilder获取组件尺寸后计算）
final double centerX = 150;
final double centerY = 150;

// 组件结构
Stack(
  children: [
    GestureDetector(
      onTapDown: (TapDownDetails details) {
        final renderBox = context.findRenderObject() as RenderBox;
        final localPosition = renderBox.globalToLocal(details.globalPosition);
        
        double currentAngle = 0;
        for (var i = 0; i < chartData.length; i++) {
          final dataItem = chartData[i];
          final sliceAngle = (dataItem.value / totalValue) * 360;
          // 计算点击点相对饼图中心的角度
          final dx = localPosition.dx - centerX;
          final dy = localPosition.dy - centerY;
          final clickAngle = (math.atan2(dy, dx) * 180 / math.pi + 360) % 360;
          
          if (clickAngle >= currentAngle && clickAngle < currentAngle + sliceAngle) {
            setState(() {
              selectedSliceIndex = i;
            });
            break;
          }
          currentAngle += sliceAngle;
        }
      },
      child: PieChart(
        data: chartData,
        // 其他饼图配置参数
      ),
    ),
    // 显示自定义矩形框
    if (selectedSliceIndex != null)
      Positioned(
        left: 20,
        top: 20,
        child: Container(
          width: 160,
          height: 90,
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(color: Colors.grey.shade300),
            borderRadius: BorderRadius.circular(8),
            boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 4)],
          ),
          child: Padding(
            padding: EdgeInsets.all(12),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('选中项：${chartData[selectedSliceIndex!].label}'),
                SizedBox(height: 8),
                Text('数值：${chartData[selectedSliceIndex!].value}'),
              ],
            ),
          ),
        ),
      ),
  ],
)

方法二：利用包内置回调（若版本支持） #

部分较新的flutter_charts版本已新增饼图扇区点击回调，可直接使用：

PieChart(
  data: chartData,
  onSliceTap: (int index) {
    setState(() {
      selectedSliceIndex = index;
    });
  },
  // 其他饼图配置参数
)

注意事项 #

• 计算饼图中心坐标时，建议用LayoutBuilder获取组件实际尺寸，避免硬编码导致的坐标偏差；
• 若饼图存在padding或偏移，需在坐标计算时同步调整偏移量。

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