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() 柱条数据配置),),)],),),),],),);});}
}
配置过程要注意层级结构,不然可能会报错
相关文章:
flutter fl_chart 柱状图 柱条数量较多 实现左右滑动 固定y轴
一、引入插件 pub.dev:fl_chart package - All Versions 根据项目版本,安装可适配的 fl_chart 版本 二、官网柱状图示例 github参数配置:(x轴、y轴、边框、柱条数据、tooltip等) https://github.com/imaNNeo/fl_c…...
CAN学习笔记1:计算机网络
计算机网络 1 概述 计算机网络就是把多种形式的计算机用通信线路连接起来,并使其能够互相进行交换的系统。实际上,计算机网络包括了计算机、各种硬件、各种软件、组成网络的体系结构、网络传输介质和网络通信计数。因此,计算机网络是计算机…...
NAND flash的坏块
NAND flash的坏块 1.为什么会出现坏块 由于NAND Flash的工艺不能保证NAND的Memory Array(由NAND cell组成的阵列)在其生命周期中保持性能的可靠(电荷可能由于其他异常原因没有被锁起来。因此,在NAND的生产中及使用过程中会产生坏…...
代码随想录算法训练营第二十五天 | 读PDF复习环节3
读PDF复习环节3 本博客的内容只是做一个大概的记录,整个PDF看下来,内容上是不如代码随想录网站上的文章全面的,并且PDF中有些地方的描述,是很让我疑惑的,在困扰我很久后,无意间发现,其网站上的讲…...
18.Netty源码之ByteBuf 详解
highlight: arduino-light ByteBuf 是 Netty 的数据容器,所有网络通信中字节流的传输都是通过 ByteBuf 完成的。 然而 JDK NIO 包中已经提供了类似的 ByteBuffer 类,为什么 Netty 还要去重复造轮子呢?本节课我会详细地讲解 ByteBuf。 JDK NIO…...
#P0999. [NOIP2008普及组] 排座椅
题目描述 上课的时候总会有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情。不过,班主任小雪发现了一些有趣的现象,当同学们的座次确定下来之后,只有有限的 DD 对同学上课时会交头接耳。 同学们在教室中坐…...
Sentinel 容灾中心的使用
Sentinel 容灾中心的使用 往期文章 Nacos环境搭建Nacos注册中心的使用Nacos配置中心的使用 熔断/限流结果 Jar 生产者 spring-cloud-alibaba:2021.0.4.0 spring-boot:2.6.8 spring-cloud-loadbalancer:3.1.3 sentinel:2021.0…...
深度学习中简易FC和CNN搭建
TensorFlow是由谷歌开发的PyTorch是由Facebook人工智能研究院(Facebook AI Research)开发的 Torch和cuda版本的对应,手动安装较好 全连接FC(Batch*Num) 搭建建议网络: from torch import nnclass Mnist_NN(nn.Module):def __i…...
【多模态】20、OVR-CNN | 使用 caption 来实现开放词汇目标检测
文章目录 一、背景二、方法2.1 学习 视觉-语义 空间2.2 学习开放词汇目标检测 三、效果 论文:Open-Vocabulary Object Detection Using Captions 代码:https://github.com/alirezazareian/ovr-cnn 出处:CVPR2021 Oral 一、背景 目标检测数…...
网络编程 IO多路复用 [select版] (TCP网络聊天室)
//head.h 头文件 //TcpGrpSer.c 服务器端 //TcpGrpUsr.c 客户端 select函数 功能:阻塞函数,让内核去监测集合中的文件描述符是否准备就绪,若准备就绪则解除阻塞。 原型: #include <sys/select.…...
数学建模学习(7):单目标和多目标规划
优化问题描述 优化 优化算法是指在满足一定条件下,在众多方案中或者参数中最优方案,或者参数值,以使得某个或者多个功能指标达到最优,或使得系统的某些性能指标达到最大值或者最小值 线性规划 线性规划是指目标函数和约束都是线性的情况 [x,fval]linprog(f,A,b,Aeq,Beq,LB,U…...
Element UI如何自定义样式
简介 Element UI是一套非常完善的前端组件库,但是如何个性化定制其中的组件样式呢?今天我们就来聊一聊这个 举例 就拿最常见的按钮el-button来举例,一般来说默认是蓝底白字。效果图如下 可是我们想个性化定制,让他成为粉底红字应…...
protobuf入门实践2
如何在proto中定义一个rpc服务? syntax "proto3"; //声明protobuf的版本package fixbug; //声明了代码所在的包 (对于C来说就是namespace)//下面的选项,表示生成service服务类和rpc方法描述, 默认是不生成的 option cc_generi…...
adb shell使用总结
文章目录 日志记录系统概览adb 使用方式 adb命令日志过滤按照告警等级进行过滤按照tag进行过滤根据告警等级和tag进行联合过滤屏蔽系统和其他App干扰,仅仅关注App自身日志 查看“当前页面”Activity文件传输截屏和录屏安装、卸载App启动activity其他 日志记录系统概…...
UG NX二次开发(C++)-Tag的含义、Tag类型与其他的转换
文章目录 1、前言2、Tag号的含义3、tag_t转换为int3、TaggedObject与Tag转换3.1 TaggedObject定义3.2 TaggedObject获取Tag3.3 根据Tag获取TaggedObject4.Tag与double类型的转换1、前言 在UG NX中,每个对象对应一个tag号,C++中,其类型是tag_t,一般是5位或者6位的int数字,…...
Informer 论文学习笔记
论文:《Informer: Beyond Efficient Transformer for Long Sequence Time-Series Forecasting》 代码:https://github.com/zhouhaoyi/Informer2020 地址:https://arxiv.org/abs/2012.07436v3 特点: 实现时间与空间复杂度为 O ( …...
c语言位段知识详解
本篇文章带来位段相关知识详细讲解! 如果您觉得文章不错,期待你的一键三连哦,你的鼓励是我创作的动力之源,让我们一起加油,一起奔跑,让我们顶峰相见!!! 目录 一.什么是…...
FFmpeg aresample_swr_opts的解析
ffmpeg option的解析 aresample_swr_opts是AVFilterGraph中的option。 static const AVOption filtergraph_options[] {{ "thread_type", "Allowed thread types", OFFSET(thread_type), AV_OPT_TYPE_FLAGS,{ .i64 AVFILTER_THREAD_SLICE }, 0, INT_MA…...
CAN学习笔记3:STM32 CAN控制器介绍
STM32 CAN控制器 1 概述 STM32 CAN控制器(bxCAN),支持CAN 2.0A 和 CAN 2.0B Active版本协议。CAN 2.0A 只能处理标准数据帧且扩展帧的内容会识别错误,而CAN 2.0B Active 可以处理标准数据帧和扩展数据帧。 2 bxCAN 特性 波特率…...
软工导论知识框架(二)结构化的需求分析
本章节涉及很多重要图表的制作,如ER图、数据流图、状态转换图、数据字典的书写等,对初学者来说比较生僻,本贴只介绍基础的轮廓,后面会有单独的帖子详解各图表如何绘制。 一.结构化的软件开发方法:结构化的分析、设计、…...
彩灯广告屏PLC控制S7-200程序:包含梯形图、接线图、原理图及IO分配与组态画面详解
彩灯广告屏的PLC控制S7-200程序 程序 我们主要的后发送的产品有,带解释的梯形图接线图原理图图纸,io分配,组态画面上周刚帮客户搞定了一套户外彩灯广告屏的PLC控制项目,用的还是经典的S7-200,本来以为老架构玩不出花…...
嵌入式开发中数据结构的优化与应用实践
1. 数据结构在嵌入式开发中的核心价值作为一名在嵌入式领域摸爬滚打十年的老兵,我深刻体会到数据结构就像瑞士军刀里的各种工具——选对工具能让工作事半功倍。在资源受限的MCU环境中,一个精心选择的数据结构可能意味着程序能否流畅运行和内存是否会爆掉…...
STM32开发中的C语言核心技巧与实战
1. STM32开发中的C语言核心技巧解析从事嵌入式开发十多年来,我深刻体会到C语言在STM32单片机开发中的核心地位。与通用计算机编程不同,嵌入式C语言需要直接操作硬件寄存器,对代码的精确性和效率要求极高。下面我将分享几个在STM32开发中最实用…...
Qwen3-14B镜像实操:自定义Tokenizer适配垂直领域专业术语
Qwen3-14B镜像实操:自定义Tokenizer适配垂直领域专业术语 1. 镜像概述与核心优势 Qwen3-14B私有部署镜像是专为RTX 4090D 24GB显存环境优化的完整解决方案,开箱即用无需复杂配置。这个镜像最显著的特点是针对垂直领域专业术语进行了Tokenizer的深度优化…...
51单片机实战:从零构建电子密码锁系统
1. 项目背景与硬件准备 第一次接触51单片机时,我就被它的实用性深深吸引。作为电子爱好者入门的最佳选择,STC89C52这款经典芯片就像乐高积木的基础模块——价格亲民(某宝20元就能买到开发板)、资源丰富(8K Flash、512…...
快马AI助力:十分钟用Python搭建免费股票行情网站原型
最近想验证一个股票行情网站的原型,但作为独立开发者,从零搭建前后端实在太耗时。尝试用PythonFlask快速实现,结合InsCode(快马)平台的AI辅助功能,居然十分钟就完成了基础框架。记录下关键实现思路: 数据获取层设计 选…...
从零到一:在Trae平台构建网页数据智能抓取与分析引擎
1. 为什么你需要一个网页数据智能抓取引擎? 每次看到同事手动复制网页数据到Excel,我都忍不住想递杯咖啡——这活儿太费时了!去年我帮市场部做竞品分析,发现他们每周要花8小时手工整理20个电商平台的价格数据。直到我们用Trae平台…...
德意志飞机通过全球协作升级支线航空驾驶舱人机工学
2026年1月15日 —— 作为总部位于德国舍瑙的MAFELEC集团旗下成员,COMTRONIC GmbH近五十年来一直是航空航天领域人机界面(HMI)解决方案领域值得信赖的供应商。凭借在照明面板、定制键盘及先进光学技术方面的深厚积淀,COMTRONIC长期…...
Python智能内存回收实战:3种GC策略对比+4个生产级调优参数配置(附压测数据)
第一章:Python智能体内存管理策略生产环境部署在高并发、长生命周期的Python智能体服务中,内存管理直接影响系统稳定性与响应延迟。默认的CPython引用计数循环垃圾回收(GC)机制在动态对象频繁创建销毁的场景下易引发内存抖动和不可…...
Qwen Pixel Art企业级应用:游戏公司美术外包降本提效实战路径
Qwen Pixel Art企业级应用:游戏公司美术外包降本提效实战路径 1. 游戏美术外包的痛点与机遇 游戏开发中,美术资源制作往往占据大量成本和时间。传统像素美术外包存在三个核心痛点: 成本高:资深像素画师日薪通常在800-1500元&am…...
