历史版本7 :图表标签文字纵向排列 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 应用场景

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

Snag_f40226.png

1.2 实现思路

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

2. 示例编辑

2.1 数据准备

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

Snag_e14ebf.png

2.2 报表设计

1)单元格新增一个柱形图,如下图绑定数据:

Snag_e67fbe.png

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

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

Snag_f6f8b4.png

2.3 效果预览

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

注:不支持移动端。

3. 模板下载编辑

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

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