如何使用工具提示格式化程序并仍然显示图表颜色（如默认情况下那样）？ [英] How to use the tooltip formatter and still display chart color (like it does by default)?

问题描述

如果我使用默认的Highcharts工具提示，它将显示图表数据颜色的圆圈（

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

< img src =https://i.stack.imgur.com/uPNBg.jpgalt =自定义的工具提示无点>

如何做您在自定义格式的工具提示中使用该颜色？从我可以告诉的是，他们的文档中没有任何内容（ http://api.highcharts.com/highcharts#tooltip.formatter ）解释如何在自定义格式的工具提示中使用它。

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

 工具提示：{
 shared：true 
} 
  

但是这不是：

 工具提示：{
 formatter：function（） {
 var s ='< b> + this.x +'< / b>'; 
 
 $ .each（this.points，function（i，point）{
s + ='< br />'+ point.series.name +'：'+ 
 point.y +'m'; 
}）; 
 
 return s; 
}，
 shared：true 
}，
  

解决方案

我找到了这方面的文档（ http：//api.highcharts。 COM / highcharts＃tooltip.pointFormat ）。他们使用的HTML位于pointFormat而不是格式化程序中：

 < span style =color：{point.color }> \\\●< /跨度> {series.name}：< b> {point.y}< / b>< br /> 
  

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

 工具提示：{
 formatter：function（）{
 var s ='< b>'+ this.x +' < / b个'; 
 
 $ .each（this.points，function（i，point）{
s + ='< br />< span style =color：'+ point.color + '> \\\●< / span>：'+ point.series.name +'：'+ point.y; 
}）; 
 
 return s; 
}，
共享：true 
}，
  

If I'm using the default Highcharts tooltip, it displays a circle the color of the chart data (the light/dark blue circles at http://jsfiddle.net/WOUNDEDStevenJones/mpMvk/1/):

But if you use custom formatting on the tooltip (http://jsfiddle.net/WOUNDEDStevenJones/4vd7J/), the colors don't appear:

How do you get/use that color in a custom formatted tooltip? From what I can tell, there's nothing in their documentation (http://api.highcharts.com/highcharts#tooltip.formatter) explaining how to use this in a custom formatted tooltip.

This displays the data colors in the tooltip by default:

tooltip: {
    shared: true
}

But this does not:

tooltip: {
    formatter: function() {
        var s = '<b>'+ this.x +'</b>';

        $.each(this.points, function(i, point) {
            s += '<br/>'+ point.series.name +': '+
                    point.y +'m';
        });

        return s;
    },
    shared: true
},

解决方案

I found the documentation for this (http://api.highcharts.com/highcharts#tooltip.pointFormat). The HTML they're using is located under pointFormat, not formatter:

<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>

Here's the updated code to use to get the colored circles in the tooltip:

tooltip: {
    formatter: function() {
        var s = '<b>'+ this.x +'</b>';

        $.each(this.points, function(i, point) {
            s += '<br/><span style="color:' + point.color + '">\u25CF</span>: ' + point.series.name + ': ' + point.y;
        });

        return s;
    },
    shared: true
},

这篇关于如何使用工具提示格式化程序并仍然显示图表颜色（如默认情况下那样）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！