图表标题/坐标轴/标签文本换行显示

1.1 问题描述

有时候希望图表标题、坐标轴、标签的文本内容可以换行显示，那么该如何实现呢？

默认的效果：

期望的效果：

1.2 实现思路

文本中添加换行标签<br/>，并使用HTML解析文本内容实现换行，以标题为例，如下图所示：

2.1 数据准备

新建普通报表，添加内置数据集人员分配，分别记录班级和人数，如下图所示：

2.2 插入图表

以单元格图表为例，合并一片单元格，插入柱形图，如下图所示：

2.3 绑定数据

选中图表并绑定图表数据，如下图所示：

2.4 设置换行

1）标题添加公式：'北京中关村一中初(1)班人员分配表'+'<br/>'+'(2017年)'，并选择使用HTML解析文本内容，如下图所示：

2）标签文本选择自定义，并选择使用HTML解析文本内容，如下图所示：

JavaScript 代码如下：

function(){ return this.category+'<br/>'+this.seriesName+':'+this.value;}

3）Y轴的标题添加公式： '人数'+'<br/>'+'(个)'，并选择使用HTML解析文本内容，如下图所示：

2.5 效果预览

1）PC 端

保存报表，点击分页预览，效果下图所示：

2）移动端

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

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\ColumnChart\图表内容换行显示.cpt

点击下载模板：图表内容换行显示.cpt