Flutter中如何调整fl_chart柱状图tooltip位置解决内容被遮挡问题

需调整的配置项

针对tooltip内容被边界、柱子裁剪遮挡的问题，直接修改BarTouchTooltipData的以下配置即可解决：

• 开启自动边界避让：新增fitInsideHorizontally: true、fitInsideVertically: true，组件会自动检测tooltip的弹出位置，靠近图表边缘时自动调整偏移方向，不会被图表可视区域裁切
• 修正过小的垂直间距：原配置tooltipBottomMargin: 1会让tooltip与柱子贴得过近，甚至被柱子的渲染层级遮挡，建议调整为8~16的合理值
• 增加tooltip内边距：通过tooltipPadding为文本留出边距空间，避免文字贴边被裁切
• 排查容器裁剪问题：如果调整后仍有遮挡，检查图表外层包裹组件的clipBehavior配置，将默认的硬裁剪改为Clip.none，避免容器层面的内容遮挡

调整后的代码示例

touchTooltipData: BarTouchTooltipData(
  tooltipBgColor: Colors.white,
  tooltipBottomMargin: 8,
  tooltipRoundedRadius: 3,
  // 防遮挡核心配置
  fitInsideHorizontally: true,
  fitInsideVertically: true,
  tooltipPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
  getTooltipItem: (group, groupIndex, rod, rodIndex) {
    String weekDay;
    switch (group.x.toInt()) {
      case 0:
        weekDay = (widget.isKWh)
            ? '${consoKwh(0)} KWh'
            : '${montant(0) * 10000} FCFA';
        break;
      case 1:
        weekDay = (widget.isKWh)
            ? '${consoKwh(1)} KWh'
            : '${montant(1) * 10000} FCFA';
        break;
    }
    return BarTooltipItem(
      weekDay,
      AppTheme.globalFont(
        style: TextStyle(
          color: LightColor.green1,
          fontWeight: FontWeight.bold,
          fontSize: 12
        )
      ),
    );
  },
),

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