计算highstock的tooltip中的2个系列之间的差异 [英] calculate the difference between 2 series in tooltip for highstock

查看：151
本文介绍了计算highstock的tooltip中的2个系列之间的差异的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



我需要一些帮助来找到一个解决方案来显示系列在工具提示中的区别。 net / images / 150223 / dcysxgrd.jpgrel =nofollow>这里< - 是我的问题的简单截图：



我怎么能解决这个问题汉堡到Matif和Niederrhein到Matif？

这是我的javascript代码：

  $（document）.ready（function（）{
 ///////////////////////////// ///////////////// 
 // ------ Testchart Kassakurse在汉堡举行2014für2014 ------ // 
 //////////////////////////////// ////////////////////////////////// 
 $（function（）{
 var chart = new Highcharts.StockChart（{
 legend：{
 enabled：false 
}，
 chart：{
 renderTo：'basis-tool_test'，
 plotBackgroundImage：'images / background_large.png'
 }，
导出：{
按钮：{
 contextButton：{
启用：false 
}，
 printButton：{
 text：'图表ausdrucken'，
 onclick：function（）{
 this.print（）; 
} 
} 
} 
}，
 xAxis：{
类型：'datetime'，
 minTickInterval：24 * 3600 * 1000 
}，
 title：{
 text：'Raps  -  Kassakurse im Jahr 2014'，
 style：{textDecoration：bold，fontSize：20px， fontFamily：Tahoma，arial，sans-serif} 
}，
工具提示：{
 xDateFormat：'％d。 ％B％Y'，
共享：true，
 useHTML：true，
 valueDecimals：2，
 borderColor：'＃000'，
 valueSuffix：'€' 
} 
}）; 
 $ b // 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 '，
名称：'汉堡Frontmonat'，
数据：数据，
颜色：'＃7CB5EC'，
工具提示：{
启用：true，
 / * pointFormat：'< span style =color：{series.color}>●< / span> {series.name}：< b> {point.y}< / b>< b / b基础：< / b>< br>'* / 
格式化程序：function（）{
 return'< b>'+ this.point.name + '< / b> ;:'+ this.point.y +'BÄÄÄÄÄM'; 
} 
}，
 myData：'firstPoint'，
 myOtherData：'其他第一个数据'
}，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）; 
}）; 
 $ b / *图例* / 
 
 //按钮
 $（'＃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.s how（）; 
} 
} 
}）; 
 
 $（'＃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 {
 ser ies.show（）; 
} 
} 
}）; $（b）
 $ //选择
 $（＃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（）; 
} 
}）; $（$＃
 $ b $（＃list2）。on（'change'，function（）{
 var chart = $（'＃basis-tool_test'）。highcharts（）; $ b $如果（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'）; 
斯里es.hide（）; 
 series = chart.get（'id_nrfm1'）; 
 series.hide（）; 
 series = chart.get（'id_nrfm2'）; 
 series.show（）; 
} 
}）; 
}）; 
}）;


解决方案使用 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 />值：'+ this.y; 
}）; 
 
 s + ='< br> Diff：'+（this.points [0] .y  -  this.points [1] .y）; 
 
 return s; 
} 
}，


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

解决方案

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

这篇关于计算highstock的tooltip中的2个系列之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆