首页
/ FluentUI React-Charting 5.23.78版本发布:增强负值支持与无障碍体验

FluentUI React-Charting 5.23.78版本发布:增强负值支持与无障碍体验

2025-06-02 07:25:57作者:宣利权Counsellor

FluentUI React-Charting是微软Fluent Design System设计体系中的图表组件库,为开发者提供了丰富的可视化数据展示能力。本次发布的5.23.78版本主要针对图表的数据范围支持和交互体验进行了重要改进。

水平条形图负值支持

本次更新为水平条形图(Horizontal Bar Chart)增加了对负x轴值的完整支持。在金融分析、温度变化等实际业务场景中,负值数据非常常见。例如:

  • 财务数据中的盈亏情况
  • 温度计显示零下温度
  • 与基准值的对比差异

开发者现在可以直接使用包含负值的数据集,图表会自动调整坐标轴和渲染逻辑,确保负值部分正确显示。这一改进使得图表能够更准确地反映真实业务数据,无需开发者进行额外的数据转换处理。

垂直堆叠条形图负值支持

同样地,垂直堆叠条形图(Vertical Stacked Bar Chart)现在也支持y轴负值。在堆叠图表中处理负值需要特别注意各数据系列的堆叠顺序和渲染方向,新版本已经完善了这些逻辑:

  • 负值部分会朝相反方向堆叠
  • 坐标轴会自动包含负值范围
  • 图例和标签显示保持一致性

这使得该图表类型可以用于展示如收支平衡、正负影响因素对比等复杂场景。

无障碍体验增强

在可访问性方面,新版本对折线图的事件标签进行了重要改进:

  1. 为所有事件标签元素添加了button角色
  2. 确保键盘导航时可以正确聚焦
  3. 屏幕阅读器能够正确识别交互元素

这些改进使得视力障碍用户通过辅助技术也能完整地获取图表中的交互信息,符合WCAG 2.1无障碍标准。

技术实现细节

在底层实现上,这些改进主要涉及:

  • 坐标轴计算算法的增强,自动检测数据范围
  • 渲染逻辑的调整,正确处理负值区域的绘制
  • ARIA属性的完善,提升无障碍支持
  • 事件处理系统的优化,确保交互一致性

开发者可以无缝升级到新版本,现有代码无需修改即可获得这些新特性。对于需要特别定制的情况,组件也提供了相应的props来控制细节表现。

总结

FluentUI React-Charting 5.23.78版本的发布,进一步拓展了图表组件的适用场景,特别是在金融、科学等需要处理负值数据的领域。同时,持续改进的无障碍支持也体现了微软对包容性设计的承诺。建议所有使用图表功能的项目考虑升级,以获得更完整的数据展示能力和更好的用户体验。

登录后查看全文
热门项目推荐

项目优选

收起
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
C++
178
262
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
868
513
openGauss-serveropenGauss-server
openGauss kernel ~ openGauss is an open source relational database management system
C++
129
183
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件,通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求,让密码技术应用更简单,同时探索后量子等先进算法创新实践,构建密码前沿技术底座!
C
268
308
HarmonyOS-ExamplesHarmonyOS-Examples
本仓将收集和展示仓颉鸿蒙应用示例代码,欢迎大家投稿,在仓颉鸿蒙社区展现你的妙趣设计!
Cangjie
398
373
CangjieCommunityCangjieCommunity
为仓颉编程语言开发者打造活跃、开放、高质量的社区环境
Markdown
1.07 K
0
ShopXO开源商城ShopXO开源商城
🔥🔥🔥ShopXO企业级免费开源商城系统,可视化DIY拖拽装修、包含PC、H5、多端小程序(微信+支付宝+百度+头条&抖音+QQ+快手)、APP、多仓库、多商户、多门店、IM客服、进销存,遵循MIT开源协议发布、基于ThinkPHP8框架研发
JavaScript
93
15
note-gennote-gen
一款跨平台的 Markdown AI 笔记软件,致力于使用 AI 建立记录和写作的桥梁。
TSX
83
4
cherry-studiocherry-studio
🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端
TypeScript
599
58
GitNextGitNext
基于可以运行在OpenHarmony的git,提供git客户端操作能力
ArkTS
10
3