highcharts 提示框样式

困扰我一下午的问题，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 tofalse.

使用html替换SVG效果，加上useHTML:true就可以实现对提示框的样式修改。改后效果：