圖表标簽文字縱向排列

1.1 應用場景

當圖表分類和系列過多時，圖表标簽文字橫向顯示較爲擁擠，希望可以實現文字縱向顯示，效果如下圖所示：

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