Question

当光标悬停在堆叠列上时，我想避免使用工具提示调用“跳转效果”。这是我遇到的问题的一个例子： http://jsfiddle.net/ewget3wd/ - ＆GT;我有一个堆叠的列，我想要一个堆叠列的唯一工具提示，但正如您在我的示例中所看到的，工具提示从一个栏跳到其他栏。

我想避免这种“跳跃效应”，并有一个共享的工具提示。我试过了参数 shared:true 但正如您在下面的示例中看到的那样，工具提示的小箭头消失了： http://jsfiddle.net/5rktjo4g/

总而言之，我想在堆叠柱的顶部有一个指向（带箭头）的工具提示。

所以这是我的问题，是否可能？： - ）

感谢。

Answer 1

您可以使用工具提示的共享属性，并使用定位器来定位工具提示。在这里，您可以找到可以帮助您的代码：

  positioner: function(labelWidth, labelHeight, point) {
    return {
      x: point.plotX + labelWidth / 2,
      y: point.plotY - labelHeight / 2
    }
  },

您可以通过包装负责绘制工具提示形状的函数来添加连接器：

(function(Highcharts) {
    Highcharts.Renderer.prototype.symbols.callout = function(x, y, w, h, options) {
      var arrowLength = 6,
        halfDistance = 6,
        r = Math.min((options && options.r) || 0, w, h),
        safeDistance = r + halfDistance,
        anchorX = options && options.anchorX,
        anchorY = options && options.anchorY,
        path;

      path = [
        'M', x + r, y,
        'L', x + w - r, y, // top side
        'C', x + w, y, x + w, y, x + w, y + r, // top-right corner
        'L', x + w, y + h - r, // right side
        'C', x + w, y + h, x + w, y + h, x + w - r, y + h, // bottom-right corner
        'L', x + r, y + h, // bottom side
        'C', x, y + h, x, y + h, x, y + h - r, // bottom-left corner
        'L', x, y + r, // left side
        'C', x, y, x, y, x + r, y // top-right corner
      ];

      //bottom arrow
      path.splice(23, 3,
        'L', w / 2 + halfDistance, y + h,
        w / 2, y + h + arrowLength,
        w / 2 - halfDistance, y + h,
        x + r, y + h
      );
      return path;
    };
  }(Highcharts));

在这里，您可以看到一个示例：http://jsfiddle.net/ewget3wd/4/

Hightcharts使用“shared：true”避免工具提示上的“跳跃效果”

1 个答案: