日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

antv/g2圖表tooltip自定義并展示坐標之外的數據

作者:Zan^Z 更新時間: 2022-02-24 編程語言

首先使用itemTpl自定義tooltip

感覺Antv文檔很不詳細,寫這塊時找了好久才找到方法,現在記一下,方便今后的觀看和其他遇到此問題的同學解決辦法。

itemTpl

  this.chart.tooltip({
          showCrosshairs: true, // 展示 Tooltip 輔助線
          shared: true,
          showMarkers: false,
          containerTpl: `<div class="g2-tooltip"><p class="g2-tooltip-title"></p><ul class="g2-tooltip-list"></ul></div>`,
          itemTpl: `   
            <ul class="g2-tooltip-list">
              <li class="g2-tooltip-list-item">
               <span class="g2-tooltip-marker" style="background-color: #5e92f6;"></span>
               <span class="g2-tooltip-name">日留存</span>:<span class="g2-tooltip-value">{value}%</span>
              </li>
              <li class="g2-tooltip-list-item">
               <span class="g2-tooltip-marker" style="background-color: #53e4ca;"></span>
               <span class="g2-tooltip-name">{name}</span>:<span class="g2-tooltip-value">{number}</span>
              </li>
            </ul>
          `,
        });

效果是這樣的

在這里插入圖片描述

itemTpl主要就是看到的背景色,顏色等樣式。

tooltip展示坐標之外的數據

其實正常的劃線就是 this.chart.line().position('time*value'),time是X軸,value是Y軸。但是此時我們需要鼠標劃入時展示其他的數據,那么就如下代碼,在正常的劃線后加入 tooltip屬性,并把需要顯示的數據寫進里面就可以了

       this.chart.line().position('time*value').tooltip('time*value*name*number', (time, value, name, number) => {
          return {
            name: name,  //此處name對應itemTpl模板中name,以下兩個參數類推
            value: value,
            number: number
          }
        });
        this.chart.point().position('time*value').tooltip('time*value*name*number',function(time, value, name, number){
          return {
            name: name,
            value: value,
            number: number
          }
        });

數據格式轉化要顯示的Y軸數據應去掉雙引號

dataDealwith(){
        var data=this.chartData;
        var newData=[];
        data.forEach(function(obj){
          for (var prop in obj) {
           if (prop == "value") {
            if (obj.hasOwnProperty(prop) && obj[prop] !== null && !isNaN(obj[prop])) {
              obj[prop] = +obj[prop];
            }
           }
          }
          newData.push(obj)
        })
        return newData;
      },

原文鏈接:https://blog.csdn.net/Zan_Z/article/details/122489602

欄目分類
最近更新