highcharts 提示框樣式

原創

Asher

2020-02-22 01:27

highcharts 提示框中的內容經過格式化以後效果都是黑白色比較難看效果如下。

看官方文檔對tooltip 中formatter的說明：

formatter格式化程序 :Function

格式化tooltip的文本的回調函數。返回false可對數據序列上特定的點禁用tooltip。

支持一個HTML子集。tooltip的HTML元素會被解析和轉換成SVG，因此這不是完全的HTML渲染器。支持以下這些標記：,,,, ,.Spans標記可以用style屬性來設定樣式，但是隻有和SVG共享的與文本相關的CSS會被處理。

從 version 2.1開始，tooltip（提示框）可通過shared選項被多個數據序列共享。格式化程序中的可用數據根據tooltip是否被共享而有些不同。在被共享的tooltip中,除了x這個所有數據節點通用的屬性之外的所有屬性，都被保存在一個數組this.points中。

說明其中是支持html標籤，和style屬性，但是不論怎麼加樣式都沒效果。

tooltip: {
 crosshairs: true,
 shared: true,
 formatter: function () {  
     var result = '<b>'+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x)+'</b><br/>' ;
     for(var i=0;i<this.points.length;i++){
	result += "<span style='color:"+ this.points[i].series.color+"'>" 
	<span style="white-space:pre">	</span>+ this.points[i].series.name +":  </span><b>" + this.points[i].y 
	<span style="white-space:pre">	</span>+ this.points[i].point.unit+"</b><br/>";
     }
     return  result; 
 }
},

後來發現tooltip的useHTML屬性

useHTML使用HTML :Boolean2.2

使用HTML替代SVG來渲染提示框內容。使用HTML可以在提示框中進行進一步的格式化，允許有表格和圖像。這也被推薦用於rtl languages（從右到左讀的語言）因爲它在早期的Firefox中忙於處理rtl bugs。 Defaults tofalse.

使用html替換SVG效果，加上useHTML:true就可以實現對提示框的樣式修改。改後效果：