計算2個系列在工具提示中的差異

Question

我需要一些幫助來找到一個解決方案來顯示工具提示中的系列之間的差異。

Here < - 是一個簡單的截圖與我的問題：

我怎樣才能解決這個漢堡以MATIF和萊茵到MATIF？

這裏是我的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(); 
      } 
     }); 
    }); 
}); 

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