Syncfusion 笛卡尔图表 - 每个其他值上的分类 X 轴网格线

Question

在同步融合笛卡尔图表中，如何自定义 xaxis

CategoryAxis

以使网格线出现在每个其他条目上。

例如，如果它是每月收入折线图，我希望网格线每隔一个月出现一次：二月、四月、六月等...

我尝试将间隔设置为 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),
        ),
      ),

这是当前输出的屏幕截图

Answer 1

我们怀疑您需要以两个轴标签的间隔渲染网格线，并且没有选项以指定的间隔渲染网格线并使所有轴标签可见。但是，您可以使用 plotBands 属性来实现上述要求，并且 plotBands 将按照给定的 repeatEvery 属性指定的间隔重复。

请参考下面的代码片段：

class _MainAppState extends State<MainApp> {
  late List<ChartSampleData> _data;
  @override
  void initState() {
    _data = [
      ChartSampleData('JAN', 80),
      ChartSampleData('FEB', 50),
      ChartSampleData('MAR', 60),
      ChartSampleData('APR', 20),
      ChartSampleData('MAY', 40),
      ChartSampleData('JUN', 30),
      ChartSampleData('JUL', 60),
      ChartSampleData('AUG', 70),
      ChartSampleData('SEP', 40),
      ChartSampleData('OCT', 90),
      ChartSampleData('NOV', 10),
      ChartSampleData('DEC', 40),
    ];
    super.initState();
  }
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SfCartesianChart(
          primaryXAxis: CategoryAxis(
            plotBands: <PlotBand>[
              PlotBand(
                size: 0,
                repeatEvery: 2,
                repeatUntil: 12,
                borderWidth: 0.4,
                isVisible: true,
                isRepeatable: true,
                dashArray: const [10, 5],
                borderColor: Colors.grey,
              ),
            ],
            maximumLabels: 12,
            labelStyle: const TextStyle(
              color: Colors.blue,
              fontSize: 12,
            ),
            labelPlacement: LabelPlacement.onTicks,
            axisLine: const AxisLine(
              color: Colors.black,
              width: 0.8,
            ),
            majorGridLines: const MajorGridLines(
              width: 0,
            ),
            majorTickLines: const MajorTickLines(
              width: 0.8,
              color: Colors.purpleAccent,
            ),
          ),
          primaryYAxis: NumericAxis(),
          series: <CartesianSeries<ChartSampleData, String>>[
            ColumnSeries<ChartSampleData, String>(
              dataSource: _data,
              xValueMapper: (ChartSampleData sales, int index) => sales.x,
              yValueMapper: (ChartSampleData sales, int index) => sales.y,
            ),
          ],
        ),
      ),
    );
  }
}

快照：

分享了下面有关 PlotBand 的用户指南文档链接，供您参考。

PlotBand：https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#plot-bands。

我们建议您根据需要检查并修改共享代码片段，如果您有进一步疑问，请联系我们。

问候，

哈里·哈拉·苏丹。 K.