highcharts 提示框样式

困扰我一下午的问题,highcharts 提示框中的内容经过格式化以后效果都是黑白色比较难看效果如下。

highcharts 提示框样式_第1张图片

看官方文档对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 = ''+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x)+'
' ; for(var i=0;i" + this.points[i].series.name +": " + this.points[i].y + this.points[i].point.unit+"
"; } return result; } },

后来发现tooltip的useHTML属性

useHTML使用HTML :Boolean2.2

使用HTML替代SVG来渲染提示框内容。使用HTML可以在提示框中进行进一步的格式化,允许有表格和图像。这也被推荐用于rtl languages(从右到左读的语言)因为它在早期的Firefox中忙于处理rtl bugs。 Defaults tofalse.
使用html替换SVG效果,加上useHTML:true就可以实现对提示框的样式修改。改后效果:

highcharts 提示框样式_第2张图片



你可能感兴趣的:(jquery)