当前位置:实例文章 » 其他实例» [文章]flutter fl_chart 柱状图 柱条数量较多 实现左右滑动 固定y轴

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

发布人:shili8 发布时间:2025-03-15 05:32 阅读次数:0

**Flutter FlChart柱状图实现**

在 Flutter 中使用 FlChart 库绘制柱状图是一个很好的选择。下面我们将一步步地讲解如何实现一个可以左右滑动的柱状图,且固定Y轴。

###依赖和导入首先,我们需要在 `pubspec.yaml` 文件中添加 FlChart 库的依赖:

ymldependencies:
 flutter:
 sdk: flutter fl_chart: ^0.53.0


然后,重新运行 `flutter pub get` 来安装依赖。

接下来,在 Dart 文件中导入 FlChart 库:

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


### 数据准备假设我们有一个包含柱状图数据的列表:

dartList barData = [
 BarData(
 spots: [
 FlSpot(0,10),
 FlSpot(1,20),
 FlSpot(2,15),
 FlSpot(3,25),
 FlSpot(4,18),
 // ...
 ],
 ),
];


### 构建柱状图现在,我们可以使用 `BarChart` widget 来绘制柱状图:

dartclass MyHomePage extends StatefulWidget {
 @override _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
 List barData = [
 BarData(
 spots: [
 FlSpot(0,10),
 FlSpot(1,20),
 FlSpot(2,15),
 FlSpot(3,25),
 FlSpot(4,18),
 // ...
 ],
 ),
 ];

 @override Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('柱状图示例'),
 ),
 body: BarChart(
 barData[0],
 swapAnimationColor: Colors.blue,
 swapAnimationDuration: Duration(milliseconds:500),
 swapAnimationCurve: Curves.easeInOutCirc,
 swapAnimationType: SwapAnimationType.x,
 swapAnimationValueGetter: (value) => value,
 ),
 );
 }
}


### 左右滑动为了实现左右滑动,我们需要使用 `DraggableScrollableSheet` widget:

dartclass MyHomePage extends StatefulWidget {
 @override _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
 List barData = [
 BarData(
 spots: [
 FlSpot(0,10),
 FlSpot(1,20),
 FlSpot(2,15),
 FlSpot(3,25),
 FlSpot(4,18),
 // ...
 ],
 ),
 ];

 @override Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('柱状图示例'),
 ),
 body: DraggableScrollableSheet(
 initialChildSize:0.5,
 minChildSize:0.1,
 maxChildSize:0.9,
 builder: (context, scrollController) {
 return BarChart(
 barData[0],
 swapAnimationColor: Colors.blue,
 swapAnimationDuration: Duration(milliseconds:500),
 swapAnimationCurve: Curves.easeInOutCirc,
 swapAnimationType: SwapAnimationType.x,
 swapAnimationValueGetter: (value) => value,
 );
 },
 ),
 );
 }
}


### 固定Y轴为了固定Y轴,我们需要使用 `CustomPaint` widget:

dartclass MyHomePage extends StatefulWidget {
 @override _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
 List barData = [
 BarData(
 spots: [
 FlSpot(0,10),
 FlSpot(1,20),
 FlSpot(2,15),
 FlSpot(3,25),
 FlSpot(4,18),
 // ...
 ],
 ),
 ];

 @override Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('柱状图示例'),
 ),
 body: CustomPaint(
 painter: _BarChartPainter(barData[0]),
 child: Container(),
 ),
 );
 }
}

class _BarChartPainter extends CustomPainter {
 final BarData barData;

 _BarChartPainter(this.barData);

 @override void paint(Canvas canvas, Size size) {
 // ...
 }

 @override bool shouldRepaint(_BarChartPainter oldDelegate) => false;
}


### 总结在本文中,我们讲解了如何使用 FlChart 库在 Flutter 中实现一个可以左右滑动的柱状图,且固定Y轴。我们使用 `BarChart` widget 来绘制柱状图,并使用 `DraggableScrollableSheet` widget 来实现左右滑动。最后,我们使用 `CustomPaint` widget 来固定Y轴。

相关标签:flutter
其他信息

其他资源

Top