1. 程式人生 > >highcharts 提示框樣式

highcharts 提示框樣式

格式化tooltip的文字的回撥函式。返回false可對資料序列上特定的點禁用tooltip。

支援一個HTML子集。tooltip的HTML元素會被解析和轉換成SVG,因此這不是完全的HTML渲染器。支援以下這些標記:<b>,<strong>,<i>,<em>,<br/>,<span>.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就可以實現對提示框的樣式修改。改後效果:
轉自:http://blog.csdn.net/d_lady/article/details/13630631