反饋已提交

網絡繁忙

圖表自訂標題/標籤/提示

1. 概述

1.1 應用場景

設計圖表時,圖表標題、標籤、提示等均可以使用程式碼進行自訂,可以使用 JS 自訂其顯示內容,或者使用 HTML 程式碼自訂內容樣式等。

例如:圖表標題直接輸入 HTML 程式碼 <font color='#00AEFF'>▍</font> 產品銷量 ,再選中「使用html解析文字內容」。

注:程式碼中的 ▍是來自於搜狗輸入法中的特殊符號 。

預覽效果如下圖所示:

1.2 功能簡介

1)圖表中的標題、標籤、坐標軸軸標籤、資料點提示均支援使用自訂程式碼設定。

2)圖表標題不支援使用 JS 程式碼;輸入 HTML 程式碼時,不能使用公式,直接在文字框編輯即可。

3)使用 HTML 程式碼需選中「使用html解析文字內容」。

4)使用 HTML 程式碼後,圖表匯出時限制如下:

  • 僅支援標籤:<b>、<strong>、<i>、<em>、<br/>、<span>

  • 僅對<span>支援列內樣式

  • 僅支援列內樣式:font-size、font-family、font-style、font-weight、colorfont-weight設定粗體時,僅支援bold,不支援bolder

  • 匯出的 HTML 文字僅支援水平顯示,不支援旋轉

  • 不支援標籤的巢狀格式,例如:<span>父節點<span>子節點</span></span>

2. 範例索引

文檔連結
應用場景效果圖

自訂標籤為圖片

自訂提示為圖片

圖表標籤/提示自訂 HTML 程式碼實現將圖片作為標籤,跟隨圖形顯示
自訂標籤求佔比圖表標籤自訂 JS 程式碼,在程式碼中進行計算,並引用公式改變數值格式,實現單個系列多個分類的圖表正確顯示各分類的佔比

自訂標籤為系列和

自訂提示顯示系列和

圖表標籤/提示自訂 JS 程式碼,實現堆積柱形圖顯示系列匯總值
自訂標籤顯示為系列色餅圖示籤自訂 HTML 程式碼,實現標籤跟隨系列色顯示
自訂提示點樣式圖表提示自訂 HTML 程式碼,實現不一樣的提示點樣式
提示點獲取資料集資料圖表提示自訂 JS+HTML 程式碼,實現提示點獲取資料集資料,並實現增減三角標效果
提示點獲取儲存格資料圖表提示自訂 JS 程式碼,實現獲取儲存格資料進行展示
資料點提示顯示所有系列圖表提示自訂 JS+HTML 程式碼,實現顯示所有系列且每個系列單位不同
分類坐標軸顯示數值指標圖表坐標軸自訂 JS 程式碼,實現分類軸顯示數值指標

3. 常用 HTML 寫法

此處給出一些 HTML 文字解析的常用寫法,方便使用者參考。

分類範例
單個標籤的單列顯示效果<span style="color:blue;">建立圖表標題</span>
<b>建立圖表標題</b>
<i>建立圖表標題</i>
<span style="font-size:16px; font-family:Verdana; font-style:italic; font-weight:bold; color: #00f;">建立圖表標題</span>
單個標籤的換列顯示效果<span style="color:blue;">建立<br>圖表標題</span>
<span style="color:blue;">建立<br>圖表<br>標題</span>
<em>建立圖<br>表標題</em>
多個標籤單列顯示<b>建立</b><i>圖表</i>
<b>建立</b><i>圖表</i><em>標題</em>
<span style="color:blue;">建立</span><i>圖表</i><em>標題</em>
多個標籤換列顯示<b>建立<br>圖表</b><br>
<b>建立<br>圖表</b><br><em>標題</em>
<b>建立</b><i>圖表</i><br><em>標題</em>


附件列表


主題: 圖表應用
已經是第一篇
已經是最後一篇
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉

獲取幫助
線上支援
獲取專業技術支援,快速幫助您解決問題
工作日9:00-12:00,13:30-17:30在线
頁面反饋
針對當前網頁的建議、問題反饋
售前咨詢
業務咨詢
電話:0933-790886或 0989-092892
郵箱:taiwan@fanruan.com
頁面反饋
*問題分類
不能為空
問題描述
0/1000
不能為空

反馈已提交

网络繁忙