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

二、知識(shí)點(diǎn)
highCharts圖表tooltip屬性中有一個(gè)formatter屬性
formatter: function() {……} 提示框內(nèi)容格式化回調(diào)函數(shù),返回 false 可以針對(duì)某個(gè)點(diǎn)或數(shù)據(jù)列關(guān)閉提示框,該函數(shù)里可以執(zhí)行復(fù)雜的邏輯來(lái)返回需要的內(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 可以針對(duì)某個(gè)點(diǎn)或數(shù)據(jù)列關(guān)閉提示框,該函數(shù)里可以執(zhí)行復(fù)雜的邏輯來(lái)返回需要的內(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; },
四、效果

若有不足請(qǐng)多多指教!希望給您帶來(lái)幫助!
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)武林網(wǎng)的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注