highcharts 提示框样式

最新推荐文章于 2023-12-01 16:24:44 发布

原创最新推荐文章于 2023-12-01 16:24:44 发布 · 3.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#highcharts #jquery #HTML #Java

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何解决Highcharts提示框样式单一的问题，通过设置useHTML属性为true，可以使用HTML来格式化提示框的内容，从而实现更丰富的样式定制。

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

看官方文档对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 = '<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就可以实现对提示框的样式修改。改后效果：