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
},

この参照を確認してください