Question

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

我了解到有<marker>个svg元素（不要与高等级marker api混淆），这些元素可以添加：

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

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

我尝试在高层图表中的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/

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

1 个答案: