上一篇: javascript – 在angular-ui-rou... 下一篇:javascript – Ionic 3中的环境特...

javascript – Highcharts：通过footerFormat属性在共享工具提示中显示堆栈总数

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – Highcharts：通过footerFormat属性在共享工具提示中显示堆栈总数，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有一个堆叠条形图,带有共享工具提示,我试图通过footerFormat属性将堆栈总数拉入工具提示.

我认为这将是一个我可以访问的简单属性,但我没有找到适合它的选项.

我错过了一些明显的东西,还是我必须以更复杂的方式做到这一点？

(如果我错过了这个问题的副本,请告诉我,我无法找到我想要讨论的具体情况)

码：

tooltip : {
    shared          : true,useHTML         : true,headerFormat    : 
         '<table class="tip"><caption>Group {point.key}</caption>'
        +'<tbody>',pointFormat     : 
         '<tr><th style="color: {series.color}">{series.namE}: </th>'
        +'<td style="text-align: right">${point.y}</td></tr>',footerFormat    : 
         '<tr><th>@R_152_10586@l: </th>'
        +'<td style="text-align:right"><b>${???}</b></td></tr>'
        +'</tbody></table>'
}

>小提琴：http://jsfiddle.net/jlbriggs/AeLFZ/

解决方法

footerFormat无法访问${point}.见 footerFormat documentation.

如果你想使用shared：true来获得每个点的表,你需要使用格式化函数,如下所示：

formatter: function() {
            var tooltip='<table class="tip"><caption>Group '+this.x+'</caption><tbody>';
            //loop each point in this.points
            $.each(this.points,function(i,point){
                tooltip+='<tr><th style="color: '+point.series.color+'">'+point.series.name+': </th>'
                      + '<td style="text-align: right">'+point.y+'</td></tr>'
            });
            tooltip+='<tr><th>@R_152_10586@l: </th>'
            +'<td style="text-align:right"><b>'+this.points[0].@R_152_10586@l+'</b></td></tr>'
            +'</tbody></table>';
            return tooltip;
        }