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>

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

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数组中的每个点对象。

plotY-每列/点的坐标值

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

用于居中对齐工具提示的delta变量。
tooltipX = x + chart.plotLeft + delta;

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

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

Answer 2

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

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

这样您就可以相应地定位每个工具提示。

Highcharts - 如何在多个系列柱形图中的列顶部对齐共享工具提示？

2 个答案: