1. 概述
1.1 版本
| 報表伺服器版本 |
|---|
| 11.0 |
1.2 預期效果
預期效果如下圖所示，將分類、系列以及系列值的樣式自訂為表格形式，適用於顯示單個系列的提示點。
1.3 實現思路
圖表提示內容選擇「自訂」，輸入 HTML 程式碼，選中「使用html解析正文內容」。如下圖所示：
2. 範例
2.1 準備資料
點選設計器左上角「檔案>建立普通報表」，選擇範本主題為「清爽科技」。
建立資料庫查詢 ds1 ，輸入 SQL 查詢語句：SELECT * FROM 銷量 。如下圖所示：
2.2 設計報表
2.2.1 插入圖表
先合併一片儲存格區域，再插入圖表，選擇「柱形圖」。如下圖所示：
2.2.2 綁定資料
選中圖表，點選右側屬性面板「儲存格元素>資料」，綁定資料集資料，分類選擇「地區」，系列名使用欄位值，系列名選擇「產品」，值選擇「銷量」。如下圖所示：
2.2.3 設定圖表樣式
1）設標度題
選中圖表，選擇「儲存格元素>樣式>標題」，輸入正文「各產品銷量佔比」。如下圖所示：
2）設定提示
選中圖表，選擇「儲存格元素>樣式>提示」，內容選擇「自訂」，輸入程式碼如下：
function() {
return '<h3 align="center">'
+this.category +
'</h3><table border="1" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF"><tr><td style="color:white;"> 產品 </td><td style="color:white;">'
+ this.seriesName +
'</td></tr><tr><td style="color:white;"> 銷量 </td><td style="color:white;">'
+ this.value +
'</td></tr></table>';
}
輸入程式碼之後，還需要選中「使用html解析正文內容」。如下圖所示：
2.3 效果預覽
儲存範本，點選「分頁預覽」，效果如下圖所示：
注：不支援行動端。
3. 範本下載
已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Chart\ColumnChart\提示點自訂柱形圖.cpt
點選下載範本：提示點自訂柱形圖.cpt
