为了更直观地查看图表数据,希望图表可以全屏、缩放、实时刷新等。这些效果,可通过选中图表,点击图表属性表-特效>交互属性进行设置,下面介绍交互设置的各种使用方法及效果。
2.1 初始时收缩在菜单栏
新图表新增了工具栏功能,有排序、导出图片和全屏展示三种功能,默认全选并收缩与抽屉菜单内:
预览时,图表右上角会出现工具栏,效果如下:
点击即可展开,效果如下:
当图形有变换时(经过系列拖拽或者点击排序后),在工具栏图标左侧出现刷新图标,如下图:
点击菜单按钮缩回去之后,刷新按钮依然在菜单图标左侧:
点击刷新按钮,图表回到初始状态,且刷新图标消失。
去掉菜单图标
,初始化时所有设定的功能图标都固定在右上角,如下图:
动画即打开图表时所展现的动态效果,默认打开。
坐标系翻转即将X轴和Y轴位置对调,默认关闭,打开后效果如下:
新图表缩放功能支持控件缩放和手势缩放两种形态;同时支持控件默认状态设置。
注:如果是多个图表类型组合的情况,缩放时设置的x,y轴为全部的x,y轴同时缩放;
另:开启坐标系反转后,图表缩放无法设置。
动态刷新含有三种模式:
(1)vancharts.setOptions(options)
图表整体重新加载。 因为options可更改图表类型等不可控因素,因此为整体的图表刷新,无需过度动画。但加载过后,需要刷新后图表的初始动画。
(2)vancharts.addData( data , amimation)
addData用来实现数据的监控效果,适用于柱形图,条形图,折线图,面积图。利用addData可以删除图表数据中队列最前的一条数据,同时在队列尾插入一条新数据。
(3)vancharts.setData( options)
setData用来更新图表的数据,同时实现图表刷新效果。
若数据库中的数据是实时更新的,则BS端的图表也希望能够实时更新数据,自动刷新便可实现此功能。
这里以仪表盘为例,详细制作方法和效果请参考仪表盘自动刷新。
图表链接可以是单个模板中的图表超链,也可以是链接到网络报表和邮箱等等,如下图: