如何使用工具提示格式化程序并仍显示图表颜色（默认情况下）？

如果我使用默认的Highcharts工具提示，它会显示一个圆圈图表数据的颜色（ http://jsfiddle.net/WOUNDEDStevenJones/mpMvk/1/上的浅蓝/黑色圆圈）：

但是，如果您在工具提示（ http://jsfiddle.net/WOUNDEDStevenJones/4vd7J/ ）上使用自定义格式，则不会显示颜色：

如何在自定义格式化工具提示中获取/使用该颜色？ 据我所知，他们的文档中没有任何内容（ http://api.highcharts.com/highcharts#tooltip.formatter ）解释如何在自定义格式化工具提示中使用它。

这默认显示工具提示中的数据颜色：

tooltip: { shared: true } 

但这不是：

 tooltip: { formatter: function() { var s = ''+ this.x +''; $.each(this.points, function(i, point) { s += '
'+ point.series.name +': '+ point.y +'m'; }); return s; }, shared: true }, 

Answer 1

我找到了这个文档（ http://api.highcharts.com/highcharts#tooltip.pointFormat ）。 他们使用的HTML位于pointFormat下，而不是formatter：

 \u25CF {series.name}: {point.y}
 

以下是用于在工具提示中获取彩色圆圈的更新代码：

 tooltip: { formatter: function() { var s = ''+ this.x +''; $.each(this.points, function(i, point) { s += '
\u25CF: ' + point.series.name + ': ' + point.y; }); return s; }, shared: true }, 

Answer 2

改进WOUNDEDStevenJones的答案，但使用非jQuery特定的解决方案：

要在pointFormat（ http://api.highcharts.com/highcharts#tooltip.pointFormat ）中模仿以下HTML：

 \u25CF 

我为工具提示格式化函数创建了这个非jQuery依赖代码：

 formatter: function() { /* Build the 'header'. Note that you can wrap this.x in something * like Highcharts.dateFormat('%A, %b %e, %H:%M:%S', this.x) * if you are dealing with a time series to display a more * prettily-formatted date value. */ var s = '' + this.x + '
'; for ( var i = 0; i < this.points.length; i++ ) { var myPoint = this.points[i]; s += '
\u25CF' + myPoint.series.name + ': '; /* Need to check whether or not we are dealing with an * area range plot and display a range if we are */ if ( myPoint.point.low && myPoint.point.high ) { s += myPoint.point.low + ' - ' + myPoint.point.high; } else { s += myPoint.y; } } return s; }, shared: true 

Answer 3

如果您希望工具提示的主要部分看起来相同，并且只是要以不同方式格式化的x值，则可以使用headerFormat属性而使用point.key而不是this.x. 这将完成同样的事情，而不必重现系列体。

 tooltip: { headerFormat: '{point.key}
' } 

Answer 4

你可以使用：

 > $.each(this.points, function () { > s += '
\u25CF' + this.series.name + ': ' + '' + this.y + ''; > });