jquery – 如何使用工具提示格式化程序并仍然显示图表颜色(如默认情况下)?

前端之家收集整理的这篇文章主要介绍了jquery – 如何使用工具提示格式化程序并仍然显示图表颜色(如默认情况下)?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果我使用默认的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 = '<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}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>

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

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

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

        return s;
    },

猜你在找的jQuery相关文章