js统计图表工具FineReport教程：[12]图表缩放

1、图表准备

添加一个ds1数据集：SELECT * FROM [销量]

在报表主体中合并一片单元格区域，插入单元格图表元素，选择柱形图，图表布局方式选择上下渐变，接着在右侧的图表属性表-数据中，为该柱形图绑定数据，如下图：

2、 图表缩放

选中图表，在右侧的图表属性表中选择特效>交互属性，勾选图表缩放标签前面的单选框，如下图：

3、效果查看

点击分页预览，查看模板，我们可以在web端看到如下图所示的效果，在分类轴数据标签下方出现一个缩放控件，控件有左右两个滑动按钮，两个按钮之间的分类轴数据就是上方图表显示的部分：

4、 图表缩放控件滑动

按住左侧的滑动按钮拖曳至张颖销售员数据标签处，可以看到上方的数据也随之变化，只显示张颖销售员到右侧滑动按钮所在的韩文销售员之间的数据，如下图：

注：右侧滑动按钮也可以滑动

5、直接矩形区域放大

除了可以使用滑动按钮来放大缩小图标部分之外，FineReport还支持直接使用鼠标选中一个矩形区域，那么就放大该区域中所框到的系列所在的分类，如下图：

6、注：如果矩形区域只选择了某个分类的一个系列，那么在放大的时候也还是会显示整个分类的所有系列。