You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter fl_chart底部标题被截断显示异常求助

解决FlChart折线图底部标题截断问题

底部标题显示不全的核心原因是没有为底部坐标轴标题预留足够的显示空间,同时容器高度可能也不足以容纳标题和图表内容。可以通过以下几点调整解决:

  • 给底部SideTitles设置reservedSize属性:这个参数会告诉图表在底部预留固定高度的空间来显示标题,避免和图表区域重叠。根据你的字体大小,设置25-30左右的值即可。
  • 适当调整外层SizedBox的高度:如果标题字体较大,原有的270高度可能不够,稍微调高一点(比如300)能确保标题完整显示。
  • (可选)如果标题文字过长,可以自定义getTitlesWidget来调整文字样式,比如缩小字体或换行。

修改后的关键代码部分:

titlesData: FlTitlesData(
  bottomTitles: AxisTitles(
    sideTitles: SideTitles(
      showTitles: true,
      interval: 1,
      reservedSize: 25, // 新增:预留标题显示空间
    ),
  ),
  // 其他标题配置保持不变...
),

同时调整外层容器高度:

SizedBox(
  width: 580,
  height: 300, // 适当调高高度,适配标题显示
  child: LineChart(
    // ... 原有图表配置
  ),
),

这样调整后,底部标题就能完整显示了。

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.16 03:22:11