思维导图插件

  • 文档创建者:枫城
  • 编辑次数:7次
  • 最近更新:枫城 于 2020-03-23
  • 1. 概述

    1.1 版本

    报表服务器版本

    JAR 包版本

    插件版本

    10.02017-12-15V1.1
    9.02017-12-15V1.1
    8.02017-12-15V1.1

    1.2 应用场景

    市场上有很多脑图软件,但大部分需要收费,且需下载安装,具有局限性。

    使用本插件可以免费在 FineReport 中创建自己的思维导图,并进行多格式下载和分享。方便用户在会议汇报,脑图风爆,个人思绪整理方面的使用。

    效果如下图所示:

    Snag_67c4fbb.png

    1.3 功能介绍

    • 支持设计器和 Web 端双端制作思维导图。

    • 思维导图支持导入导出 JSON。

    • 支持输出 PDF。

    • 支持各种工具按钮。

    • 支持 KityJS 的所有导图模式。

    • 支持标题的文本、颜色、边框、背景配置。

    • 支持边框的线条、颜色、圆角配置。

    • 支持风格配置。

    • 支持配置前端预览是否显示操作。

    2. 插件介绍

    2.1 插件安装

    点击下载插件:思维导图

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

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

    2.2 操作方法

    安装好插件后,新建决策报表,图表管理面板处会新增一个图表类型思维导图,将其拖入到决策报表中即可使用。如下图所示:

    Snag_6801e19.png

    注1:也支持在 cpt 报表中使用思维导图。

    注2:思维导图的图标跟框架图的图标是一模一样的,需要注意区分。

    2.3 属性设置

    2.3.1 数据设置

    1)设计器内数据设置

    选中拖入的思维导图,属性面板选择数据,可通过 Snag_68b0675.png 这个编辑按钮对思维导图进行文字编辑,可通过 Snag_68be1e1.png 对思维导图进行层级划分,如下图所示。

    Snag_689a157.png

    2)Web 端数据设置

    报表预览时,可以在Web端编辑思维导图。点击下级目录按钮进行下级目录创建,新建的目录可点击双击编辑文字内容。

    image.png

    3)直接打开数据源的方式

    在预览页面,点击 Web 端的文件按钮,选择对应文件,便可在 Web 看到文件内容。当前支持 JSON 文件。

    image.png

    注:frm 展示内容、重新打开内容按设计器编辑为准,Web 端更新和编辑均无法保存至 frm。

    2.3.2 样式设置

    1)设计器内样式设置

    a. 标题设置

    标题是否可见,标题编写,标题对齐方式,标题边框设置,标题背景设置。

    image.png

    b. 边框设置

    包括边框的线型设置,边框颜色设置。

    image.png

    c. 风格设置

    主题里可选 多个脑图的主题:如紧凑脑图,粉色脑图,经典脑图,天蓝脑图等。

    模板里可选 思维导图,天盘图,组织结构图,目录组织图,逻辑结构图,鱼骨头图,可按照展示题材选择合适的模板。

    image.png

    d. 操作

    是:预览时可以编辑。

    否:预览时不可编辑。

    image.png

    2)Web 端样式设置

    image.png

    上图中的工具栏按钮从左到右依次是:

    • 文件:打开文件,显示在WEB端。

    • 导出:当前页面思维导图下载,可支持JSON,PDF,图片,SVG,MD,text等格式导出。

    • 撤销:取消上一步操作。

    • 重做:还原上一步操作。

    • 添加下级目录:思维导图添加下级目录。

    • 添加上级目录:思维导图添加上级目录。

    • 添加同级目录:思维导图添加同级目录。

    • 上移:思维导图向上位移。

    • 下移:思维导图向下位移。

    • 编辑:编辑对应文本。

    • 删除:删除思维导图层级。

    • 样式选择1:主题选择。

    • 样式选择2:模板选择。

    • 缩小:思维导图缩小。

    • 放大:思维导图局部放大。

    • 还原最初比例:恢复至原始比例。

    3. 示例

    3.1 报表设计

    1)新建决策报表,向报表画布内拖入Tab 块,向 Tab 块下方拖入思维导图,如下图所示:

    image.png

    2)在思维导图控件编辑区,编辑各个节点和内容。

    3.2 样式设置

    1)标题设置 

    示例中标题设置为不可见。

    image.png

    2)边框设置

    示例中边框设置线型为无,颜色默认。

    image.png

    3)风格设置

    示例中5个思维导图模板分别设置为 思维导图,组织结构图,目录组织图,逻辑结构图,鱼骨头图,方便显示模板各种效果。

    image.png

    4)操作设置

    示例中设置为可编辑。

    image.png

    3.3 效果预览

    保存报表,点击表单预览,思维导图展示示例如下所示:

    1)经典思维导图模板样式

    image.png

    2)组织结构图模板样式

    image.png

    3)目录组织图模板样式

    image.png

    4)逻辑结构图模板样式

    image.png

    5)鱼骨图模板样式

    image.png

    注:不支持移动端。

    4. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\other\思维导图模板.frm

    点击下载模板:思维导图模板.frm

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!