Highcharts：如何在饼图中的连接器尖端添加箭头？

Question

我希望能够在饼图高图中的连接器尖端添加一个点。 （使用 Highcharts 5.0.10）

我了解到有 <marker> svg 元素（不要与 highcharts marker api 混淆）并且可以添加这些元素：

• 通过css
• 作为<path> 元素的属性。

虽然我没有看到实际应用它们的方法。

我尝试在 highcharts 中的 render 事件期间附加一个标记元素，然后修改连接器元素以添加属性：

render: function() {
  var marker = '<marker xmlns="http://www.w3.org/2000/svg" id="circle-marker" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto" viewBox="0 0 10 10">'+
                                                '<circle cx="5" cy="5" r="3" style="stroke: none; fill: red;"/>' +
                                             '</marker>';

           if (!$('#circle-marker').length) {
                 $('defs').append(marker);
           }

           $('.highcharts-data-label-connector').attr('marker-end', 'url(#circle-marker)');
            }

还尝试创建指向该标记的样式。

问题中更复杂的部分是我想让它们动态化（从当前点获取颜色）。

我可能需要更深入地了解 SVG（我几乎什么都不知道），但我也认为我在 Highcharts API 中缺少一些东西。

编辑：这一切都在 AngularJS 指令中完成。

Answer 1

您可以使用 Highcharts svg 包装器创建标记并在加载事件中正确附加它们。标记的问题是 - 如果您希望它们与连接器具有相同的颜色，则需要为每个标记创建一个单独的标记 - 在 SVG 1.1 中，标记不会从引用它们的对象（标记）继承颜色。

  load: function () {
    var renderer = this.renderer

    this.series[0].points.forEach((point, i) => {
      var marker = renderer.createElement('marker').add(renderer.defs).attr({
        markerWidth: 10,
        markerHeight: 10,
        refX: 5,
        refY: 5,
        orient: 'auto',
        id: `connector-marker-${i}`
      })

      renderer.circle(5, 5, 5).add(marker).attr({
        fill: point.color
      })

      point.connector.attr({
        'marker-start': `url(#connector-marker-${i})`
      })
    })
  }

示例：http://jsfiddle.net/39xvhwqo/