找回密码
 立即注册

QQ登录

只需一步,快速开始

断天涯大虾
社区贡献组   /  发表于:2016-6-24 10:58  /   查看:5023  /  回复:0
在本系列的前面几节中,我们发现 SpreadJS 在数据的表示上已经显现出惊人的效果。通过简单的迷你图函数调用或者条件规则设置,即可完成数据的生动呈现。但是 SpreadJS 在数据筛选与呈现方面的能力仅止于此吗?不!今天,将接着介绍第三种强大的数据可视化方法“切片器”。
第五讲:SpreadJS中的切片器是什么?有哪些分类?
不同于“迷你图”和“条件格式”,切片器必须作用于表单中的表格,具有强大的数据快速筛选功能。不需要将表单拉到底部,您就可以准确筛选并定位数据信息。
按照使用方式,SpreadJS 切片器可以分为两种。一种是类似 Excel 的按钮切片器,提供一组便利的过滤器来对数据进行筛选。另一种是添加了便利工具的切片器,使您可以通过值、日期范围和数字范围来切分数据。
1、按钮切片器
按钮切片器能够为您带来经典的 Excel 体验,插入的一个按钮切片器对应控制一列数据的筛选。
标题1的第1幅.gif
除此以外,按钮切片器还提供丰富的样式,包括浅色切片器样式、深色切片器样式和自定义切片器样式。
a)浅色切片器样式
4.png
b)深色切片器样式
5.png
c)自定义切片器样式
6.png
2、添加便利工具的切片器
使用切片器工具集添加便利的工具,如复选框和滑动条等,可为您带来更好的数据筛选体验。同时,您也可以使用柱形图或者其他自定义控件作为切片工具以提供向下钻取功能。
a)添加了复选框的切片器
标题2的第4幅d.gif
b)添加了滑动条的切片器
标题2的第5幅e.gif
c)添加了柱状图的切片器
标题2的第2幅b.gif
标题2的第3幅c.gif
d)添加了树形图的自定义切片器
标题2的第1幅a.gif
怎么样,SpreadJS的切片器在数据的筛选与呈现方面是不是很有表现力?是不是强大到不可思议?

1.png
2.png
3.png

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部