highcharts 提示框樣式
阿新 • • 發佈:2019-01-25
格式化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