数据可视化前端UI组件【免费下载链接】chart.xkcdxkcd styled chart lib项目地址https://gitcode.com/gh_mirrors/ch/chart.xkcd点击查看免费下载本篇技术指南以 docs/08-pie.md 为核心系统讲解 chart.xkcd 中 Pie 组件的完整用法从数据格式、options 配置innerRadius、legendPosition、unxkcdify等到源码层面的渲染原理与交互实现。读完你不仅能独立绘制出带标题、图例和提示框的 xkcd 手绘风格饼图/环形图还能理解其手绘感来自 SVG 滤镜的哪个环节以及如何关闭手绘效果切换到普通风格。一、快速上手创建一个最小的 Pie 图表chart.xkcd 的饼图使用方式与其他组件保持一致向chartXkcd.Pie构造函数传入一个 SVG 元素和配置对象。以下是最小的完整示例来自文档原文可复制运行const pieChart new chartXkcd.Pie(svg, { title: What Tim is made of, // optional data: { labels: [a, b, e, f, g], datasets: [{ data: [500, 200, 80, 90, 100], }], }, options: { // optional innerRadius: 0.5, legendPosition: chartXkcd.config.positionType.upRight, }, });数据格式说明title图表标题可选。传入后会渲染在图表顶部居中位置。data.labels每个扇区对应的名称数组长度需与data.datasets[0].data一致。data.datasets[0].data数值数组Pie 组件基于这些数值计算每个扇区的角度占比。从源码看Pie 组件只取datasets[0]这一组数据见 src/Pie.js 中的thePie(this.data.datasets[0].data)因此饼图本质上只消费一组序列。options可选控制图表外观与行为具体参数见下文。在仓库自带的示例 examples/index.js 中饼图被挂载到.pie-chart这个 SVG 容器上const svgPie document.querySelector(.pie-chart); new chartXkcd.Pie(svgPie, { title: What Tim is made of, data: { labels: [a, b, e, f, g], datasets: [{ data: [500, 200, 80, 90, 100], }], }, });对应的容器定义在 examples/example.htmldivsvg classpie-chart/svg/div。注意 Pie 组件会自动清空传入 SVG 中已有的子元素this.svgEl.selectAll(*).remove()所以直接传一个空容器即可。二、options 完整参数详解文档定义了 8 个可配置项下面逐一给出默认值、取值范围与源码依据。2.1innerRadius控制饼图还是环形图默认0.5这是区分饼图与环形图Doughnut的关键参数它表示内圆半径占可用半径的比例innerRadius: 0.5默认值中间挖空呈现环形图效果innerRadius: 0没有内圆呈现标准实心饼图其他取值任意0到1之间的比例均可数值越大中间空洞越大。实现上内半径的计算发生在 src/Pie.js 的theArc中const theArc arc() .innerRadius(radius * (this.options.innerRadius undefined ? 0.5 : this.options.innerRadius)) .outerRadius(radius);其中radius由Math.min(this.width, this.height) / 2 - margin得到margin固定为50源码顶部常量const margin 50;即扇区外边缘会与画布边界保持 50px 的留白。2.2showLegend是否显示图例默认true设为false时不再渲染图例。源码中的判断位于 src/Pie.jsif (this.options.showLegend) { addLegend(legendG, { ... }); }图例项由data.datasets[0].data与labels一一对应生成色块颜色取dataColors[i]文字取labels[i]。2.3legendPosition图例位置默认upLeft通过chartXkcd.config.positionType上的四个枚举值指定图例方位枚举定义在 src/config.js枚举值含义chartXkcd.config.positionType.upLeft左上角默认chartXkcd.config.positionType.upRight右上角chartXkcd.config.positionType.downLeft左下角chartXkcd.config.positionType.downRight右下角注意原文档在列举up right时误写成了upLeft正确值应为upRight见 src/config.js 中upRight: 2的定义。实际使用请按上表取值。图例的定位逻辑在 src/utils/addLegend.js当position为downLeft/downRight时图例 y 坐标取parentHeight - backgroundHeight - 13贴底为upRight/downRight时x 坐标取parentWidth - backgroundWidth - 13靠右。图例背景框的尺寸并非预先写死而是等文字渲染后通过getBBox()动态测量再绘制源码中使用setTimeout等待渲染完成。2.4dataColors扇区配色提供一组颜色数组按序分配给各个扇区。默认值定义在 src/utils/colors.jsexport default [#dd4528, #28a3dd, #f3db52, #ed84b5, #4ab74e, #9179c0, #8e6d5a, #f19839, #949494];共 9 种颜色。如果扇区数超过颜色数组长度会按序循环取用this.options.dataColors[i]直接按索引取值超出部分为undefined因此数据量较多时建议自定义足够长的颜色数组。扇区填充色也在 src/Pie.js 中通过.attr(fill, (d, i) this.options.dataColors[i])应用。2.5fontFamily字体族默认xkcd。chart.xkcd 会在运行时把 xkcd 风格字体仓库 assets/xkcd-script.ttf注入 SVG见addFont若系统中没有该字体则会回退到浏览器默认字体。2.6unxkcdify关闭手绘效果默认false设为true后图表将去掉 xkcd 手绘滤镜并改用系统字体栈-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif。这是把图表从手绘风切换为常规风的总开关具体切换逻辑见 src/Pie.jsthis.filter url(#xkcdify-pie); this.fontFamily this.options.fontFamily || xkcd; if (this.options.unxkcdify) { this.filter null; this.fontFamily -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; }2.7strokeColor描边颜色默认black所有扇区的轮廓线颜色默认黑色。同时它也会作为标题、图例文字和提示框边框的颜色被复用。2.8backgroundColor背景颜色默认whiteSVG 背景色同时用于图例背景框与提示框背景的填充透明度约为 0.850.9。把strokeColor设为white、backgroundColor设为black即可得到深色主题的饼图。三、手绘风格从哪来xkcdify 滤镜源码解析手绘感并非预先生成的贴图而是由 SVG 滤镜实时扰动生成的。Pie 组件在渲染前调用addFilter(this.svgEl)其实现位于 src/utils/addFilter.js核心是两段相同的滤镜定义#xkcdify与饼图专用的#xkcdify-pieparent.append(filter) .attr(id, xkcdify-pie) .call((f) f.append(feTurbulence) .attr(type, fractalNoise) .attr(baseFrequency, 0.05) .attr(result, noise)) .call((f) f.append(feDisplacementMap) .attr(scale, 5) .attr(xChannelSelector, R) .attr(yChannelSelector, G) .attr(in, SourceGraphic) .attr(in2, noise));原理可以概括为两步feTurbulence以fractalNoise分形噪声类型、baseFrequency: 0.05生成随机扰动场feDisplacementMap以scale: 5的幅度根据噪声场的 R/G 通道对原始图形做位移使扇区边缘产生自然的不规则抖动模拟手绘轮廓。Pie 组件把这个滤镜应用到每个扇区路径上src/Pie.js 中的.attr(filter, this.filter)因此默认情况下整个扇区都带手绘扰动。这也解释了为什么unxkcdify: true时只需把this.filter置为null——没有滤镜图形就是光滑的常规矢量图形。四、交互细节扇区高亮与动态 Tooltip除了静态渲染Pie 组件还内置了鼠标交互见 src/Pie.jsmouseover当前扇区fill-opacity降为0.6实现高亮并显示 Tooltipmouseout恢复fill-opacity为1隐藏 Tooltipmousemove实时计算鼠标在 SVG 中的坐标更新 Tooltip 的位置与内容。Tooltip 内容由 src/components/Tooltip.js 渲染显示格式为标签名: 数值即labels[i]与对应的d.data。Tooltip 采用手写 SVG 实现而非 DOM 浮动层先按预估宽度/高度创建背景矩形随内容更新再通过getBBox()重算尺寸。值得一提的是Tooltip 的定位逻辑_getUpLeftX/_getUpLeftY会根据positionType自动翻转保证提示框不会超出画布外这一细节同样复用了 src/config.js 中的方位枚举。五、安装与引入方式Pie 组件通过 src/index.js 统一导出config, Bar, StackedBar, Pie, Line, Combined, XY, Radar引入方式与整个库一致详见 docs/03-install.md方式一script 标签script srchttps://cdn.jsdelivr.net/npm/chart.xkcd2/dist/chart.xkcd.min.js/script script const myChart new chartXkcd.Pie(svg, {...}); /script方式二npm 安装 ES Module 导入npm i chart.xkcdimport chartXkcd from chart.xkcd; const myChart new chartXkcd.Pie(svg, {...});六、小结一张参数速查表参数默认值说明innerRadius0.5内圆半径占比0为实心饼图越大环形越宽showLegendtrue是否显示图例legendPositionpositionType.upLeft图例方位另有upRight/downLeft/downRightdataColors9 色数组扇区配色按索引分配fontFamilyxkcd图表字体族unxkcdifyfalse是否关闭手绘滤镜并切换系统字体strokeColorblack描边色同时影响标题、图例与提示框backgroundColorwhite背景色同时用于图例与提示框底色要点回顾想让图表变成经典实心饼图就设innerRadius: 0想要手绘风格就保持默认依赖xkcdify-pie滤镜想要干净规整的展示就开unxkcdify: true四个positionType枚举值可自由组合图例位置。结合 src/Pie.js 与 src/utils/addLegend.js 的源码你还可以进一步定制图例间距、Tooltip 样式与扇区交互将其融入自己的项目。赞分享数据可视化前端UI组件【免费下载链接】chart.xkcdxkcd styled chart lib项目地址https://gitcode.com/gh_mirrors/ch/chart.xkcd点击查看免费下载相关推荐Vuetify v-pie 饼图/环形图组件实战指南安装、配置与深度定制Vuetify v pie 饼图/环形图组件实战指南安装、配置与深度定制 v pie 是 Vuetify Labs 中提供的饼图 / 环形图donut组件前端UI组件如何十分钟部署 WeKnora智能问答知识库的完整实战指南如何十分钟部署 WeKnora智能问答知识库的完整实战指南 WeKnora 是一个开源的 LLM 知识平台面向需要把内部文档变成可查询资产的开发者和企业团队人工智能大模型RAGAI Agent后端前端MCP 服务知识库dsh-plugin工具调用Mermaid 饼图与环形图Pie Donut Chart完整配置指南Mermaid 饼图与环形图Pie Donut Chart完整配置指南 Mermaid 通过类似 Markdown 的纯文本语法即可生成饼图pie c图表库前端数据可视化上一篇终极Weblate生产环境部署指南10个必备配置优化技巧下一篇Eclipse Mosquitto 2.0.14 下载与安装全指南源码、Windows、macOS、Linux 二进制安装详解创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考