1. 程式人生 > 其它 >關於G2的tooltip自定義展示欄位的配置

關於G2的tooltip自定義展示欄位的配置

技術標籤:視覺化圖表大資料資料視覺化

G2的tooltip設定自定義展示欄位

  • 這個問題在做視覺化大屏展示的時候,也是最頭大的一個問題,如果不去設定的話,就是直接展示當前資料的欄位名,所以有些使用者看到的話,並不太清楚具體代表什麼意思。

廢話已說,直接上程式碼!

chart.interval().tooltip("label*doneNums", (x, a) => {
          return {
            name: "次數", // 可自定義顯示 預設為傳入的值
            value: a, // 這裡也可以通過呼叫其他自定義函式的方式,去對資料進行更深層次的變換
}; });
  1. 沒有設定之前的效果:
    (這個在官網直接直接截的效果圖,我專案中需要改的都已經改過了)
    在這裡插入圖片描述
  2. 自定義之後的效果:
    在這裡插入圖片描述
    注意:引數的設定x,a分別是你需要的欄位名!

另外種方法:scale()

chart.scale()在這個裡邊進行接口裡邊傳過來的欄位進行處理,但是在專案中在有些圖表會沒有效果,所以用的不多。

結束語:

希望對大家有所幫助,加油!