反馈已提交

网络繁忙

智慧树图

  • 文档创建者:Leo.Tsai
  • 编辑次数:8次
  • 最近更新:Alicehyy 于 2021-10-25
  • 1. 概述

    1.1. 版本

    报表服务器版本扩展图表插件版本功能变动
    10.0V4.2-
    V4.3点击气泡后,气泡可以保持高亮

    1.2 应用场景

    扩展图表插件 4.2 版本新增一种图表类型:智慧树图。

    该图表以动态树节点的形式,显示关键的维度指标信息,可以极大丰富大屏的视觉效果。智慧树图共有 2 种子类型,效果分别如下:

    • 智慧树图-电子

    758A4B27-3761-4098-B38C-149995F87F36.GIF

    • 智慧树图-模型

    2FBF7B21-11B2-4BE3-880C-42305A24E6B6.GIF

    1.3 功能介绍

    • 智慧树图的 2 种子类型配置和功能一致,只是视觉效果和展示风格不一样

    • 支持自定义图表样式,包括树的主题色、节点气泡颜色、节点气泡大小等

    • 支持自定义是否开启特效背景

    • 支持图表定时刷新、图形轮播、轮播触发超级链接

    • 同时支持 cpt 和 frm 报表,不支持移动端

    1.4 插件安装

    点击下载插件:扩展图表插件

    设计器插件安装方法参见:设计器插件管理

    服务器安装插件方法参见:服务器插件管理

    1.5 图表入口

    图表类型的扩展图表-其余下新增智慧树图的 2 种子类型,可选择插入到报表中。

    Snag_297a6a16.png

    1.6 图表交互

    前端预览时,点击某个气泡,该气泡会一直保持高亮效果;点击非气泡区域后,可以取消高亮效果。

    如果开启了气泡轮播,那么点击气泡后,轮播中断;点击非气泡区域后,从上一次轮播中断的地方继续轮播。

    201BA0E0-79BC-4D4C-9547-E37561A4FCC0 (1).GIF

    2. 图表属性

    2.1 数据

    智慧树图可以绑定 2 个字段,节点名称必须设置,节点内容显示在节点名称下方,选择无可以不设置,示例中就没有设置节点内容。

    Snag_2992c86d.png

    节点名称和节点内容的显示位置如下图所示:

    Snag_299db415.png

    2.2 样式

    2.2.1 图形

    • 树:改变树的整体颜色

    • 气泡:可以自定义树上的气泡大小、颜色、选中色

    • 标签:可以修改数据文本的格式

    • 字符:可以修改数据文本的样式,包括字体、字号、颜色等

    Snag_29a0e2c7.png

    2.2.2 背景

    • 流光效果:可选择是否开启流光动画

    • 齿轮效果:可选择是否开启齿轮动画

    • 填充:设置图表填充背景

    • 不透明度:设置图表填充背景的不透明度

    Snag_29a40c69.png

    两个动画效果的位置如下图所示:

    Snag_29a74349.png

    2.3 特效

    • 刷新:开启定时刷新后,每隔一段时间,重新加载数据并触发树节点图的初始动画

    • 播放:开启图形轮播,节点气泡会进行轮播。如果开启了触发超链且设置了超链,轮播时还会自动触发超链

    • 超级链接:图表添加超级链接

    Snag_29a81dbb.png

    3. 示例

    智慧树图-电子智慧树图-模型的设置方法完全一致,下面只给出智慧树图-模型的示例,智慧树图-电子同理设置即可,它们只是风格不同。

    3.1 准备数据

    新建一个内置数据集,如下图所示:

    Snag_29839fe0.png

    3.2 插入图表

    合并一片区域单元格,插入智慧树图-模型,如下图所示:

    1604561939175765.png

    3.3 绑定图表数据

    图表数据绑定节点名称,节点内容设置为无,如下图所示:

    Snag_2988ced7.png

    3.4 效果预览

    保存报表,点击分页预览,效果如1.2应用场景中所示。

    4. 模板下载

    4.1 智慧树图-电子

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extend\智慧树图-电子.cpt

    点击下载模板:智慧树图-电子.cpt

    4.2 智慧树图-模型

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extend\智慧树图-模型.cpt

    点击下载模板:智慧树图-模型.cpt

    5. 注意事项

    5.1 节点展示不全

    图表展示区域设置的过小,而节点数据比较多时,可能出现节点不能完全展示出来的情况,例如:

    数据集中有 4 个节点,如下图所示:
    Snag_29b22a2e.png

    而前端展示时显示了前 3 个,如下图所示:

    Snag_29b45962.png

    此时如果想要在不改变区域大小的前提下,展示出所有节点,只需要把节点气泡调小一点

    Snag_29b68124.png

    5.2 JAR 包依赖

    扩展图表插件 4.0 及之后版本依赖于%FR_HOME%\lib下以jxbrowser开头的 2 个 JAR 包,如下图所示:

    如果缺少这 2 个 JAR 包,安装扩展图表 4.0 及之后版本,会有报错:扩展图表初始化失败

    Snag_48a9ad4c.png

    如果用户发现自己的设计器安装目录下缺少这 2 个 JAR 包,需要根据自己的系统下载 JAR 压缩包,解压后拷贝到目录%FR_HOME%\lib下。

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭