Question

我有一个堆叠条形图，带有共享工具提示，我试图通过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>Total: </th>'
        +'<td style="text-align:right"><b>${???}</b></td></tr>'
        +'</tbody></table>'
}

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

Answer 1

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>Total: </th>'
            +'<td style="text-align:right"><b>'+this.points[0].total+'</b></td></tr>'
            +'</tbody></table>';
            return tooltip;
        }

http://jsfiddle.net/AeLFZ/10/

Answer 2

这是我使用footerFormat及其100％工作的方法

tooltip: {
     shared: true,
     headerFormat: '<b>Week {point.x}</b><br>',
     pointFormat: '<b>{series.name}:</b> {point.y} ( {point.percentage:.0f}% )<br>',
     footerFormat: '<b>Total:  {point.total} </b>'
},

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

2 个答案: