图表切换即在同一页面在线切换展示不同图表,可以选择按钮(button)和轮播(carousel)两种切换方式。
图表区内部上方,按照图表切换的个数平均分布各个图表切换控件,切换效果如下:
注:如果图表名称缩略显示了,则鼠标移动到对应的控件位置时,在控件下方居中显示图表名称的数据点提示。
1.2示例二carousel形式
可设置自动播放时间间隔,则从初始化状态开始,按照间隔,依次向右切换图表进行展示。如果到达最后一个图表,在时间间隔后,回到第一个图表,依次循环播放。 点击右侧的切换控件,则向右切换;对应的,点击左侧的切换控件,则向左切换图表。如果已经处于最后一个图表,则再点击右侧切换控件后,从左侧第一个开始展示;反之点击左侧控件到达最左侧后,继续点击,切换到右侧最后一个图表。图表区下方的轮播切换圆点,代表当前图表状态。当前展示的图表对应的圆点突出显示。悬浮对应的圆点,提示该圆点对应的图表名称。点击后,可立刻切换到对应的图表,切换效果如下:
注: 鼠标在图表区后,中断轮播状态;鼠标移开图表区间隔时间后,继续轮播状态。
2.1制作模板
新建内置数据集地域分布
以单元格图表为例,合并一片单元格,点击插入>单元格元素>插入图表,选择地图(新特性),如下图:
选中图表,在右侧图表属性表中选择图表属性表-类型,修改标签名称为地图,依次设置图表属性表中的类型、数据、样式和特效,这里不再一一介绍
2.2添加图表类型
再新增一个内置数据集访客属性年龄
在右侧图表属性表中选择图表属性表-类型,点击新增一个图表2标签
双击图表2标签重命名为条形图,选择条形图(新特性),依次设置图表属性表中的类型、数据、样式和特效,这里不再一一介绍
注:如果新建的第一个图表为新图表,则新增图表切换后,图表类型面板内只能在新图表之间切换;如果新建的第一个图表为老图表,则新增图表切换后,图表类型面板内只能在老图表之间切换。
重复上述步骤,增加需要的内置数据集和图表类型,并依次设置图表属性表中的类型、数据、样式和特效,如下图所示:
2.3图表切换属性
在右侧图表属性表中选择图表属性表-类型,点击设置按钮,选择切换方式为按钮,同时设置按钮控件的样式和背景,如下图所示:
2.4保存与预览
保存模板,点击分页预览,即可看到如上图示例一所示效果。
已完成模板可参考%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\GraphSwitching\GraphSwitching.cpt
3.1模板制作
模板制作方式同示例一,图表切换属性选择轮播切换方式,可设置其时间间隔与切换按钮的背景颜色,如下图所示:
3.2保存与预览
保存模板,点击分页预览,即可看到如上图示例二所示效果。
已完成模板可参考%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\GraphSwitching\GraphSwitching.cpt