如何移除Flutter图表中重复Y轴标签与下方黄色线条？

问题1：Y轴标签重复 #

原因 #

fl_chart的SideTitles默认会根据Y轴数值范围自动计算刻度间隔，自动生成的刻度包含大量浮点数（如0.9、1.1、1.2这类），回调中使用value.toInt()做匹配时，所有整数部分相同的浮点数都会命中同一个case分支，导致同一个标签重复渲染。另外非目标刻度返回的Text(" ")属于带内容的渲染组件，会占用布局空间，进一步加剧显示异常。

修复方法 #

• 给左侧Y轴的SideTitles设置固定刻度间隔interval: 2，减少无意义浮点数刻度生成
• 在getTitlesWidget回调开头增加非整数判断，浮点数刻度直接返回空组件，避免toInt()误匹配
• 非目标刻度位置不要返回带空格的文本，替换为SizedBox.shrink()空组件，消除无效占位

问题2：图表下方异常黄色线条 #

原因 #

该线条是Flutter debug模式独有的布局溢出警告条，不是fl_chart生成的图表元素。现有代码中底部X轴设置的reservedSize: 35不足以容纳标签渲染高度，或是外层包裹图表的容器高度不足，导致底部标题区域布局超出可用边界触发警告。卸载重装应用不涉及布局逻辑修改，无法解决该问题。

修复方法 #

二选一即可解决：

• 适当调大bottomTitles的reservedSize值到40~45区间，给X轴标签留足渲染空间
• 调大外层包裹LineChart的容器高度，保证图表整体有足够布局空间

注：该警告条仅在debug模式显示，release版本会自动隐藏，但仍建议调整尺寸修复溢出问题，避免不同机型出现显示异常。

修复后完整代码参考 #

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class LineTitles {
  static GetTitleData() => FlTitlesData(
      show: true,
      bottomTitles: AxisTitles(
        sideTitles: SideTitles(
            showTitles: true,
            reservedSize: 42,
            interval: 3,
            getTitlesWidget: (value, meta) {
              // 过滤非整数刻度，避免误匹配
              if (value % 1 != 0) {
                return SizedBox.shrink();
              }
              switch (value.toInt()) {
                case 2:
                  return Text(
                    'MAR',
                    style: TextStyle(
                      color: Color(0xff68737d),
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                    ),
                  );
                case 5:
                  return Text(
                    'JUN',
                    style: TextStyle(
                      color: Color(0xff68737d),
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                    ),
                  );
                case 8:
                  return Text('SEP',
                      style: TextStyle(
                        color: Color(0xff68737d),
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                      ));
              }
              return SizedBox.shrink();
            }),
      ),
      leftTitles: AxisTitles(
          sideTitles: SideTitles(
              showTitles: true,
              reservedSize: 35,
              interval: 2,
              getTitlesWidget: (value, meta) {
                // 过滤非整数刻度，避免误匹配
                if (value % 1 != 0) {
                  return SizedBox.shrink();
                }
                switch (value.toInt()) {
                  case 1:
                    return Text(
                      '10k',
                      style: TextStyle(
                        color: Color(0xff68737d),
                        fontWeight: FontWeight.bold,
                        fontSize: 15,
                      ),
                    );
                  case 3:
                    return Text(
                      '30k',
                      style: TextStyle(
                        color: Color(0xff68737d),
                        fontWeight: FontWeight.bold,
                        fontSize: 15,
                      ),
                    );
                  case 5:
                    return Text('50k',
                        style: TextStyle(
                          color: Color(0xff68737d),
                          fontWeight: FontWeight.bold,
                          fontSize: 15,
                        )
                    );
                }
                return SizedBox.shrink();
              },
          )));
}

内容的提问来源于stack exchange，提问作者pomoworko.com