自訂提示點樣式

1.1 版本

1.2 預期效果

預期效果如下圖所示，將分類、系列以及系列值的樣式自訂為表格形式，適用於顯示單個系列的提示點。

1.3 實現思路

圖表提示內容選擇「自訂」，輸入 HTML 程式碼，選中「使用html解析正文內容」。如下圖所示：

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 效果預覽

儲存範本，點選「分頁預覽」，效果如下圖所示：

注：不支援行動端。

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\Chart\ColumnChart\提示點自訂柱形圖.cpt

點選下載範本：提示點自訂柱形圖.cpt