Syncfusion笛卡尔图表：CategoryAxis网格线隔项显示且保留全部标签

在Syncfusion笛卡尔图表中，需要自定义X轴的CategoryAxis，实现网格线每隔一个条目显示（例如月度收益折线图中，仅在2月、4月、6月等偶数月份显示网格线）。尝试设置interval: 2后，会隐藏其余月份的标签，需求是保留所有月份标签的同时，只显示指定间隔的网格线。

当前使用的CategoryAxis代码如下：

primaryXAxis: CategoryAxis(
        maximumLabels: 12,
        labelStyle: FontStyles.secondSmallInfo?.apply(
          color: mainWhite,
          fontSizeFactor: 0.4,
        ),
        labelPlacement: LabelPlacement.onTicks,
        axisLine: AxisLine(
          color: mainGrey,
          width: 0.8,
        ),
        majorGridLines: MajorGridLines(
          width: 0.4,
          color: mainGrey.withOpacity(0.5),
          dashArray: const [10, 5],
        ),
        majorTickLines: MajorTickLines(
          width: 0.8,
          color: mainGrey.withOpacity(0.2),
        ),
      ),

当前效果截图：

由于CategoryAxis的interval属性会同时控制标签和网格线的显示频率，无法单独拆分控制。要实现保留所有标签+间隔显示网格线，可以通过以下两个关键配置实现：

1. 使用labelFormatter强制保留所有轴标签
2. 给majorGridLines添加visibleCallback，自定义网格线的显示逻辑

修改后的完整代码如下：

primaryXAxis: CategoryAxis(
        maximumLabels: 12,
        labelStyle: FontStyles.secondSmallInfo?.apply(
          color: mainWhite,
          fontSizeFactor: 0.4,
        ),
        labelPlacement: LabelPlacement.onTicks,
        // 自定义标签格式化器，返回所有原始标签
        labelFormatter: (axisLabelRenderArgs) {
          return ChartAxisLabel(axisLabelRenderArgs.label, axisLabelRenderArgs.textStyle);
        },
        axisLine: AxisLine(
          color: mainGrey,
          width: 0.8,
        ),
        majorGridLines: MajorGridLines(
          width: 0.4,
          color: mainGrey.withOpacity(0.5),
          dashArray: const [10, 5],
          // 控制网格线显示：仅在索引为奇数的位置显示（对应2月、4月...）
          visibleCallback: (gridLineArgs) {
            // 索引从0开始，1对应第二个条目（2月），3对应第四个条目（4月），以此类推
            return gridLineArgs.index % 2 == 1;
          },
        ),
        majorTickLines: MajorTickLines(
          width: 0.8,
          color: mainGrey.withOpacity(0.2),
        ),
      ),

代码说明 #

• labelFormatter：直接返回原始的轴标签，绕过interval对标签的隐藏逻辑，确保所有月份标签都显示。
• visibleCallback：通过判断条目的索引（从0开始），仅让索引为奇数的位置显示网格线，对应偶数月份的位置。如果需要调整间隔（比如每3个条目显示一次），修改取余条件即可（例如gridLineArgs.index % 3 == 2）。

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