一种数据展示方式，UI设计新颖，供大家参考

这款设计主要是用于进行数据分析和对比，譬如，不同省份的一些不同月份的数据对比（图为China Telecom的一些假数据）。 设计取名为LatticeControl。

页面开始，每一个蓝色格子代表一个月份：



右侧的数据显示的是对应省份的营业额以及该省份在总体上的比例。

当鼠标经过某一项时，显示当前月份的信息：



点击某一个格子，当前节的对应项进行高亮显示，同时右侧显示所有项May（五月）的相关信息：



继续点击当前的选中项，所有省份的May项会移动到第一位进行形象比较，右侧数据仍显示当前比较的项：



当用户继续点击移动项时，选中的移动项会返回到原本位置，如开始所示：



在此期间，若用户选中其他项，则已经移动的项会返回，同时选中的项会移动到首位进行比较。

上述版本是以每个省份的数据都是100%为限定的，也就是说每个省份的所有月份数据（蓝色格子的长度）加起来都是相同的， 这是代码给定了‘percentage’ 参数，这样有有点也有缺点，有点就是整体更加充实，但缺点却不会更加形象，如果给定‘value’ 参数，则会按照固定的数值进行显示，这样会更加形象地看清整体的对比， 如下：



由此就可以更加形象地做出对比和分析：



时间原因，代码部分会在后面的文章中贴出。