如何在多个系列柱状图的列顶部对齐共享工具提示

Highcharts-How to align shared tooltip on the top of column in multiple series column chart?

本文关键字：顶部 对齐 工具提示 共享 个系列      更新时间：2023-09-26

我使用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>

，但当第二列的高度大于第一列时，它不起作用。请建议如何解决这个问题。

最后，我自己想出了解决办法。我已经更新了JSFiddle。我已经修改了工具提示。定位器功能，用于设置工具提示位置。

         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包含多个序列图中被悬停的点对象数组。我循环遍历悬浮点数组中的每个点对象。

plotY-各列/点的y坐标值

barX -每个列/点的起始x坐标

pointWidth -每个列/点的宽度

我将x设置为第一个点的开始，y设置为所有点中最低的plotY值(最低plotY意味着最高列)

          $.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 +图表。

如果列在正轴上，则添加labelHeight，使工具提示不会重叠在列上。

          if (point.negative)
            tooltipY = y + chart.plotTop;
          else
            tooltipY = y + chart.plotTop - labelHeight;
          return {
            x: tooltipX,
            y: tooltipY
          };
        }
      }

或者，您可以找到y轴的总高度，并将其与hoverPoints中的tooltipPos中的点进行比较。

$('#div_id').find('.highcharts-container').find('.highcharts-root').find('.highcharts-plot-background').attr('height'));
相关文章：