历史版本4 :图表标签文字纵向排列 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 概述编辑
1.1 应用场景
当图表分类和系列过多时,图表标签文字横向显示较为拥挤,希望可以实现文字纵向显示,效果如下图所示:
1.2 实现思路
使用自定义标签,然后返回的标签值中拼接 HTML 样式,最后设置使用 HTML 解析文本内容。
2. 示例编辑
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 效果预览
保存报表,点击分页预览,效果如应用场景中所示。
注:不支持移动端。
3. 模板下载编辑
已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\Chart\图表标签文字竖向排列.cpt
点击下载模板:图表标签文字竖向排列.cpt