工具提示尖箭头饼图

时间:2015-12-31 07:46:01

标签: jquery html css highcharts

enter image description here

enter image description here

栏上的工具提示指向下箭头,但对于饼图,它只显示矩形框。

我也想要饼图同样的尖箭头。

1 个答案:

答案 0 :(得分:1)

您可以通过扩展Highcharts来更改工具提示形状。

(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
      ];

      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/p0vk50o6/

文档: - http://www.highcharts.com/docs/extending-highcharts/extending-highcharts