对齐Highcharts容器（圆环图）两侧的标签

Question

我有一个使用Highcharts 5的项目。我试图在圆环图的两侧绘制图表标签，在每一侧直线左右对齐，连接器适当地跨越距离。

附件是应该是什么样的组合。有关如何实现这一点的任何想法？

谢谢！

Answer 1

这是您的问题的解决方案 您可以自定义连接器并在圆环图的两侧获取图表标签。

http://jsfiddle.net/nmtri1101/ogfbxfqd/2/

.webm

Answer 2

您可以使用renderer手动创建图例（带点的html标签和连接线）：

    var points = this.series[0].points,
      renderer = this.renderer;

    points.forEach(function(point) {
      var labelOptions = point.options.label;
      if (labelOptions) {

        // text
        renderer.text(labelOptions.text, labelOptions.x, labelOptions.y - 30, true).add();

        // connector
        var path = ['M', labelOptions.x, labelOptions.y].concat(labelOptions.connector.path);
        renderer.path(path).attr({
          stroke: 'gray',
          'stroke-width': 1,
        }).add();

        // dot
        renderer.circle(labelOptions.x, labelOptions.y, 3).attr({
          fill: 'gray',
          'stroke-width': 1,
        }).add();

      }
    });

选项：

{
  name: 'Microsoft Internet Explorer',
  y: 56.33,
  label: {
    x: 400,
    y: 100,
    connector: {
      path: ['l', -50, 0, 'l', 0, 100]
    },
    text: "<div class='label'><img src='https://wordpress.highcharts.com/blog/wp-content/uploads/2017/08/28160952/highcharts_logo.png' width='30' height='30'></img><div>Label text in HTML</div></div>"
  }
}

实时工作示例（创建一个标签）： http://jsfiddle.net/kkulig/wdtpyof1/

这个演示只是一个很好的起点。您应该创建自己的机制来负责定位标签。

API参考： http://api.highcharts.com/class-reference/Highcharts.SVGRenderer