рассчитать разницу между 2 сериями во всплывающей подсказке для highstock

Мне нужна помощь, чтобы найти решение для отображения разницы между сериями во всплывающей подсказке.

Здесь ‹- простой скриншот с моей проблемой:

как я могу решить эту проблему для перехода от Гамбурга к Матифу и от Нидеррайна к Матифу?

Вот мой код javascript:

$(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();
            }
        });
    });
});

person paddibr    schedule 24.02.2015    source источник


Ответы (1)


Используйте tooltip.formatter - там у вас есть доступ к точкам (this.points[0], this.points[1] и т.д.). Просто вычислите разницу между значениями y.

Примечание. tooltip.formatter доступно только на самом высоком уровне параметров, например в API.

Демонстрация: 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;
        }
    },
person Paweł Fus    schedule 24.02.2015
comment
Спасибо за быстрый ответ! Когда я добавляю средство форматирования всплывающей подсказки, я не получил ни результатов, ни ошибок:/ - person paddibr; 24.02.2015
comment
Живая демо, пожалуйста? Трудно отладить из .. ну, ничего ;) В любом случае, убедитесь, что вы объединили tooltip.formatter с вашими фактическими tooltip параметрами. - person Paweł Fus; 24.02.2015
comment
я создам скрипку, момент, пожалуйста :) - person paddibr; 24.02.2015
comment
Итак, вот моя законченная скрипта: jsfiddle.net/bwefs1ak/2, пожалуйста, взгляните на всплывающая подсказка сейчас. Я добавил формат точек только для «Гамбургского фронтмоната». За Basis должна быть разница: ("Hamburg Frontmonat" - "Matif"). Большое спасибо !!! - person paddibr; 24.02.2015
comment
Это здорово, но, как я уже сказал, нужно использовать tooltip.formatter, а не tooltip.pointFormat ;) И не на уровне серии, а в опциях графика. - person Paweł Fus; 24.02.2015
comment
ааа, в настройках диаграммы это работает. На серийном уровне шансов нет? А можно как раз под Гамбургом Дифф отобразить? - person paddibr; 25.02.2015
comment
Хорошо, я нашел решение с пунктами if :) Спасибо за ваше время! ;) Но, может быть, у вас есть идея получше .. - person paddibr; 25.02.2015
comment
Нет, вы не можете сделать это на уровне серии. И вы можете использовать pointFormat, потому что это предотвращает все математические вычисления (просто чтобы быть на одной странице). Что ж, оператор if=else должен работать. ;) - person Paweł Fus; 25.02.2015
comment
Может ли кто-нибудь увидеть мой вопрос? stackoverflow.com/questions/39588901/ - person ; 20.09.2016
comment
@PawełFus, как бы вы сделали это для оси x внутри серии? У меня есть линейная диаграмма с двумя сериями (A и B), периодами времени по оси x и оценкой по оси y. Я хотел бы показать во всплывающей подсказке разницу между периодом 1 и периодом 2 для серии A: -5, рассчитанную с использованием this.point.x и previous.point.x (я знаю, что previous не работает). - person rvrvrv; 10.04.2020
comment
Я не совсем понимаю. Когда tooltip.shared = true, у вас есть доступ к this.points, который представляет собой массив всех точек с одинаковым значением x. Если вы хотите сравнить точку зависания с другой точкой, вам нужно найти эту вторую точку. Что-то вроде this.point.series.points[index_of_your_point] против this.point. - person Paweł Fus; 10.04.2020