不在图表 Flutter 中显示所有 X 值

Question

我正在使用 syncfusion_flutter_charts 包来创建图表。我需要在底部的x轴（xValueMapper）上显示时间，不是像我刚才那样每小时显示一次，而是每3小时显示一次时间（三的倍数），但仍然显示所有列。下面附上我最终需要得到的截图。

图表

class ChartWidget extends StatefulWidget {
  const ChartWidget({Key? key}) : super(key: key);

  @override
  State<ChartWidget> createState() => _ChartWidget();
}

class _ChartWidget extends State<ChartWidget> {
  late List<_ChartData> data;
  TooltipBehavior? _tooltipBehavior;

  @override
  void initState() {
    data = [
      _ChartData('6:00', 18),
      _ChartData('7:00', 11),
      _ChartData('8:00', 14),
      _ChartData('9:00', 5),
      _ChartData('10:00', 16),
      _ChartData('11:00', 13),
      _ChartData('12:00', 15),
      _ChartData('13:00', 1),
      _ChartData('14:00', 2),
      _ChartData('15:00', 15),
    ];
    _tooltipBehavior = TooltipBehavior(enable: false);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return _buildColumnChart();
  }

  SfCartesianChart _buildColumnChart() {
    return SfCartesianChart(
      plotAreaBorderWidth: 0,
      zoomPanBehavior: ZoomPanBehavior(enablePanning: true),
      primaryXAxis: CategoryAxis(
        visibleMaximum: 5,
        axisLine: const AxisLine(width: 0),
        labelStyle: constants.Styles.xxTinyLtStdTextStyleWhite,
        majorTickLines: const MajorTickLines(width: 0),
        majorGridLines: const MajorGridLines(width: 0),
      ),
      primaryYAxis:
          NumericAxis(isVisible: false, minimum: 0, maximum: 20, interval: 1),
      tooltipBehavior: _tooltipBehavior,
      series: <ChartSeries<_ChartData, String>>[
        ColumnSeries<_ChartData, String>(
            dataSource: data,
            color: constants.Colors.purpleMain,
            borderRadius: BorderRadius.circular(4),
            xValueMapper: (_ChartData data, _) => data.x,
            yValueMapper: (_ChartData data, _) => data.y,
            name: 'Test'),
      ],
    );
  }
}

class _ChartData {
  _ChartData(this.x, this.y);

  final String x;
  final double y;
}

现在

需要做

Answer 1

为了按照提供的屏幕截图实现标签，我们要求为类别轴设置 interval 并删除 visibleMaximum 属性在类别轴中。为了方便起见，我们附上了下面的代码，

primaryXAxis: CategoryAxis(
    interval: 3,
)

不在图表 Flutter 中显示所有 X 值

Display not all X value in chart Flutter

flutter

dart

syncfusion