Highcharts - 將字符串返回到懸停時的其他容器

Question

我需要在懸停時向其他div上顯示多個系列數據，並在未懸停時顯示其系列總值。這是一個很好的例子，但仍需要顯示http://jsfiddle.net/RfnUk/。

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

現在，我想這個數據顯示到div與左 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 
}, 

這裏是它的工作樣本

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

這裏是完整的小提琴 http://jsfiddle.net/RfnUk/9/

你的2系列總數是一樣的，所以我編輯的最後一點第二個系列的你不認爲這是一個錯誤

，只顯示左側部分，當你懸停在您默認隱藏，顯示它的提示事件，並隱藏在mouseOut事件，像這樣

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

這裏充分小提琴的最後http://jsfiddle.net/RfnUk/10/