当前位置: 首页 > news >正文

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&#xff1a;fl_chart package - All Versions 根据项目版本&#xff0c;安装可适配的 fl_chart 版本 二、官网柱状图示例 github参数配置&#xff1a;&#xff08;x轴、y轴、边框、柱条数据、tooltip等&#xff09; https://github.com/imaNNeo/fl_c…...

CAN学习笔记1:计算机网络

计算机网络 1 概述 计算机网络就是把多种形式的计算机用通信线路连接起来&#xff0c;并使其能够互相进行交换的系统。实际上&#xff0c;计算机网络包括了计算机、各种硬件、各种软件、组成网络的体系结构、网络传输介质和网络通信计数。因此&#xff0c;计算机网络是计算机…...

NAND flash的坏块

NAND flash的坏块 1.为什么会出现坏块 由于NAND Flash的工艺不能保证NAND的Memory Array&#xff08;由NAND cell组成的阵列&#xff09;在其生命周期中保持性能的可靠&#xff08;电荷可能由于其他异常原因没有被锁起来。因此&#xff0c;在NAND的生产中及使用过程中会产生坏…...

代码随想录算法训练营第二十五天 | 读PDF复习环节3

读PDF复习环节3 本博客的内容只是做一个大概的记录&#xff0c;整个PDF看下来&#xff0c;内容上是不如代码随想录网站上的文章全面的&#xff0c;并且PDF中有些地方的描述&#xff0c;是很让我疑惑的&#xff0c;在困扰我很久后&#xff0c;无意间发现&#xff0c;其网站上的讲…...

18.Netty源码之ByteBuf 详解

highlight: arduino-light ByteBuf 是 Netty 的数据容器&#xff0c;所有网络通信中字节流的传输都是通过 ByteBuf 完成的。 然而 JDK NIO 包中已经提供了类似的 ByteBuffer 类&#xff0c;为什么 Netty 还要去重复造轮子呢&#xff1f;本节课我会详细地讲解 ByteBuf。 JDK NIO…...

#P0999. [NOIP2008普及组] 排座椅

题目描述 上课的时候总会有一些同学和前后左右的人交头接耳&#xff0c;这是令小学班主任十分头疼的一件事情。不过&#xff0c;班主任小雪发现了一些有趣的现象&#xff0c;当同学们的座次确定下来之后&#xff0c;只有有限的 DD 对同学上课时会交头接耳。 同学们在教室中坐…...

Sentinel 容灾中心的使用

Sentinel 容灾中心的使用 往期文章 Nacos环境搭建Nacos注册中心的使用Nacos配置中心的使用 熔断/限流结果 Jar 生产者 spring-cloud-alibaba&#xff1a;2021.0.4.0 spring-boot&#xff1a;2.6.8 spring-cloud-loadbalancer&#xff1a;3.1.3 sentinel&#xff1a;2021.0…...

深度学习中简易FC和CNN搭建

TensorFlow是由谷歌开发的PyTorch是由Facebook人工智能研究院&#xff08;Facebook AI Research&#xff09;开发的 Torch和cuda版本的对应&#xff0c;手动安装较好 全连接FC(Batch*Num) 搭建建议网络&#xff1a; from torch import nnclass Mnist_NN(nn.Module):def __i…...

【多模态】20、OVR-CNN | 使用 caption 来实现开放词汇目标检测

文章目录 一、背景二、方法2.1 学习 视觉-语义 空间2.2 学习开放词汇目标检测 三、效果 论文&#xff1a;Open-Vocabulary Object Detection Using Captions 代码&#xff1a;https://github.com/alirezazareian/ovr-cnn 出处&#xff1a;CVPR2021 Oral 一、背景 目标检测数…...

网络编程 IO多路复用 [select版] (TCP网络聊天室)

//head.h 头文件 //TcpGrpSer.c 服务器端 //TcpGrpUsr.c 客户端 select函数 功能&#xff1a;阻塞函数&#xff0c;让内核去监测集合中的文件描述符是否准备就绪&#xff0c;若准备就绪则解除阻塞。 原型&#xff1a; #include <sys/select.…...

数学建模学习(7):单目标和多目标规划

优化问题描述 优化 优化算法是指在满足一定条件下,在众多方案中或者参数中最优方案,或者参数值,以使得某个或者多个功能指标达到最优,或使得系统的某些性能指标达到最大值或者最小值 线性规划 线性规划是指目标函数和约束都是线性的情况 [x,fval]linprog(f,A,b,Aeq,Beq,LB,U…...

Element UI如何自定义样式

简介 Element UI是一套非常完善的前端组件库&#xff0c;但是如何个性化定制其中的组件样式呢&#xff1f;今天我们就来聊一聊这个 举例 就拿最常见的按钮el-button来举例&#xff0c;一般来说默认是蓝底白字。效果图如下 可是我们想个性化定制&#xff0c;让他成为粉底红字应…...

protobuf入门实践2

如何在proto中定义一个rpc服务? syntax "proto3"; //声明protobuf的版本package fixbug; //声明了代码所在的包 &#xff08;对于C来说就是namespace)//下面的选项&#xff0c;表示生成service服务类和rpc方法描述&#xff0c; 默认是不生成的 option cc_generi…...

adb shell使用总结

文章目录 日志记录系统概览adb 使用方式 adb命令日志过滤按照告警等级进行过滤按照tag进行过滤根据告警等级和tag进行联合过滤屏蔽系统和其他App干扰&#xff0c;仅仅关注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 论文学习笔记

论文&#xff1a;《Informer: Beyond Efficient Transformer for Long Sequence Time-Series Forecasting》 代码&#xff1a;https://github.com/zhouhaoyi/Informer2020 地址&#xff1a;https://arxiv.org/abs/2012.07436v3 特点&#xff1a; 实现时间与空间复杂度为 O ( …...

c语言位段知识详解

本篇文章带来位段相关知识详细讲解&#xff01; 如果您觉得文章不错&#xff0c;期待你的一键三连哦&#xff0c;你的鼓励是我创作的动力之源&#xff0c;让我们一起加油&#xff0c;一起奔跑&#xff0c;让我们顶峰相见&#xff01;&#xff01;&#xff01; 目录 一.什么是…...

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控制器&#xff08;bxCAN&#xff09;&#xff0c;支持CAN 2.0A 和 CAN 2.0B Active版本协议。CAN 2.0A 只能处理标准数据帧且扩展帧的内容会识别错误&#xff0c;而CAN 2.0B Active 可以处理标准数据帧和扩展数据帧。 2 bxCAN 特性 波特率…...

软工导论知识框架(二)结构化的需求分析

本章节涉及很多重要图表的制作&#xff0c;如ER图、数据流图、状态转换图、数据字典的书写等&#xff0c;对初学者来说比较生僻&#xff0c;本贴只介绍基础的轮廓&#xff0c;后面会有单独的帖子详解各图表如何绘制。 一.结构化的软件开发方法&#xff1a;结构化的分析、设计、…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

Unity VR/MR开发-VR开发与传统3D开发的差异

视频讲解链接&#xff1a;【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...