tooltip - 工具提示中的高图表总数

Question

我正在使用此代码显示共享工具提示：

tooltip: {
    crosshairs: true,
    shared: true,
    headerFormat: 'KW {point.key}<table>',
    pointFormat: '<tr><td style=\"color: {series.color}\">{series.name}: <b></td><td>{point.y} USD</b></td></tr>',
    useHTML: true,
    footerFormat: '</table>',
    valueDecimals: 2
},

现在我喜欢将所有 point.y 值添加为该点的总值。但是我如何循环每个系列的 point.y 来计算总值？

Answer 1

Excatly，见例子：http: //jsfiddle.net/65bpvudh/7/

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

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

        s += '<br/>Sum: '+sum

        return s;
    },
    shared: true
},

Answer 2

使用footerFormat属性（从 2.2 版开始）{point.total}可以轻松显示总数，而无需重新定义完整的formatter函数：

tooltip: {
    footerFormat: 'Sum: <b>{point.total}</b>',
    shared: true,
},

Answer 3

更简单，使用点的总属性：

tooltip: {
    formatter: function() {
        var s = '<b>'+ this.x +'</b>';
        $.each(this.points, function(i, point) {
            s += '<br/>'+ point.series.name +': '+ point.y;
        });
        s += '<br/>Total: '+ this.points[0].total
        return s;
    },
    shared: true
},

检查此参考