flutter fl_chart 柱状图 柱条数量较多 实现左右滑动 固定y轴

在Flutter中，使用fl_chart包创建一个具有固定Y轴并实现左右滑动的柱状图，你可以使用BarChart小部件，并结合BarChartGroupData和BarChartGroupData来设置固定的Y轴和左右滑动功能。

以下是一个简单的例子：

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
 
class StackedBarChartPage extends StatefulWidget {
  @override
  _StackedBarChartPageState createState() => _StackedBarChartPageState();
}
 
class _StackedBarChartPageState extends State<StackedBarChartPage> {
  List<BarChartGroupData> rawBarData = [];
  List<BarChartGroupData> showingBarData;
  double maxY = 6;
  double barGroupWidth = 32;
 
  @override
  void initState() {
    super.initState();
    rawBarData = getRandomBarData();
    showingBarData = rawBarData;
  }
 
  List<BarChartGroupData> getRandomBarData() {
    // 生成随机柱状图数据
    return List.generate(10, (index) {
      return BarChartGroupData(
        x: index.toDouble(),
        barRods: [
          BarChartRodData(
            y: 4.0,
            colors: [Colors.blue],
            width: 8,
          ),
        ],
      );
    });
  }
 
  void _onBarTapped(BarChartGroupData groupData) {
    setState(() {
      if (showingBarData.first == groupData) {
        showingBarData = rawBarData;
      } else {
        showingBarData = [groupData];
      }
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BarChart(
        isHorizontal: true,
        barGroupingType: BarGroupingType.grouped,
        maxY: maxY,
        barGroups: showingBarData,
        gridData: FlGridData(show: false),
        touchCallback: (barGroup, touchResponse) {
          if (touchResponse is BarTouchResponse) {
            _onBarTapped(barGroup);
          }
        },
      ),
    );
  }
}

在这个例子中，我们首先在initState方法中生成了一些随机的柱状图数据，并将其存储在rawBarData中。然后，我们通过touchCallback监听柱状图的点击事件，在柱状图被点击时切换显示的数据。通过设置isHorizontal为true，我们使柱状图水平显示，并通过maxY设置固定的Y轴。通过滑动，我们可以查看所有的柱条数据。