0

0

交互式饼图制作指南 比例分布图表怎么做【2026实操】

畫卷琴夢

畫卷琴夢

发布时间:2026-01-22 17:23:32

|

402人浏览过

|

来源于php中文网

原创

需构建具备响应能力的饼图以呈现类别占比并支持交互:Axure通过元件编辑实现悬停高亮与点击跳转;SwiftUI中ChartView支持点击高亮与浮层提示;Power BI利用切片器联动与工具提示;ECharts配置3D效果与动态刷新;Excel结合切片器与透视表生成可筛选饼图。

交互式饼图制作指南 比例分布图表怎么做【2026实操】 - php中文网

如果您希望在数据可视化中呈现类别占比关系,并支持用户交互操作,则需构建具备响应能力的饼图。以下是多种主流工具中实现交互式饼图的具体方法:

本文运行环境:MacBook Pro M3,macOS Sequoia。

一、Axure中构建可悬停与点击的饼图

Axure通过元件编辑与交互事件绑定实现扇区级响应,适用于高保真原型设计。该方法不依赖代码,适合产品与UI团队协作验证交互逻辑。

1、在左侧“元件库”中展开“形状”,拖拽“饼图”元件至画布,调整尺寸适配页面布局。

2、右键饼图→选择“编辑形状”,进入扇形编辑模式,单独选中某一扇区并赋予唯一标识名称(如sector_A)。

3、保持该扇区选中状态,在右侧“交互”面板点击“+ 新建交互”,触发条件设为“鼠标悬停时”,动作选择“设置样式”,将填充色改为RGB(255, 230, 100)以实现视觉高亮。

4、再次新建交互,触发条件设为“鼠标单击时”,动作选择“打开链接”,目标设为对应分析页(如“产品A详情页”)。

5、重复步骤2–4,为其余扇区配置差异化悬停色与跳转目标,确保各区域交互独立生效。

二、ChartView在SwiftUI中实现点击高亮与数据浮层

ChartView是iOS/macOS原生图表库,支持声明式语法与实时响应,适用于已接入SwiftUI技术栈的应用开发场景。

1、定义数据模型,使用PieChartData结构体初始化三项数据,其中color参数分别指定为.blue.teal.indigo

2、创建PieChartView实例,传入data与title参数,并在style中设置accentColor为.indigo以统一强调色。

3、在PieChartView构造器中添加onTapGesture闭包,捕获点击索引,调用state更新当前高亮项ID。

4、使用.overlay修饰符叠加ZStack,在高亮扇区上方显示VStack浮动提示层,内含label与value文本,并设置.opacity动画过渡。

5、将PieChartView嵌入VStack,并通过.frame(height: 300)设定固定高度,避免布局抖动。

三、Power BI中启用切片器联动与悬停提示

Power BI通过可视化绑定与语义模型实现多维度联动,适用于企业级报表场景,无需编码即可完成动态筛选与交互反馈。

1、在报表视图中,从“可视化效果”窗格拖入饼图图标,将其放置于画布中央区域。

2、在“字段”窗格中,将分类字段(如“产品线”)拖入“图例”区域,将数值字段(如“销售额”)拖入“值”区域。

灵光
灵光

蚂蚁集团推出的全模态AI助手

下载

3、选中饼图,在右上角“格式”面板中开启“数据标签”,勾选“百分比”与“类别名称”,并将标签位置设为外部端点

4、从“插入”选项卡中选择“切片器”,将同一分类字段(如“地区”)加入切片器,调整其宽度与饼图对齐。

5、右键饼图→“属性”→启用“工具提示”,新建一个空白页作为工具提示页,在其中添加卡片图并绑定“毛利率”与“订单数”字段。

四、ECharts在浏览器中配置3D交互与动态刷新

ECharts基于JavaScript,支持深度自定义与实时渲染,适用于Web端数据看板及中后台系统集成。

1、在HTML文件中引入ECharts官方CDN地址:https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js

2、为容器div设置id="pieChart"及固定宽高(如width: 600px; height: 400px),确保渲染区域存在。

3、初始化echarts.init(document.getElementById('pieChart')),随后定义option对象,series中设置type: 'pie',并启用roseType: 'area'增强立体感。

4、在series内配置emphasis对象,其中focus设为'self',label中formatter设为'{b}: {d}%',实现悬停时仅高亮当前扇区并显示比例。

5、调用myChart.setOption(option)完成渲染后,监听'mouseover'事件,通过dispatchAction触发dataZoom,实现扇区放大动画效果。

五、Excel中结合切片器与动态透视表生成可筛选饼图

Excel利用内置数据分析引擎实现零代码交互,适合业务人员快速搭建轻量级仪表盘,所有操作均在界面中完成。

1、选中原始数据区域(含标题行),点击“插入”→“数据透视表”,选择“新工作表”作为放置位置。

2、将分类字段(如“部门”)拖入“行”区域,将数值字段(如“预算金额”)拖入“值”区域,确认汇总方式为“求和”。

3、点击数据透视表任意单元格,在“分析”选项卡中选择“字段设置”,勾选“显示项目标签”,确保每个部门名称可被识别。

4、点击“插入”→“切片器”,勾选分类字段(如“季度”),调整切片器大小并置于饼图右侧,设置列数为3以优化空间布局。

5、选中数据透视表,点击“插入”→“图表”→“饼图”,右键图表→“选择数据”,将图例项设为数据透视表的行字段,值设为求和项,完成绑定。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

557

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

394

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

756

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

478

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

454

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

1051

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

658

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

554

2023.09.20

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

8

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号