axure pr动态可视化元件库在哪有_【Axure9百例】40.数据可视化

“ 啥时候可以有设置颜色的动作？”

这是《Axure9百例》系列第40篇

数据可视化是个比较有趣的话题，我们在朋友圈看到python课程的宣传广告，很多就是一些可视化的图表。

说到可视化的样式设置，不由得吐槽一下Axure的颜色设置功能，啥时候能在动作里添加个设置颜色的，这样就可以设置形状的颜色了。搞得今天这个案例只能通过设置透明度的方式，来实现简单的可视化效果。

今天的这个案例是给定一些数据，根据每条数据在总体中的占比，显示不同颜色的深度。数据是安徽省各地市的虚拟的业务办理量数据，原始数据如下表格：

最终显示的效果图如下：

没有什么震撼的效果，地图中各地市是一个个独立的形状(在地图背景上描出来的)，因此可以设置颜色，比如下面的这样的：

当然，颜色设置不是重点，今天我们要讲的是怎么设置这样的效果。

01

—

界面布局

界面是由16个个地市形状组成的安徽省地图，就不说其中用Axure中的画笔工具画地图的费劲功夫了(其实可以通过网上的地图网站生成SVG图，然后在Axure里转换成形状就可以了)，每个地市的形状都有自己的命名，为的是后面用来设置不透明度的。

旁边加了个中继器，显示16个地市的数据，大概就下面这个样子：

02

—

交互处理

交互处理只在中继器上，在每项加载事件里，根据当前的城市名称，设置相应的地市形状的不透明度，比如下面这个“合肥”的显示不透明度的设置：

如果城市名称是“合肥”

1、设置形状hefei的不透明度为Item.percent*rate，这里乘以一个数值rate=1.5，主要是把不透明度值统一设置大一点，这样不至于百分比较小的地市看不清。

2、设置文本：这个是显示右边表格的内容，可以忽略，主要是上面第1点的不透明度设置。

其它的地市判断一样，如下：

逻辑完全一样，只是不透明度的设置对象不同。(事件的复制/粘贴，修改不透明度的目标对象)

哎呀，事件处理是不是有点简单。。。就是这么简单

可以预览一下效果了。

03

—

小结

因为Axure不支持通过动作来设置形状的填充颜色，所以只能通过设置不透明度的方式来实现这种可视化的效果。

还可以通过中继器为这个地图动态生成一个图例，要不，你试试？

往期回顾

【Axure9百例】39.分页显示

【Axure9百例】38.浮动按钮

【Axure9百例】37.宽屏二级下拉菜单

【Axure9百例】36.文本框搜索自动匹配

【Axure9百例】35.透明元件和创意动画

产品原型设计是产品经理的基本技能，本系列是 Axure9 原型设计的基础知识普及，目标是通过一百个案例，从不同的使用场景来学习 Axure9 的应用。希望你能通过点赞、在看或转发，让行业内更多的人一起学习，共同提升我们的原型设计能力，提高我们的产品设计能力。