ハイチャート - ホバー上の他のコンテナに文字列を返す

Question

ホバー上の他のdivに複数のシリーズデータを表示し、ホバリングされていないときはシリーズの合計値を表示する必要があります。ここでは良い例ですが、上記のようにシリーズ合計を表示する必要があります。http://jsfiddle.net/RfnUk/が IDここで

tooltip: { 
    crosshairs: true, 
    formatter: function() { 
     var s = '<b>'+ this.x +'</b>'; 

     $.each(this.points, function(i, point) { 
      s += '<br/>'+ point.series.name +': '+ 
       point.y +'m'; 
     }); 
     $("#left").html(s); 
     return false; 
    }, 
    shared: true 
}, 

を残して

<div id="left" style="float:left; width: 200px; min-height: 10px;"></div> 
<div id="container" style="height: 400px; float: left;"></div> 

は今、私はその作業のサンプルのdivにこのデータを表示するようにされたい

$(function() { 
 
    $('#container').highcharts({ 
 

 
    chart: {}, 
 

 
    xAxis: { 
 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 
 
     'Aug', 'Sep', 'Oct', 'Nov', 'Dec' 
 
     ] 
 
    }, 
 

 
    tooltip: { 
 
     crosshairs: true, 
 
     formatter: function() { 
 
     var s = '<b>' + this.x + '</b>'; 
 

 
     $.each(this.points, function(i, point) { 
 
      s += '<br/>' + point.series.name + ': ' + 
 
      point.y + 'm'; 
 
     }); 
 
     $("#left").html(s); 
 
     return false; 
 
     }, 
 
     shared: true 
 
    }, 
 

 
    series: [{ 
 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
 
     }, 
 
     { 
 
     data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5] 
 
     } 
 
    ] 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<div id="left" style="float:left; width: 200px; min-height: 10px;"></div> 
 
<div id="container" style="height: 400px; float: left;"></div>

Answer 1

あなたは、一連のデータをループチャートがレンダリングされ、ここで

var series = $("#container").highcharts().series; 
for (var i in series){ 
    var total = 0; 
    for (var j in series[i].data){ 
    total += series[i].data[j].y 
    } 
    $("#left-total").append("<label>" + series[i].name + "=" + total + "</label><br/>"); 
} 

を計算されることができた後は、完全なフィドル2シリーズの http://jsfiddle.net/RfnUk/9/

あなたの合計が同じだったので、私は最後のポイントを編集しています第二シリーズのあなたはそれはあなたがデフォルトでそれを隠す置くときにのみ、ツールチップのイベントでそれを表示し、そう

ようmouseOutイベントにそれを隠す左部分を表示するには、エラー

だとは思いませんここ

plotOptions: { 
     line: { 
      point: { 
       events: { 
        mouseOut: function() { 
         $("#left-total").hide(); 
         $("#left").hide(); 
        } 
       } 
      } 
     } 
    }, 

フルフィドル最後のhttp://jsfiddle.net/RfnUk/10/