calculate the difference between 2 series in toolt

问题:

I need some help to find a solution to display the difference between the series in the tooltip.

Here <- is a simple screenshot with my problem:

how can i solve this for Hamburg to Matif and Niederrhein to Matif?

Here is my javascript code:

$(document).ready(function() {
    //////////////////////////////////////////////////////////////////
    // ------ Testchart Kassakurse Raps in Hamburg für 2014  ------ //
    //////////////////////////////////////////////////////////////////
    $(function() {
        var chart = new Highcharts.StockChart({
            legend: {
                enabled: false   
            },
            chart: {
                renderTo: 'basis-tool_test',
                plotBackgroundImage: 'images/background_large.png'
            },
            exporting: {
                buttons: {
                    contextButton: {
                        enabled: false
                    },
                    printButton: {
                        text: 'Chart ausdrucken',
                        onclick: function () {
                            this.print();
                        }
                    }
                }
            },
            xAxis: {
                type: 'datetime',
                minTickInterval: 24 * 3600 * 1000
            },
            title : {
                text : 'Raps - Kassakurse im Jahr 2014',
                style : { "textDecoration": "bold", "fontSize": "20px", "fontFamily": "Tahoma, arial, sans-serif" }
            },
            tooltip: {
                xDateFormat: '%d. %B %Y',
                shared: true,
                useHTML: true,
                valueDecimals: 2,
                borderColor: '#000',
                valueSuffix: ' €'
            }
        });

        // Matif Daten
        $.getJSON('scripts/charts/data_arrays/testchart_matifraps_data.js', function(data){
            chart.addSeries({
                id: 'id_matif',
                name: 'Matif Raps',
                data: data,
                color: '#F7A35C'
            }, true);
        });
        // Hamburg Daten
        $.getJSON('scripts/charts/data_arrays/testchart_hamburgfrontmonat_data.js', function(data){
            chart.addSeries({
                id: 'id_hhfm',
                name: 'Hamburg Frontmonat',
                data: data,
                color: '#7CB5EC',
                tooltip: {
                    enabled: true,
                    /* pointFormat:'<span style="color:{series.color}">● </span> {series.name}: <b>{point.y}</b><br/><b>Basis: </b><br>' */
            formatter: function() {
                return '<b>'+ this.point.name +'</b>: '+ this.point.y + 'BÄÄÄÄM' ;
            }
                },
                myData: 'firstPoint',
                myOtherData: 'Other first data'
            }, true);
        });
        $.getJSON('scripts/charts/data_arrays/testchart_hamburgfrontmonatplus1_data.js', function(data){
            chart.addSeries({
                id: 'id_hhfm1',
                name: 'Hamburg Frontmonat +1',
                data: data,
                color: '#7CB5EC',
                visible: false
            }, true);
        });
        $.getJSON('scripts/charts/data_arrays/testchart_hamburgfrontmonatplus2_data.js', function(data){
            chart.addSeries({
                id: 'id_hhfm2',
                name: 'Hamburg Frontmonat +2',
                data: data,
                color: '#7CB5EC',
                visible: false
            }, true);
        });

        // Niederrhein Daten
        $.getJSON('scripts/charts/data_arrays/testchart_niederrheinfrontmonat_data.js', function(data){
            chart.addSeries({
                id: 'id_nrfm',
                name: 'Niederrhein Frontmonat',
                data: data,
                color: '#434348'
            }, true);
        });
        $.getJSON('scripts/charts/data_arrays/testchart_niederrheinfrontmonatplus1_data.js', function(data){
            chart.addSeries({
                id: 'id_nrfm1',
                name: 'Niederrhein Frontmonat +1',
                data: data,
                color: '#434348',
                visible: false
            }, true);
        });
        $.getJSON('scripts/charts/data_arrays/testchart_niederrheinfrontmonatplus2_data.js', function(data){
            chart.addSeries({
                id: 'id_nrfm2',
                name: 'Niederrhein Frontmonat +2',
                data: data,
                color: '#434348',
                visible: false
            }, true);
        });

        /* Legend */

        // Buttons
        $('#button_matif').click(function() {
            var chart = $('#basis-tool_test').highcharts();         
            series = chart.get('id_matif');

            if(series.visible) {
                series.hide();
            } else {
                series.show();
            }
        });

        $('#button_hamburg').click(function() {
            var chart = $('#basis-tool_test').highcharts();
            var selVal = $("#list").val();

            if(selVal == "a") {
                series = chart.get('id_hhfm');
                if(series.visible) {
                    series.hide();
                } else {
                    series.show();
                }
            }
            if(selVal == "b") {
                series = chart.get('id_hhfm1');
                if(series.visible) {
                    series.hide();
                } else {
                    series.show();
                }
            }
            if(selVal == "c") {
                series = chart.get('id_hhfm2');
                if(series.visible) {
                    series.hide();
                } else {
                    series.show();
                }
            }
        });

        $('#button_niederrhein').click(function() {
            var chart = $('#basis-tool_test').highcharts();
            var selVal = $("#list2").val();

            if(selVal == "d") {
                series = chart.get('id_nrfm');
                if(series.visible) {
                    series.hide();
                } else {
                    series.show();
                }
            }
            if(selVal == "e") {
                series = chart.get('id_nrfm1');
                if(series.visible) {
                    series.hide();
                } else {
                    series.show();
                }
            }
            if(selVal == "f") {
                series = chart.get('id_nrfm2');
                if(series.visible) {
                    series.hide();
                } else {
                    series.show();
                }
            }
        });

        // Selects
        $("#list").on('change', function(){
            var chart = $('#basis-tool_test').highcharts();
            var selVal = $("#list").val();

            if(selVal == "a" || selVal == '') {
                series = chart.get('id_hhfm');
                series.show();
                series = chart.get('id_hhfm1');
                series.hide();
                series = chart.get('id_hhfm2');
                series.hide();
            }
            else if(selVal == "b") {
                series = chart.get('id_hhfm');
                series.hide();
                series = chart.get('id_hhfm1');
                series.show();
                series = chart.get('id_hhfm2');
                series.hide();
            }
            else if(selVal == "c") {
                series = chart.get('id_hhfm');
                series.hide();
                series = chart.get('id_hhfm1');
                series.hide();
                series = chart.get('id_hhfm2');
                series.show();
            }
        });

        $("#list2").on('change', function(){
            var chart = $('#basis-tool_test').highcharts();
            var selVal = $("#list2").val();

            if(selVal == "d" || selVal == '') {
                series = chart.get('id_nrfm');
                series.show();
                series = chart.get('id_nrfm1');
                series.hide();
                series = chart.get('id_nrfm2');
                series.hide();
            }
            else if(selVal == "e") {
                series = chart.get('id_nrfm');
                series.hide();
                series = chart.get('id_nrfm1');
                series.show();
                series = chart.get('id_nrfm2');
                series.hide();
            }
            else if(selVal == "f") {
                series = chart.get('id_nrfm');
                series.hide();
                series = chart.get('id_nrfm1');
                series.hide();
                series = chart.get('id_nrfm2');
                series.show();
            }
        });
    });
});

回答1:

Use tooltip.formatter - you have there access to the points (this.points[0], this.points[1] etc.). Just calculate different between y-values.

Note: tooltip.formatter is available only on the highest level of options, like in the API.

Demo: http://jsfiddle.net/bwefs1ak/

    tooltip: {
        formatter: function () {
            var s = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>';

            $.each(this.points, function () {
                s += '<br/>Value: ' + this.y;
            });

            s+= '<br>Diff: ' + ( this.points[0].y - this.points[1].y );

            return s;
        }
    },