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

web 图表工具FineReport html5动态图表功能展示 1、图表在线切换 FineReport支持在B/S下直接切换图表显示类型。有别于其它工具通过制作 多个图表，传参控制行高来隐藏其它图表的方式切换。FineReport在制作过程 中只需完成一种类型的图表制作，其余类型的图表的制作完全由FineReport 自 动完成，是真正意义上的在线切换图表。 、数据点提示 图表交互意在图表中为使用网页语言如信息提示、颜色高亮、钻取等来表达 产品要告诉用户的信息，让用户获得更好更舒适的体验。 选中图表，点击图表属性表—特效按钮，选择交互设置选项，设置想实现的 内容，可实现数据提示效果：当鼠标移动到图表，如移动到折线图的节点处，会 显 示 节 点 的 信 息 ， 效 果 如 图 所 示 ： 3、图表条件显示 在FineReport中，可以通过条件实现多种特殊图表效果，其中比较有特点 的是：根据条件显示柱子颜色或系列标签颜色与图例颜色相同，下面展示两种效 果的具体表现形式： 根据条件显示柱子颜色 希望将满足一定条件的某个系列高亮显示。如下图，销售成本最少的显示红 色，销售成本最大的蓝色突出，以上需求可以通过设置图表的条件显示来实现： 系列标签颜色与图例颜色相同 在查看图表的标签数据时，希望标签内容和图例的颜色相同，即实现如下图 所示的效果 4、图表链接 图表链接可以是单个模板中的图表超链，也可以是模板与模板中的图表链接 即热点连接。 图表热点链接(图表钻取) FR 如下图， 中图表也可以进行无限层次的热点链接，进行数据的钻取。实 现图表的热点钻取，钻取几层急需要几张图表，上一层图表在图表超级链接处将 参数传递给下一层图表，下一层模板通过一样的参数名接收参数值，实现数据过 滤 ， 并 将 过 滤 后 的 数 据 作 为 图 表 的 数 据 源 即 可 。 图表联动 单个模板的图表超链功能，可让用户在同一页面中查看多张关联的图表，实 现图表联动的效果，这种联动是自动的，不需重新刷新整个页面，如下图： 3 个 图 表 的 联 动 效 果 图 ： 点击图表后在对话框中显示子图表 点击某张图表时，将明细图表以弹出框的方式显示出来，而不需再打开一个 网 页 ， 效 果 如 下 图 5、图表坐标轴缩放 图表坐标轴缩放就是指在web端 （浏览器端）查看图表时，在看整体走势的 同时，还想要放大查看自己关注的图表细节部分，这时就可以使用FineReport 的图表缩放功能。 我们可以在浏览器端看到如下效果，在分类轴数据标签下方出现一个缩放 件，控件有左右两个滑动按钮，两个按钮之间的分类轴数据就是上方图表显示的 部分，鼠标移动分类轴，值轴时，对应的坐标轴就开始进行缩放： 图表缩放控件滑动 按住左侧的滑动按钮拖曳至张颖销售员数据标签处，可以看到上方的数据也 随之变化，只显示张颖销售员到右侧滑动按钮所在的韩文销售员之间的数据，同 理 ， 右 侧 滑 动 按 钮 也 可 以 滑 动 ， 如 下 图 ： 直接矩形区域放大 除了可以使用滑动按钮来放大缩小图标部分之外，FineReport还支持直接使 用鼠标选中一个矩形区域，那么就放大该区域中所框到的系列所在的分类，如下 图 ： 6、多维度坐标轴 2 多维度坐标轴图是指在图表中展示多个维度，不仅仅局限于 个维度 （展示 2 2 个维度只能比较一个维度之间的数据），可以在同一张图表中同时比较 个或 2个以上的维度的数据。 如下图，可比较华东地区各个产品类型的销量情况，也可以比较饮料产品类 型 在 华 东