反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

富文本自定义标签或提示

  • 文档创建者:Leo.Tsai
  • 历史版本:13
  • 最近更新:Alicehyy 于 2022-11-09
  • 1. 概述

    1.1 版本

    报表服务器版本JAR包版本
    功能变动
    10.0.102020-11-02-
    10.0.142021-03-17
    • 部分图表「标签」和「提示」中的富文本编辑功能可添加数据集字段作为参数

    • 字段格式设置入口放置到富文本编辑器内

    注:2020-11-02 JAR 包版本做的图表模板若放到旧 JAR 包版本的报表服务器中预览,标签会存在兼容问题,例如标签格式变成百分比、标签字符样式改变等,建议保持本地和远程 JAR 包一致。

    1.2 应用场景

    以往用户想要 自定义标签 或 自定义提示 时,只能通过 JavaScript 代码实现,这样既增加了报表开发难度,又对代码能力有较高的要求。

    因此推出「富文本」自定义标签或提示功能,通过「富文本编辑器」可以自行选择「标签」或「提示」需要展示的参数,以及设置展示的格式、字体样式等,并且可以自行输入文字说明与参数组合使用,以满足大部分自定义个性化「标签」或「提示」的需求。

    1.3 功能简介

    所有图表都支持富文本自定义「提示」,「仪表盘、甘特图、框架图」不支持富文本自定义「标签」。

    以「标签」为例,富文本编辑器的功能入口为「样式>标签>富文本>富文本编辑」。共有 3 个设置项,分别是「添加字段」、「字段设置」和「字体样式」。如下图所示:

    1614151333501665.png

    2. 功能介绍

    2.1 添加字段

    「富文本」支持添加以下两种字段作为参数:

    • 通用字段:分类名、系列名、值、百分比

    • 数据集字段:数据来源选择「数据集数据」时,所选择数据集包含的所有字段

    注:2021-03-17 JAR 包版本中,仅饼图(除分类标签)、柱形图、条形图、折线图、面积图、雷达图、组合图支持添加「数据集字段」。

    在富文本编辑器界面左上方「添加字段」处,点击字段后的「+」,即可将参数添加到下方编辑面板。

    如果想删除参数,直接在下方编辑面板键入光标后删除即可。

    1614153415870936.png

    2.2 字段设置

    在富文本编辑器界面的右上方「字段设置」处可进行字段格式的设置。

    1)通用字段:选中字段后,可设置其格式为:常规、数字、百分比、货币、科学计数、日期型、时间型、文本型,默认为「常规」。如下图所示:

    Snag_9cd54a.png

    2)数据集字段:「格式」设置与「通用字段」格式设置一致,另外,还可设置数据集字段的「汇总方式」,可设置为:首个、最后一个、求和、平均、最大值、最小值、个数,默认为「首个」。如下图所示:

    1614155308844303.png

    注:添加字段与字段格式设置无先后顺序之分。若添加多个相同的字段,以最后一个字段为准。

    2.3 字体样式

    富文本编辑界面可以选择 2 种设置字体样式的方式,分别如下:

    1)自动:只需要编辑文本内容即可,字体样式采用系统默认逻辑。

    1614155739172944.png

    2)自定义:右侧有字体样式设置选项,用户可以自定义文本的字体、字号、文字颜色、对齐方式等。

    注1:若要修改文字样式,必须先在编辑面板选中对应的文字。

    注2:自定义时,字体选择固定只有下图中的几种,不根据设备中安装的字体显示。

    注3:这里字号的单位是 px,并不是 pt。

    Snag_1d94549a.png

    3. 示例

    下面以富文本自定义提示为例,介绍如何使用该功能。

    3.1 准备模板

    打开设计器内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\BasicChart\堆积柱形图.cpt

    3.2 自定义提示

    1)选中堆积柱形图,图表属性面板选择「样式>提示>富文本」,点击「富文本编辑」,弹出富文本编辑器对话框。

    2)将编辑面板原有参数删除,选中左上方「百分比」参数,在右上方修改百分比格式为「#0%」,再点击「+」将「百分比」添加到编辑面板。

    3)选择编辑面板的字体样式为「自动」,在「百分比」前键入光标,输入说明文字「总货量占比:」,最后点击「确定」。

    如下图所示:

    1614158919846882.png

    3.3 效果预览

    3.3.1 PC 端

    保存报表,点击「分页预览」,将鼠标移至柱形图上,提示效果如下图所示:

    1603438997861698.png

    3.3.2 移动端

    App 端和 HTML5 端均支持,效果如下图所示:

    1603439215198931.jpg

    4. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\Chart\富文本自定义提示.cpt

    点击下载模板:富文本自定义提示.cpt

    附件列表


    主题: 图表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

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

    总裁办24H投诉

    热线电话:173-1278-1526