ハイチャート：円グラフでコネクタの先端に矢頭を追加するにはどうすればいいですか？

Question

円のハイチャートのコネクタの先端にドットを追加したいと考えています。 ANとしてcss

介し

• ：私は<marker> SVG要素があることを学んだ（highcharts APIと混同しないように）、これらのいずれかを添加することができる

  （Highcharts 5.0.10を使用して）属性は<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に手を加える必要があるかもしれませんが（実際には分かりません）、ハイチャートのAPIには何かがないと思っています。

EDIT：これはすべてAngularJS命令で行われます。

Answer 1

あなたがマーカーを作成し、loadイベントにそれらを正しく接続する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/