数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载F2 是一个面向移动端的优雅、交互式且灵活的图表库。本篇指南以site/examples/pie/donut示例模块为核心系统讲解如何在 F2 中实现环形图Donut Chart——从基础环形图与中心总计文本到圆角环形图、双环形图、嵌套环图和环形进度条。读者完成后将掌握polar极坐标、innerRadius内半径、Interval adjuststack堆叠扇区、Legend图例定制以及ArcGuide/TextGuide辅助标记的完整组合用法。什么是环形图饼图的变形环形图是饼图的一种变形通过中空的圆环形状来展示数据的占比关系参见 donut 示例文档。相比传统饼图环形图的中心空白区域可以用来显示总计信息或其他重要数据同时保持了饼图直观展示比例的特点。在 F2 中环形图并不是一个独立的 Chart 类型而是通过**极坐标polar坐标系 转置transposed 内半径innerRadius**组合出的形态。其底层实现位于 packages/f2/src/coord/polar.ts当坐标系为polar且transposed: true时数据维度 x 被映射为弧度、y 被映射为半径配合innerRadius挖空圆心即得到环形。基础环形图完整可运行示例环形图目录site/examples/pie/donut/demo下的第一个示例 donut.jsx 展示了带有中心文本的环形图可在中心显示总计信息。/** jsx jsx */ import { Canvas, Chart, Interval, jsx, Legend } from antv/f2; const data [ { name: 股票类, percent: 83.59, a: 1 }, { name: 债券类, percent: 2.17, a: 1 }, { name: 现金类, percent: 14.24, a: 1 }, ]; const context document.getElementById(container).getContext(2d); const map {}; data.forEach(function (obj) { map[obj.name] obj.percent %; }); const Text (props, context) { const { coord } props; const { center } coord; return ( group style{{ display: flex, left: center.x, top: center.y - context.px2hd(30px), width: 100px, }} text style{{ text: 总资产, fill: #000, textAlign: center }} / text style{{ marginTop: 10px, text: 100.33亿元, fill: #000, textAlign: center }} / /group ); }; const { props } ( Canvas context{context} pixelRatio{window.devicePixelRatio} theme{{ padding: [20, auto] }} Chart scale{{ percent: { formatter: function formatter(val) { return val %; }, }, }} data{data} coord{{ type: polar, transposed: true, innerRadius: 0.7, radius: 0.85, }} Interval xa ypercent adjuststack color{{ field: name, range: [#FE5D4D, #3BA4FF, #737DDE], }} / Legend positionright itemFormatter{(val, name) { return map[name]; }} / Text / /Chart /Canvas ); const chart new Canvas(props); chart.render();关键点拆解如下coord.type: polar切换到极坐标系x 轴代表弧度、y 轴代表半径。transposed: true转置坐标系让分类字段a沿角度方向排布、数值字段percent沿半径方向延伸这是扇区正确展开的前提。innerRadius: 0.7内半径占外半径的 70%挖空中心形成环该值越大圆环越细。radius: 0.85外半径占绘图区域短边一半的 85%为图例和中心文本留出边距。Interval xa ypercent adjuststack用区间图形叠加成堆叠扇区所有数据行的a均为1因此各分类在同一个角度范围内按percent比例堆叠构成完整圆环。color字段映射field: name让每个分类拥有独立颜色range自定义调色板。中心文本通过自定义组件读取coord.center拿到圆心坐标配合px2hd完成高清适配下的像素换算将总资产 / 100.33亿元渲染在环心。图例Legend positionright将图例放在右侧itemFormatter把默认项名替换为map[name]即百分比字符串使图例直接显示83.59%之类的占比信息。核心原理polar 坐标系与 innerRadius 的底层实现环形图的形态完全由 packages/f2/src/coord/polar.ts 中的Polar类决定。在update中可以看到两个配置的默认值与换算逻辑const { radius: radiusRatio 1, innerRadius: innerRadiusRatio 0 } this.option; // 半径取宽高的最小值 const radius radiusRatio * (Math.min(width, height) / 2); // 极坐标下 x 表示弧度y 代表半径 const x: Range [startAngle, endAngle]; const y: Range [innerRadiusRatio * radius, radius];radius默认为 1表示外半径取绘图区域宽高中较小值的一半innerRadius默认为 0即默认绘制实心饼图只有显式设置大于 0 的值如示例中的0.7y 值域下界才从圆心抬升到innerRadius * radius从而挖出中空圆环角度默认从-Math.PI / 212 点方向顺时针到3 * Math.PI / 2对应完整一圈。convertPoint将归一化数据映射为画布坐标angle xStart (xEnd - xStart) * point[xDim]、radius yStart (yEnd - yStart) * point[yDim]最终得到center (cos(angle) * radius, sin(angle) * radius)。理解了这一换算就能直观推断innerRadius、radius两个参数对环粗细与留白的影响。基类 packages/f2/src/coord/base.ts 中的transposed字段负责在极坐标下交换 x/y 维度的映射角色正是角度—半径布局得以实现的基础。圆角环形图扇区圆角样式donut-radius.jsx 展示了如何为环形图扇区添加圆角适合营造柔和、现代的数据可视化风格。核心做法是在Interval上通过style配置radius数组Interval xa ypercent adjuststack color{{ field: name, range: [#1890FF, #13C2C2, #2FC25B, #FACC14, #F04864, #8543E0], }} style{{ radius: [10, 7, 4, 2], }} /这里的style.radius为扇区四个角指定圆角半径依次对应左上、右上、右下、左下或按内部绘制顺序解释的角数值越大圆角越明显。该示例的innerRadius设为 0.5得到中等粗细的圆环同时Legend使用默认位置展示分类名称。双环形图同一 Canvas 布局两个图表double-donut.jsx 展示了在同一个Canvas中并排渲染两个环形图的方法通过给Chart设置style中的width与left控制横向布局两份数据与配置相同的图表即可并排呈现适合对比两个同构数据集例如两个账户的资产构成。Canvas context{context} pixelRatio{window.devicePixelRatio} theme{{ padding: [20, auto] }} Chart ... style{{ width: 200 }} {/* 第一个环形图图例在 bottom */} /Chart Chart ... style{{ left: 200, width: 200 }} {/* 第二个环形图图例在 bottomleft 偏移 200 实现并排 */} /Chart /Canvas值得注意的细节每个Chart均需独立配置scale、data、coord与子组件theme{{ padding: [20, auto] }}让上下留白固定为 20、左右自动计算中心文本组件Text在每个图表中复用读取各自coord.center定位两图图例均放底部positionbottom避免与并排布局冲突。嵌套环图多分类维度的堆叠cascade.jsx 展示了用单一数据源绘制多环嵌套结构的能力。其数据包含两个分组字段a内环分类取值为 1/2/3与c外环分类取值为 1/2通过colorc让颜色随外层分类变化同时adjuststack将同一a下的数据堆叠形成内外两层嵌套环的视觉效果。Chart data{data} coord{{ type: polar, transposed: true, innerRadius: 0.5 }} Interval xa yb colorc adjuststack / Legend positiontop / /Chart该实现的关键在于极坐标下 x 维度的每个取值对应一圈扇区a 1、2、3各占 120°而堆叠后c的不同取值在同一角度范围内按b数值分层视觉上自然形成内环为分类、外环为子项占比的嵌套结构。图例置于顶部以容纳更多分类。环形进度条ArcGuide TextGuide 组合progress-bar.jsx 将环形图的思路应用到进度条场景用一条灰色底环 一段蓝色高亮弧表示进度并在环心显示百分比文本。它不再使用Legend而是引入两个辅助标记组件ArcGuide与TextGuide从antv/f2直接导入import { jsx, Canvas, Chart, Interval, TextGuide, ArcGuide } from antv/f2; const data [{ x: 1, y: 85 }]; Chart data{data} coord{{ type: polar, transposed: true, innerRadius: 0.8 }} scale{{ y: { max: 100, min: 0 }, }} ArcGuide records{[ { x: 0, y: 0 }, { x: 1, y: 99.98 }, ]} style{{ lineWidth: 11, stroke: #ccc }} / TextGuide records{[{ x: 1, y: 25% }]} content{85%} style{{ fill: #1890FF }} / Interval xx yy / /Chart要点说明scale.y限定 0100让单个数据点y: 85对应整个环的 85%从而精确控制进度弧长ArcGuiderecords给出弧的起止归一化坐标style.lineWidth: 11控制环的粗细stroke: #ccc作为灰色底环Interval绘制蓝色进度弧沿用默认主题色innerRadius: 0.8使环较细进度视觉更清晰TextGuiderecords中的y: 25%表示沿半径方向 25% 处content直接指定要显示的文本如85%fill设置颜色。这套组合把数据可视化与信息标注分离Interval负责数据层ArcGuide/TextGuide负责背景与标注层是 F2 组件化设计参见 guide 组件目录的典型应用。使用场景总结环形图在 F2 中适用于以下场景归纳自 donut 示例文档 与各示例展示数据占比的同时显示总计信息基础环形图在环心放置总资产 / 100.33亿元式的汇总文本节省空间的比例展示圆环比实心饼图视觉更轻盈中心还可承载其他信息突出显示重要的汇总数据环形进度条用大字号百分比 高亮弧突出单一指标多层级数据的嵌套展示嵌套环图用多层圆环表达分类与子类的层级占比多数据集的并排对比双环形图在同一画布内横向呈现两个同构数据集的构成。延伸阅读完整示例源码与配套说明见 site/examples/pie/donut目录内含 index.zh.md 与全部 demo示例清单及标题配置见 meta.json极坐标实现源码见 packages/f2/src/coord/polar.ts坐标系基类见 packages/f2/src/coord/base.ts饼图/环形图相关的完整测试用例可参考 packages/f2/test/components/pieLabel 与 packages/f2/test/components/legend 目录用于验证图例与标签在极坐标下的渲染行为。赞分享数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载相关推荐WTF-Solidity 链上交易调试实战CirculateBUSD Rugpull 事件逆向分析损失 227 万美元WTF Solidity 链上交易调试实战CirculateBUSD Rugpull 事件逆向分析损失 227 万美元 本文是 WTF Solidity 仓数据可视化前端Mermaid 饼图与环形图Pie Donut Chart完整配置指南Mermaid 饼图与环形图Pie Donut Chart完整配置指南 Mermaid 通过类似 Markdown 的纯文本语法即可生成饼图pie c图表库前端数据可视化shadcn-vue 环形图Donut Chart组件完整指南安装、API 与实战用法shadcn vue 环形图Donut Chart组件完整指南安装、API 与实战用法 环形图Donut Chart将数据以圆环形式可视化与饼图相似UI组件前端上一篇突破布料渲染难题RenderDoc法线贴图可视化与调试全指南下一篇如何彻底解决ViewerJS安全隐患内容安全策略(CSP)实施指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考