快捷導(dǎo)航

highCharts提示框中顯示當(dāng)前時(shí)間的方法

更新時(shí)間：2019年01月18日 11:38:58 作者：muzidigbig

今天小編就為大家分享一篇關(guān)于highCharts提示框中顯示當(dāng)前時(shí)間的方法，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧

一、項(xiàng)目需求提示框中需要顯示當(dāng)前時(shí)間（常規(guī)的提示并不能達(dá)到這種效果）

樣式

二、知識(shí)點(diǎn)

highCharts圖表tooltip屬性中有一個(gè)formatter屬性

formatter: function() {……} 提示框內(nèi)容格式化回調(diào)函數(shù)，返回 false 可以針對某個(gè)點(diǎn)或數(shù)據(jù)列關(guān)閉提示框，該函數(shù)里可以執(zhí)行復(fù)雜的邏輯來返回需要的內(nèi)容。

三、代碼

shared: true,//當(dāng)提示框被共享時(shí)，整個(gè)繪圖區(qū)都將捕捉鼠標(biāo)指針的移動(dòng)。提示框文本顯示有序數(shù)據(jù)（不包括餅圖，散點(diǎn)圖和標(biāo)志圖等）的系列類型將被顯示在同一個(gè)提示框中。
    formatter : function() {//提示框內(nèi)容格式化回調(diào)函數(shù)，返回 false 可以針對某個(gè)點(diǎn)或數(shù)據(jù)列關(guān)閉提示框，該函數(shù)里可以執(zhí)行復(fù)雜的邏輯來返回需要的內(nèi)容。
      var content = '';
      for (var i = 0; i < this.points.length; i++) {
        if(i == this.points.length-1){
          content += '<span style="font-size: 10px; color: ' + this.points[i].series.color + '">' + this.points[i].series.name + '</span>: ' + this.points[i].y +'℃'+'<br/>';
        }else{
          content += '<span style="font-size: 10px; color: ' + this.points[i].series.color + '">' + this.points[i].series.name + '</span>: ' + this.points[i].y +'%'+'<br/>';
        }
      };
      var date = new Date();
      var nowYear=date.getFullYear().toString();
      var nowMonth=(date.getMonth() + 1).toString();
      var nowDay=date.getDate().toString(); 
      var nowHours=date.getHours().toString(); 
      var nowMin=date.getMinutes().toString(); 
      var nowSeconds=date.getSeconds().toString(); 
      function timeAdd0(str) { 
        if(str.length<=1){ 
          str='0'+str; 
        } 
        return str 
      } 
      nowYear=timeAdd0(nowYear) ;
      nowMonth=timeAdd0(nowMonth) ;
      nowDay=timeAdd0(nowDay) ;
      nowHours=timeAdd0(nowHours) ;
      nowMin=timeAdd0(nowMin);
      nowSeconds=timeAdd0(nowSeconds)
      content = '<span>' + nowYear + '/' + nowMonth + '/' + nowDay + ' ' + nowHours + ':' + nowMin + ':' + nowSeconds + ' year' + '</span><br/>' +content;
      return content;
    },