Xcelsius(水晶易表)系列16——自定义地图图表

今天继续跟大家分享水晶易表系列关于地图呈现的技巧——自定义数据地图。

该案例主要通过图标模拟与之前学过的动态可见性,根据数据需求,订制动态交互式地图图表。

案例中用到了北京、重庆、广东省三个省级行政区的数据,通过在对应行政区位置添加隐藏的图标,链接使得对应区域有深色填充的地图图片显现,同时图标返回对应区域动态数据,激活对应区域统计图呈现,从而达到图表与区域同时联动的动态交互效果。

所用素材会与数据文件一并分享在魔方学院的QQ群里:

案例截图如下:

里面的地图不是水晶易表内置的地图,是导入的地图素材,而且是三张,每一张的对应省份位置区域填充深色,通过在对应省份位置添加图标链接,点击后会调用可见性让对应省份的地图呈现在画布上,同时下方的统计图也会随着对应省份填充地图一同呈现。

案例数据如下:

数据结构非常简单,上半部分是三个省份对应图标链接的标签位置(A4:A6),对应代码(B4:B6)以及目标插入位置(B7)。

下半部分是对应省份统计图数据源(B10:B13、C10:C13、D10:D13)以及标签位置(A11:A13)。(三个统计图对应可见性代码分别为1、2、3,状态为B7)。

在水晶易表中,我们先插入图像部件,将素材的四张图片全部导入,居中覆盖对齐。

在选择器部件中插入对应省份(北京、重庆、广东)图标,分别将北京、广东、重庆对应图标标签链接到对应单元格)(A4:A5),对应数据插入位置的源数据修改为(状态(选中:1、取消选中:1)、(选中:2、取消选中:2)、(选中:3、取消选中:3)),目标均插入B7单元格。

重庆与广东区域面积较大,形状轮廓比较特殊,可以将其复制几份,覆盖整个对应地区图形形状。

插入三个柱形图、标签链接到:A11:A13,数据源分别为B11:B13、C11:C13、D11:D13。动态可见性状态均为B7,代码分别为1、2、3.

最后将所有图表批量选中,在属性中设置100%透明。

再次预览一下,点击对应省份位置区域,如果现实悬浮标签,并且下方图表切换正常,则整个交互动作设置设置完毕,可以导出使用。

原文发布于微信公众号 - 数据小魔方(datamofang)

原文发表时间:2016-08-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

Xcelsius(水晶易表)系列12——动态页面切换案例

今天继续跟大家分享关于水晶易表动态页面切换的案例。 该案例的仪表盘在技巧上没有新的东西,仍然是利用传统的单选按钮进行页面切换,同时对三个类型的图表数据对三个单值...

2597
来自专栏搞前端的李蚊子

css实现视差滚动效果

今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/inde...

5468
来自专栏我爱编程

初识HTML5

客观地讲,没有不好的技术,只有没有用好的技术。JavaScript 的坎坷遭遇让我不禁想起了另一种被人们滥用的技术:Adobe公司研发的 Flash。

1832
来自专栏编程

Web前端开发的四个阶段

第一阶段:HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终...

2015
来自专栏九彩拼盘的叨叨叨

《写给大家看的设计书》摘要与总结

该书适合完全没有设计背景,或在设计方面没有经过正规培训的人。 该书的描述浅显易懂,并且配有很多插图来做描述的说明。阅读起来觉得很轻松。

743
来自专栏向治洪

实用Android 屏幕适配方案分享

真正可用,并且简单易行,可以在多个屏幕大小和屏幕密度上有良好表现的Android 屏幕适配方案,已用在一款成熟互联网应用中,效果还不错。 ? 说起andro...

36810
来自专栏Android-JessYan

骚年你的屏幕适配方式该升级了!-今日头条适配方案

原文地址: https://www.jianshu.com/p/55e0fca23b4f

1741
来自专栏听雨堂

图标的使用和转换实战

桌面应用程序里,难免要做工具栏,尽管充斥着各种各样华丽的选择,什么office效果、vista效果等等,但喧嚣过后,感觉还是windows自带的工具栏最耐看,当...

1878
来自专栏腾讯社交用户体验设计

经验分享:多屏复杂动画CSS技巧三则 - 腾讯ISUX

2492
来自专栏腾讯社交用户体验设计

浅议内滚动布局 - 腾讯ISUX

1443

扫码关注云+社区

领取腾讯云代金券