自訂標籤顯示為系列色

1.1 版本

1.2 問題描述

製作圖表時，當圖表標籤內容選擇「通用」或「自訂」時，下方可設定標籤「字元」的字體、大小、顏色等。

11.0.2 版本及之後的設計器中，字元選擇「自訂」時支援設定顏色為「自動」，此時若標籤在外側則預設顯示為圖表系列色，若標籤在內側預設顯示為白色。但在 11.0.2 之前的版本中，字元選擇「自訂」時僅能顯示一個顏色，那麼所有標籤都顯示為同一個顏色。如下圖所示：

那麼在 11.0.2 之前的版本中，要如何使字元顏色跟隨系列色顯示呢？

1.3 解決思路

標籤內容選擇「自訂」，透過代碼實現標籤顏色顯示為系列色，字元的其他設定透過「字元>自訂」實現。如下圖所示：

注：資料點提示也同樣適用。

2.1 準備資料

點選設計器左上角「檔案>建立普通報表」，選擇範本主題為「清爽科技」。

建立資料庫查詢 ds1，輸入 SQL 語句為：SELECT * FROM 銷量 WHERE 地區='華東'，取出銷量表中的華東地區的資料。如下圖所示：

2.2 設計報表

2.2.1 插入圖表

選中一片儲存格區域，點選上方工具欄的「合併儲存格」按鈕合併，再點選「插入圖表」按鈕，選擇「餅圖」。如下圖所示：

2.2.2 綁定資料

選中圖表，點選右側屬性面板「儲存格元素>資料」，綁定資料集資料如下圖所示：

2.2.3 設定圖表樣式

1）取消標題可見

選中圖表，選擇「儲存格元素>樣式>標題」，取消勾選「標題可見」。如下圖所示：

2）設定標籤

選中圖表，選擇「儲存格元素>樣式>標籤」，勾選「使用標籤」，值標籤內容選擇「自訂」，輸入代碼：

function(){return '<span style="color:'+this.color+';">'+this.value+'</span>';}

注：this.color 指的是當前系列的顏色。

輸入代碼後需選中「使用html解析正文內容」，更多設定如下圖所示：

3）設定提示

上述標籤中使用的代碼，在提示中同樣適用。選中圖表，選擇「儲存格元素>樣式>提示」，同樣設定自訂代碼，如下圖所示：

2.3 效果預覽

2.3.1 PC 端

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

2.3.2 行動端

App 端和 HTML5 端均支援，效果如下圖所示：

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\PieChart\自訂標籤顯示為系列色.cpt

點選下載範本：自訂標籤顯示為系列色.cpt