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

一、引入插件

pub.dev:fl_chart package - All Versions

根据项目版本,安装可适配的 fl_chart 版本

二、官网柱状图示例

github参数配置:(x轴、y轴、边框、柱条数据、tooltip等)

https://github.com/imaNNeo/fl_chart/blob/master/repo_files/documentations/bar_chart.md

BarChart(BarChartData(// read about it in the BarChartData section),swapAnimationDuration: Duration(milliseconds: 150), // OptionalswapAnimationCurve: Curves.linear, // Optional
);

官方给的例子:(柱条数量多时,不能左右滚动)https://github.com/imaNNeo/fl_chart/blob/master/example/lib/presentation/samples/bar/bar_chart_sample1.dart

 三、自定义实现左右滑动 固定y轴

思路:

1、在 BarChart 外层添加一层 Container,Container外面包裹一层 SingleChildScrollView,scrollDirection 属性设置为 Axis.horizontal,即可实现水平滚动;

2、但是y轴也会跟着一起滚动,所以我们在 SingleChildScrollView 外手写一个y轴,用Row包裹;

 1、手写的y轴

        这里没什么技巧,主要是y轴数据的分配:此例中最大值大于5时,也是5等分,四舍五入;小于5则根据最大值分,间隔为1;

            // 手写y轴Column(children: [const Text('人数',style: TextStyle(color: Color(0xFF999999), fontSize: 11)),Row(children: [Column(children: totalNum >= 5 ? List.generate(5, (index) {return Column(children: [Text('${(totalNum / 4 * (4 - index)).round()}',style: const TextStyle(color: Color(0xFF999999),fontSize: 11)),index < 4 ? const SizedBox(height: 25) : const SizedBox()],);}): List.generate(totalNum + 1, (index) {return Column(children: [Text('${totalNum - index}',style: const TextStyle(color: Color(0xFF999999),fontSize: 11)),index < totalNum ? SizedBox(height: (100 / totalNum).toDouble()) : const SizedBox()],);})),const SizedBox(width: 4),//垂直分割线const SizedBox(width: 1,height: 161,child: DecoratedBox(decoration: BoxDecoration(color: Color(0xFFEEEEEE)),),),],),],),

2、实现左右滑动

💎💎注意层级结构,Expanded — SingleChildScrollView — Container — BarChart

            Expanded(child: SingleChildScrollView(scrollDirection: Axis.horizontal,child: Container(padding: const EdgeInsets.only(top: 10, bottom: 10),width: barList.length * 35 + 220,height: 220,child: BarChart(BarChartData(alignment: BarChartAlignment.spaceEvenly,titlesData: FlTitlesData(show: true,topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false),),bottomTitles: AxisTitles(sideTitles: SideTitles(showTitles: true,reservedSize: 32,// getTitlesWidget: bottomTitles,  x轴配置),),leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: false,),),rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false),),),gridData: FlGridData(show: false),borderData: FlBorderData(border: const Border(bottom: BorderSide(color: AppColors.colorFFEEEEEE),)),// barGroups: showingGroups()  柱条数据配置),),)),),

完整代码结构(x轴、图表数据等需要自己去完善)

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:oamic_project/common/values/colors.dart';// 柱状图
class SubjectClassficationBarChart extends StatelessWidget {const SubjectClassficationBarChart({super.key});@overrideWidget build(BuildContext context) {List<int> barList = [10,20,30,4,0,5,50,50,78,45,23,6,21,10];  // 数据列表int totalNum = 0;  // 总人数return LayoutBuilder(builder: (context, constraints) {final maxWidth = constraints.maxWidth;return SizedBox(width: maxWidth,height: 220,child: Row(children: [// 手绘y轴Column(children: [const Text('人数',style: TextStyle(color: Color(0xFF999999), fontSize: 11)),Row(children: [Column(children: totalNum >= 5 ? List.generate(5, (index) {return Column(children: [Text('${(totalNum / 4 * (4 - index)).round()}',style: const TextStyle(color: Color(0xFF999999),fontSize: 11)),index < 4 ? const SizedBox(height: 25) : const SizedBox()],);}): List.generate(totalNum + 1, (index) {return Column(children: [Text('${totalNum - index}',style: const TextStyle(color: Color(0xFF999999),fontSize: 11)),index < totalNum ? SizedBox(height: (100 / totalNum).toDouble()) : const SizedBox()],);})),const SizedBox(width: 4),//垂直分割线const SizedBox(width: 1,height: 161,child: DecoratedBox(decoration: BoxDecoration(color: Color(0xFFEEEEEE)),),),],),],),Expanded(child: SingleChildScrollView(scrollDirection: Axis.horizontal,child: Stack(children: [Container(padding: const EdgeInsets.only(top: 10, bottom: 10),width: barList.length * 35 + 220,height: 220,child: BarChart(BarChartData(alignment: BarChartAlignment.spaceEvenly,titlesData: FlTitlesData(show: true,topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false),),bottomTitles: AxisTitles(sideTitles: SideTitles(showTitles: true,reservedSize: 32,// getTitlesWidget: bottomTitles,  x轴配置),),leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: false,),),rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false),),),gridData: FlGridData(show: false),borderData: FlBorderData(border: const Border(bottom: BorderSide(color: AppColors.colorFFEEEEEE),)),// barGroups: showingGroups()  柱条数据配置),),)],),),),],),);});}
}

配置过程要注意层级结构,不然可能会报错

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/7708.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【LeetCode】70.爬楼梯

题目 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;有两种方法可以爬到楼顶。 1. 1 阶 1 阶 2. 2 阶 示例 2…

什么是UE像素流送,像素流推流是什么原理?

游戏开发者通常在运行游戏逻辑时会将游戏渲染到屏幕的同一台设备上来运行虚幻引擎应用&#xff0c;多人联网游戏可能会在应用程序的多个实例之间分发部分游戏逻辑&#xff0c;但每个单独的实例仍然会为自己的玩家在本地渲染游戏。即使是使用 HTML5 部署选项创建可以在 Web 浏览…

解决@Scope(“prototype“)不生效的问题

目录 Scope(“prototype“)不生效Scope(“prototype“)正确用法——解决Bean多例问题 1.问题&#xff0c;Spring管理的某个Bean需要使用多例2.问题升级3. Spring给出的解决问题的办法&#xff08;解决Bean链中某个Bean需要多例的问题&#xff09; Scope(“prototype“)不生效 …

【ribbon】Ribbon的使用与原理

负载均衡介绍 负载均衡&#xff08;Load Balance&#xff09;&#xff0c;其含义就是指将负载&#xff08;工作任务&#xff09;进行平衡、分摊到多个操作单元上进行运行&#xff0c;例如FTP服务器、Web服务器、企业核心应用服务器和其它主要任务服务器等&#xff0c;从而协同…

【《Go编程进阶实战:开发命令行应用、HTTP应用和gRPC应用》——指导你使用Go语言构建健壮的、生产级别的应用程序】

谷歌在2009年发布了Go编程语言&#xff0c;并于2012年发布了1.0版。Go语言具有强大的兼容性&#xff0c;一直用于编写可扩展的重量级程序(命令行应用程序、关键基础设施工具乃至大规模分布式系统)。凭借简单性、丰富的标准库和蓬勃发展的第三方软件包生态系统&#xff0c;Go语言…

工程安全监测无线振弦采集仪在建筑物中的应用

工程安全监测无线振弦采集仪在建筑物中的应用 工程安全监测无线振弦采集仪是一种用于建筑物结构安全监测的设备&#xff0c;它采用了无线传输技术&#xff0c;具有实时性强、数据精度高等优点&#xff0c;被广泛应用于建筑物结构的实时监测和预警。下面将从设备的特点、应用场…

FPGA中RAM的结构理解

FPGA中RAM的结构理解 看代码的过程中对RAM的结构不是很理解&#xff0c;搞脑子一片浆糊&#xff0c;反复推算&#xff0c;好不容易理清了思路&#xff0c;记录下来&#xff0c;防止忘记。开辟的RAM总容量为128bytes&#xff0c;数据的位宽为32位&#xff08;即一个单元有32bit…

WebGL系列教程:WebGL入门

一、WebGL简介 1.1 概述 WebGL(全写 Web Graphics Library)是一种 3D 绘图标准,这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起,通过增加 OpenGL ES 2.0 的一个 JavaScript 绑 定,WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染,这样 Web 开发人员就可…

WPF 如何设置全局的订阅发布事件

文章目录 前言代码逻辑修改 总结 前言 我们需要一个全局事件订阅发布功能&#xff0c;实现页面通讯。使两个毫无关系的页面通过一个中间量进行通讯。 代码 IEventAggregator&#xff1a;消息订阅集合 这个是Prism提供的消息订阅功能。使用如下 设置订阅类型&#xff0c;即…

Linux の shell 基本语法

变量 shell中变量比较特殊&#xff0c;变量名和等号之间不能有空格。其它的跟常见的变成语言类似 命名规则&#xff1a; 命名只能使用英文字母&#xff0c;数字和下划线&#xff0c;首个字符不能以数字开头。 中间不能有空格&#xff0c;可以使用下划线 _。 不能使用标点符号。…

Flask 创建文件目录,删除文件目录

项目结构 app.py from flask import Flask, render_template, request, redirect, url_for import osapp Flask(__name__) BASE_DIR os.path.abspath(os.path.dirname(__file__)) FILE_DIR os.path.join(BASE_DIR, testfile)app.route(/, methods[GET, POST]) def index():…

HTTP和HTTPS的区别

一、两者概念 1.1 HTTP概念 HTTP 的全称是超文本传输协议&#xff08;HyperText Transfer Protocol&#xff09; 是一种用于分布式、协作式和超媒体信息系统的应用协议&#xff0c;简单来说就是一种分布和接收HTML页面的方法&#xff0c;被用于在Web浏览器和网站服务器之间传递…

认识tomcat

Tomcat作为流行的JavaWeb应用服务器,其工作原理可以简要总结如下几点: Tomcat实现了Servlet和JSP规范,可以运行相关的Web应用。 Tomcat由Catalina、Coyote和Jasper等模块组成。Catalina负责Servlet容器,Coyote实现连接器。 服务器由一个或多个服务构成,服务包含多个连接器和容…

jenkins

Gitlab添加钩子 测试钩子 添加完成后&#xff0c;下面会出现钩子选择。点击test中的&#xff0c;push event。 出现successful&#xff0c;既添加成功。 如果添加失败&#xff0c;报错&#xff0c;更改Network

JMerter安装配置以及使用(笔记记录)

JMerter安装配置以及使用&#xff08;笔记记录&#xff09; 安装JDK安装JMeterJMeter使用元件执行的顺序参数详解参数配置之CSV数据文件设置断言响应断言JSON断言 数据提取XPath提取器JSON提取器 JMeter属性JMeter录制脚本JMeter直连数据库逻辑控制器如果&#xff08;IF&#x…

数据库概述和DDL语句(学会并使用数据库day1)

数据库概述和DDL语句&#xff08;day1&#xff09; 一、数据库概述概念数据库的集中式控制有什么优点数据库分类mysql数据库mysql简介基本术语数据表的组成 数据库管理系统数据库管理系统、数据库和表的关系 二、SQL的概念三、SQL语句分类1、SQL语句被分为四大类2、MySQL的语法…

Databend 开源周报第 103 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 创建网络策略 …

Blender自动化脚本,无人值守批量渲图/渲视频

渲染视频是个非常耗时的大工程&#xff0c;如果要渲染多个视频或者每个视频还需要切换不同的贴图、颜色等&#xff0c;工作量就更离谱了&#xff0c;所以不得不用脚本实现自动化。 Blender的脚本是用Python编写&#xff0c;比PS的js要方便很多。再下载一套Blender对应版本的AP…

24.实现线性拟合和相关系数(matlab程序)

1.简述 1. 基本语法 1.1 corr函数基本语法 语法 说明 rho corr(X) 返回输入矩阵X中每对列之间的两两线性相关系数矩阵。 rho corr(X, Y) 返回输入矩阵X和Y中每对列之间的两两相关系数矩阵。 [rho, pval] corr(X, Y) 返回pval&#xff0c;一个p值矩阵&#xff0c…

redis安装

安装redis 安装依赖环境 yum install -y gcc cd /opt tar -xf redis-5.0.7.tar cd redis-5.0.7/ make && make install PREFIX/usr/local/redis installvim /opt/redis-5.0.7/utils/install_server.shcd /opt/redis-5.0.7/utils ./install_server.sh Please select the…