图表标签文字纵向排列

1.1 应用场景

当图表分类和系列过多时，图表标签文字横向显示较为拥挤，希望可以实现文字纵向显示，效果如下图所示：

2020-11-02 及之后版本的 JAR 包已支持设置标签纵向效果，详情参见 图表标签 的 2.2 节。

1.2 实现思路

使用自定义标签，然后返回的标签值中拼接 HTML 样式，最后设置使用 HTML 解析文本内容。

注：该方法不支持悬浮元素图表和决策报表内的图表。

2.1 数据准备

新建普通报表，新建数据集 ds1，数据库查询语句为：SELECT * FROM 销量

2.2 报表设计

1）单元格新增一个柱形图，如下图绑定数据：

2）图表属性面板选择样式>标签，勾选使用标签，然后编辑自定义返回值，点击使用 HTML 解析文本内容，最后设置标签位置为内侧。自定义代码如下：

function(){  
    return "<div style='width:10px;line-height:12px;white-space:normal'>"+this.value+"</div>";
}

2.3 效果预览

保存报表，点击分页预览，效果如应用场景中所示。

注：不支持移动端。

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\Chart\图表标签文字竖向排列.cpt

点击下载模板：图表标签文字竖向排列.cpt