ハイチャート - 複数の列の縦棒グラフの列の上に共有ツールチップを配置する方法は？

Question

複数のシリーズの縦棒グラフにhighcharts.jsを使用しています。列のグループの上部に共有ツールチップを表示したい（これは最も高い列の長さになるはずです） これまで、このhttps：JSFiddleを試しました。

$(function() { 
 

 
    chart = new Highcharts.Chart({ 
 
    chart: { 
 
     renderTo: 'container', 
 
     type: 'column', 
 
     plotBorderColor: '#CDCDCD', 
 
     plotBorderWidth: 1, 
 
    }, 
 
    xAxis: { 
 
     type: "category" 
 
    }, 
 
    yAxis: { 
 
     endOnTick: true, 
 
     startOnTick: true, 
 
     tickInterval: null, 
 
    }, 
 
    tooltip: { 
 
     useHTML: true, 
 
     borderRadius: 0, 
 
     borderWidth: 0, 
 
     shadow: false, 
 
     followPointer: false, 
 
     hideDelay: 0, 
 
     shared: true, 
 
     enabled: true, 
 
     backgroundColor: "none", 
 
     positioner: function(labelWidth, labelHeight, point) { 
 
     var tooltipX, tooltipY; 
 
     var chart = this.chart; 
 
     tooltipX = point.plotX + chart.plotLeft - 20; 
 
     if (point.negative) 
 
      tooltipY = point.plotY + chart.plotTop + 20; 
 
     else 
 
      tooltipY = point.plotY + chart.plotTop - 30; 
 
     return { 
 
      x: tooltipX, 
 
      y: tooltipY 
 
     }; 
 
     }, 
 
     formatter: function() { 
 

 
     var templateHtmlString = ""; 
 
     templateHtmlString += '<div class ="ttContainer">'; 
 
     $.each(this.points, function(index, item) { 
 
      templateHtmlString += '<div class = "ttItem">'; 
 
      templateHtmlString += item.y; 
 
      templateHtmlString += '</div>'; 
 
     }); 
 
     templateHtmlString += '</div>'; 
 

 
     return templateHtmlString; 
 
     } 
 
    }, 
 
    series: [{ 
 
     "color": "red", 
 
     "data": [5,-1,17,9,8,19,-2,8,10], 
 
     "name": "ABCD" 
 
    }, { 
 
     "color": "Green", 
 
     "data": [8, -7,2,11,28,14,-3,8,-1], 
 
     "name": "XYZ" 
 
    }] 
 
    }); 
 
});

.ttItem { 
 
    display: inline-block; 
 
    padding: 5px; 
 
}

<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div id="container" style="height: 400px"></div>

が、第2のカラムの高さは、最初の列よりも大きいときには動作しません。この問題を解決する方法を提案してください。

Answer 1

最後に、解決策を自分で見つけました。私はJSFiddleを更新しました。 tooltip.positioner関数を変更して、ツールチップの位置を設定しました。

  positioner: function(labelWidth, labelHeight, point) { 
      var tooltipX, tooltipY; 
      var chart = this.chart; 
      var hoverPoints = this.chart.hoverPoints; 
      var y = 0; 
      var x = 0; 
      var totalColumnWidth = 0; 
      var deltaX = 0; 

this.charts.hoverPointsはhoverpointsアレイ内の各ポイント・オブジェクトを介して複数の直列chart.Iループの場合に推移している点オブジェクトの配列を含んでいます。私のようにXを設定して、各列/点の幅

- 起動xは各列/点の座標

pointWidth - yは各列/ポイントの値

BARX座標

plotY-最初の点の開始点、yの値はすべての点の中で最も小さい値です（最小のプロットYは最も高い列を意味します）

  $.each(hoverPoints, function(index, hPoint) { 
      var plotY = Math.ceil(hPoint.plotY); 
      if (index === 0) { 
       x = Math.ceil(hPoint.barX); 
       y = plotY; 
      } 
      totalColumnWidth += Math.ceil(hPoint.pointWidth); 
      if ((plotY > y && point.negative) || (plotY < y && !point.negative)) { 
       y = plotY; 
      } 
      }); 

     delta = (totalColumnWidth - labelWidth)/2 

デルタ変数彼はツールチップ。
tooltipX = x + chart.plotLeft + delta;

カラムが正の軸上にある場合は、labelヒントを追加して、ツールチップがカラム上でオーバーラップしないようにします。

Answer 2

また、y軸の高さの合計を求め、それをhoverPointsのtooltipPosの点と比較することができます。

$('#div_id').find('.highcharts-container').find('.highcharts-root').find('.highcharts-plot-background').attr('height')); 

このようにして、各ツールチップを適切に配置することができます。