图表使用 HTML 解析文本内容

1.1 应用场景

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

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

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

以标题为例，例如图表标题直接输入 HTML 代码 <font color='#00AEFF'>▍</font> 产品销量 ，再选中「使用html解析文本内容」。效果如下图所示：

1.2 功能入口

1）标题

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

3）标签

4）坐标轴

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

6）条件属性 - 标签

1.3 导出支持

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

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

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

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

• 仅支持内联样式：font-size、font-family、font-style、font-weight、color（font-weight设置加粗时，仅支持bold，不支持bolder）

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

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

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

2.1 准备模板

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

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

2.2 自定义标题

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

HTML 代码如下：

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

2.3 效果预览

1）PC 端

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

2）移动端

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

2.4 图表导出

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

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

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

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

此处给出一些 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>