图表使用 HTML 解析文本内容

  • 文档创建者:Leo.Tsai
  • 编辑次数:18次
  • 最近更新:Leo.Tsai 于 2020-08-17
  •  1. 概述

    1.1 应用场景

    可以使用 HTML 代码自定义图表标题、图例、标签等,选择使用html解析文本内容后,前端预览时,标题、图例、标签等会根据 HTML 代码改变样式。

    注1:文本填写 HTML 代码时,不能使用公式,直接在文本框编辑即可。

    注2:预览时使用 HTML 语句解析均可以支持;导出时只支持部分语句。

    Snag_434ff355.png

    以标题为例,示例中使用 HTML 代码自定义折线图标题,最终样式如下图所示:

    1594021202444253.png

    1.2 功能入口

    1)标题

    Snag_4364a454.png

    2)范围图例(地图和钻取地图的形态为渐变色或区域段)

    Snag_4365060c.png

    3)标签

    Snag_43656f55.png

    4)坐标轴

    Snag_4365c814.png

    5)条件属性 - 数据点提示

    Snag_436d0f5c.png

    6)条件属性 - 标签

    Snag_4372189b.png

    1.3 导出支持

    2020-07-06 及之后版本的 JAR 包支持 HTML 解析文本导出(图表导出为图片、Excel、PDF等),示例图表导出为 Excel 时,HTML 文本解析的标题正常导出,如下图所示:

    Snag_438023e1.png

    目前支持部分标签和内联样式,详细介绍如下:

    • 仅支持标签:<b>、<strong>、<i>、<em>、<br/>、<span>

    • 仅对<span>支持内联样式

    • 仅支持内联样式:font-size、font-family、font-style、font-weight、colorfont-weight设置加粗时,仅支持bold,不支持bolder

    • 不支持标签之间的嵌套格式

    • 导出的 HTML 文本仅支持水平显示,不支持旋转

    • 暂不支持标签的嵌套格式,例如:<span>父节点<span>子节点</span></span>

    2. 示例

    2.1 准备模板

    打开设计器内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\NewLineChart\自定义标记点属性.cpt

    或点击下载模板:自定义标记点属性.cpt

    2.2 自定义标题

    属性面板选择样式>标题,勾选标题可见,文本编辑框输入 HTML 代码,并点亮使用html解析文本内容,如下图所示:

    Snag_438727a8.png

    HTML 代码如下:

    <span style="font-size:16px; font-family:Verdana; font-style:italic; font-weight:bold; color: grey;">年度销量统计</span>

    2.3 效果预览

    1)PC 端

    保存报表,点击分页预览,自定义标题效果如下图所示:

    1594021202444253.png

    2)移动端

    同时支持 App 端和 H5 端预览,效果如下图所示:

    1594025297530645.jpg

    2.4 图表导出

    分页预览时,将报表导出为 Excel 文件。

    Snag_1e42a079.png

    文件内图表效果如下图所示:

    Snag_438023e1.png

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\Chart\使用HTML定义图表标题.cpt

    点击下载模板:使用HTML定义图表标题.cpt

    4. HTML文本解析应用

    此处给出一些 HTML 文本解析的常用写法,方便用户理解和参考。

    4.1 单个标签的单行显示效果

    <span style="color:blue;">新建图表标题</span>
    <b>新建图表标题</b>
    <i>新建图表标题</i>
    <span style="font-size:16px; font-family:Verdana; font-style:italic; font-weight:bold; color: #00f;">新建图表标题</span>

    4.2 单个标签的换行显示效果

    <span style="color:blue;">新建<br>图表标题</span>
    <span style="color:blue;">新建<br>图表<br>标题</span>
    <em>新建图<br>表标题</em>

    4.3 多个标签单行显示

    <b>新建</b><i>图表</i>
    <b>新建</b><i>图表</i><em>标题</em>
    <span style="color:blue;">新建</span><i>图表</i><em>标题</em>

    4.4 多个标签换行显示

    <b>新建<br>图表</b><br>
    <b>新建<br>图表</b><br><em>标题</em>
    <b>新建</b><i>图表</i><br><em>标题</em>

    附件列表


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