html 动态图表,web图表工具FineReport+html5动态图表功能展示.pdf

web 图表工具FineReport html5动态图表功能展示

1、图表在线切换

FineReport支持在B/S下直接切换图表显示类型。有别于其它工具通过制作

多个图表，传参控制行高来隐藏其它图表的方式切换。FineReport在制作过程

中只需完成一种类型的图表制作，其余类型的图表的制作完全由FineReport 自

动完成，是真正意义上的在线切换图表。

、数据点提示

图表交互意在图表中为使用网页语言如信息提示、颜色高亮、钻取等来表达

产品要告诉用户的信息，让用户获得更好更舒适的体验。

选中图表，点击图表属性表—特效按钮，选择交互设置选项，设置想实现的

内容，可实现数据提示效果：当鼠标移动到图表，如移动到折线图的节点处，会

显 示 节 点 的 信 息 ， 效 果 如 图 所 示 ：

3、图表条件显示

在FineReport中，可以通过条件实现多种特殊图表效果，其中比较有特点

的是：根据条件显示柱子颜色或系列标签颜色与图例颜色相同，下面展示两种效

果的具体表现形式：

根据条件显示柱子颜色

希望将满足一定条件的某个系列高亮显示。如下图，销售成本最少的显示红

色，销售成本最大的蓝色突出，以上需求可以通过设置图表的条件显示来实现：

系列标签颜色与图例颜色相同

在查看图表的标签数据时，希望标签内容和图例的颜色相同，即实现如下图

所示的效果

4、图表链接

图表链接可以是单个模板中的图表超链，也可以是模板与模板中的图表链接

即热点连接。

图表热点链接(图表钻取)

FR

如下图， 中图表也可以进行无限层次的热点链接，进行数据的钻取。实

现图表的热点钻取，钻取几层急需要几张图表，上一层图表在图表超级链接处将

参数传递给下一层图表，下一层模板通过一样的参数名接收参数值，实现数据过

滤 ， 并 将 过 滤 后 的 数 据 作 为 图 表 的 数 据 源 即 可 。

图表联动

单个模板的图表超链功能，可让用户在同一页面中查看多张关联的图表，实

现图表联动的效果，这种联动是自动的，不需重新刷新整个页面，如下图：

3 个 图 表 的 联 动 效 果 图 ：

点击图表后在对话框中显示子图表

点击某张图表时，将明细图表以弹出框的方式显示出来，而不需再打开一个

网 页 ， 效 果 如 下 图

5、图表坐标轴缩放

图表坐标轴缩放就是指在web端 (浏览器端)查看图表时，在看整体走势的

同时，还想要放大查看自己关注的图表细节部分，这时就可以使用FineReport

的图表缩放功能。

我们可以在浏览器端看到如下效果，在分类轴数据标签下方出现一个缩放

件，控件有左右两个滑动按钮，两个按钮之间的分类轴数据就是上方图表显示的

部分，鼠标移动分类轴，值轴时，对应的坐标轴就开始进行缩放：

图表缩放控件滑动

按住左侧的滑动按钮拖曳至张颖销售员数据标签处，可以看到上方的数据也

随之变化，只显示张颖销售员到右侧滑动按钮所在的韩文销售员之间的数据，同

理 ， 右 侧 滑 动 按 钮 也 可 以 滑 动 ， 如 下 图 ：

直接矩形区域放大

除了可以使用滑动按钮来放大缩小图标部分之外，FineReport还支持直接使

用鼠标选中一个矩形区域，那么就放大该区域中所框到的系列所在的分类，如下

图 ：

6、多维度坐标轴

2

多维度坐标轴图是指在图表中展示多个维度，不仅仅局限于 个维度 (展示

2 2

个维度只能比较一个维度之间的数据)，可以在同一张图表中同时比较 个或

2个以上的维度的数据。

如下图，可比较华东地区各个产品类型的销量情况，也可以比较饮料产品类

型 在 华 东