反馈已提交

网络繁忙

智慧树图

  • 文档创建者:Leo.Tsai
  • 历史版本:13
  • 最近更新:Fay 于 2024-06-26
  • 1. 概述

    1.1 版本

    报表服务器版本扩展图表插件版本
    11.0V4.6.4

    1.2 应用场景

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

    • 智慧树图-电子

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

    • 智慧树图-模型

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

    1.3 功能介绍

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

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

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

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

    • 不支持移动端

    2. 示例

    「智慧树图-电子」和「智慧树图-模型」的各项属性设置方法完全一致,只是展示的风格不同。下面以「智慧树图-模型」为例,「智慧树图-电子」同理设置即可。

    2.1 准备数据

    点击设计器左上角「文件>新建普通报表」,在报表左下方新建一个 内置数据集 ,用于智慧树图绑定数据。如下图所示:

    Snag_70dbf7df.png

    2.2 插入图表

    合并一片单元格区域,插入图表选择「扩展图表-其余 > 智慧树图-模型」。如下图所示:

    Snag_70b906fc.png

    2.3 图表数据

    选中图表,点击「单元格元素>数据」,绑定数据如下图所示:

    智慧树图可以绑定 2 个字段,节点名称必须设置;节点内容显示在节点名称下方,可选择字段也可设置为「无」。

    节点名称和节点内容的显示位置固定不可设置。效果如下图所示:

    Snag_70c06508.png

    2.4 图表样式

    下面对图表默认样式进行简单介绍,可根据实际情况进行修改。

    2.4.1 图形

    • 树:主题色支持改变树的整体颜色

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

    • 标签:勾选字段则显示,支持修改显示标签内容的格式

    • 字符:可以分别修改显示标签中「节点名称」和「节点内容」的样式,包括字体、字号、颜色等

    本例仅修改「标签>节点内容」格式为「百分比」即可。如下图所示:

    2022-07-07_11-17-20.png

    2.2.2 背景

    • 流光效果:可选择是否开启树干中的流光动画,默认开启

    • 齿轮效果:可选择是否开启树根处的齿轮动画,默认开启

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

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

    Snag_29a40c69.png

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

    Snag_70c82394.png

    2.5 图表特效

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

    • 播放:开启图形轮播后,节点气泡会轮播选中高亮状态。如果开启了触发超链且设置了超链,轮播时还会自动触发超链

    • 超级链接:支持图表添加超级链接,实现图表联动传参等效果

    Snag_29a81dbb.png

    添加超链时,参数值可选「节点名称」和「节点内容」,节点名称即 NODE_NAME ,节点内容即 NODE_VALUE 。如下图所示:

    Snag_70f94f87.png

    2.6 效果预览

    保存报表,点击 分页预览 ,效果如下图所示:

    前端预览时,若未开启「图形轮播」,点击某个气泡,该气泡会一直保持高亮效果;点击非气泡区域,可取消高亮效果。

    如果开启了「图形轮播」,那么点击气泡后,轮播中断;点击非气泡区域,从上一次轮播中断的地方继续按照轮播间隔时间进行轮播。

    4DF6FFF0-4602-4395-9B81-FDA754D1FF92.GIF

    3. 模板下载

    已完成模板可参见:

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extend\智慧树图-电子.cpt

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extend\智慧树图-模型.cpt

    点击下载模板:

    智慧树图-电子.cpt

    智慧树图-模型.cpt

    4. 注意事项

    4.1 节点展示不全

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

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

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

    Snag_29b45962.png

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

    Snag_29b68124.png

    4.2 JAR 包依赖

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

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

    Snag_48a9ad4c.png

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

    附件列表


    主题: 图表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

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

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

    不再提示

    10s后关闭



    AI

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持