Fl_chart左侧坐标轴样式优化：解决刻度值换行问题

核心解决思路 #

针对Y轴刻度换行、与竖线间距不足的问题，从文本样式控制、坐标轴空间预留两个方向入手，以下是具体实现方案：

方案1：强制单行显示+直接调整间距 #

通过配置LeftAxisData的刻度文本样式，强制单行并设置间距，是最直接的解决方式：

LeftAxisData(
  // 调整刻度文本与竖线的间距（关键参数）
  tickLabelPadding: const EdgeInsets.only(left: 8.0),
  // 自定义刻度文本，强制单行显示
  getTitles: (double value) {
    return SideTitleWidget(
      axisSide: AxisSide.left,
      child: Text(
        // 去掉不必要的小数位，减少文本长度（可选，按需保留）
        value.toStringAsFixed(0),
        style: const TextStyle(
          fontSize: 12,
          softWrap: false, // 禁止自动换行
          overflow: TextOverflow.visible, // 强制显示完整文本
        ),
      ),
    );
  },
  // 保留竖线（按需设置）
  showAxisLine: true,
)

方案2：预留足够坐标轴空间 #

如果文本长度确实较长，可通过调整图表布局，给Y轴预留更宽的显示区域：

LineChartData(
  layoutConfig: const LayoutConfig(
    leftMargin: 45, // 增大左侧边距，给Y轴刻度足够宽度
    topMargin: 10,
    rightMargin: 10,
    bottomMargin: 20,
  ),
  // 其他图表配置...
  leftAxisData: LeftAxisData(
    tickLabelPadding: const EdgeInsets.only(left: 8.0),
    getTitles: (value) => SideTitleWidget(
      axisSide: AxisSide.left,
      child: Text(
        value.toString(),
        style: const TextStyle(softWrap: false),
      ),
    ),
  ),
)

方案3：固定文本容器宽度（复杂场景适配） #

针对特殊布局需求，可通过包裹固定宽度的容器，确保文本单行显示且对齐：

LeftAxisData(
  getTitles: (double value) {
    return SideTitleWidget(
      axisSide: AxisSide.left,
      child: Container(
        width: 55, // 设置固定宽度，避免换行
        alignment: Alignment.centerRight, // 文本右对齐，贴近竖线但有间距
        child: Text(
          value.toString(),
          style: const TextStyle(fontSize: 12),
          softWrap: false,
        ),
      ),
    );
  },
)

关键参数说明 #

• tickLabelPadding：直接控制刻度文本与Y轴竖线的间距，数值越大间距越宽
• softWrap: false：禁止文本自动换行，强制单行
• toStringAsFixed(0)：移除小数位（如1200.0转为1200），减少文本长度避免换行
• leftMargin：增大图表左侧边距，确保Y轴有足够空间容纳长文本

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