困扰我一下午的问题,highcharts 提示框中的内容经过格式化以后效果都是黑白色比较难看效果如下。
看官方文档对tooltip 中formatter的说明:
formatter格式化程序 :Function
格式化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+"'>"
+ this.points[i].series.name +": </span><b>" + this.points[i].y
+ this.points[i].point.unit+"</b><br/>";
}
return result;
}
},
后来发现tooltip的useHTML属性
useHTML使用HTML :Boolean2.2
使用HTML替代SVG来渲染提示框内容。使用HTML可以在提示框中进行进一步的格式化,允许有表格和图像。这也被推荐用于rtl languages(从右到左读的语言)因为它在早期的Firefox中忙于处理rtl bugs。 Defaults to
false
.
使用html替换SVG效果,加上useHTML:true就可以实现对提示框的样式修改。改后效果: