Xcelsius（水晶易表）系列13——选择器应用（图标与图片背景）

今天继续分享关于选择器的用法——使用图标配合背景完美模拟个性选择器。

今天的内容几乎没有任何新东西，所使用到的部件仍然是之前用到过的常用痛几天——条形图、柱形图、面积图、折线图结合对应的四个量表。

选择器使用的是图标部件，利用投透明化图标部件配合图片背景制作个性化、流程化的选择器仪表盘。

数据如下：

第一行作为整个仪表盘的正副标题。

第二个区域（A4：B8）是四个图标部件的标签，对应图标部件的源数据代码及目标插入位置（这些代码将对应接下来制作的四个图表类型进而通过动态可见性进行可视化控制）。

第三个区域A11：H15是对应四个费用指标的时间序列数据，将会展示在四个不同的图表类型中并受控于四个图标部件。

I16单元格存放的数据是通过INDEX函数控制：

函数语法如下：

=INDEX(I12:I15,B8,1)

即根据B8单元格目标参数在I12：I15四个单元格区域顺序返回对应指标。四个指标与设计费用、指标费用、装配费用、销售运输等四个指标一一对应。当鼠标单击对应费用图标时，B8返回对应序号，控制对应费用图表可见，同时I16单元格返回对应费用总额，控制单值量表显示对应费用总额指标。

数据结构就是这些很简单，导入水晶易表，按照我们之前分析的框架层次，先插入四个图标部件。（终于知道原书作者为啥不同里面的图标部件直接显示选择器而费了那么大周章把图标隐藏用背景图来模拟选择器，图标真的好丑）

四个图标标题依次链接到A4：A7单元格区域，在数据源中将四个图标的状态（取消选中、选中状态改成一样的）分别修改为（1、1）、（2，2、（3，3）、（4、4）。（这里因为我们不需要区分图标的选中与未选中状态）。

将四个图标的数据插入目标都链接到同一个单元格：B8。（该单元格将会成为之后四个统计图的动态可见性状态接收区域）。

在部件中依次插入四个统计图——折线图、柱形图、面积图、条形图。

标题链接位置依次为A12：A15，坐标轴标签链接位置均为B11：H11。具体数据区域依次为：B12：H12、B13：H13、B14：H14、B15：H15。

四个图表的动态可见性数据源状态链接到B8单元格，代码依次为1、2、3、4。

最后插入一个量表，标题：总额，位置：I16单元格。

所有部件都插入完毕了，此时在四个图标部件属性外观-布局内将其透明度调整为0，插入提前准备好的图片素材（置于底层）。覆盖图标位置并对齐。

预览一下，看是否有一些动态交互性没有连接上，检查无误，如有耐心，可以继续美化，最后导出就搞定了。

案例文件（excel数据文件、xlf文件以及swf视频文件我会分享在魔方学院的QQ群共享里）。

QQ群：

微信群：