如何在 Highcharts 的 <g> 元素中添加 <path> 元素

Question

我想在我的图表/svg 中添加这些元素：

<g
   transform="matrix(1.25,0,0,-1.25,175.4,27)">
  <path
     d="M 0,0 -4.252,-11.338 -4.252,0 0,0 z"
     style="fill:#711f1c;fill-opacity:1;fill-rule:nonzero;stroke:none"
     />
</g>

我已经使用了渲染器（在 chart > event > load 中）：

window.chart_myid = new Highcharts.Chart({
 chart: {
  events : {
   load : function(){
     this.renderer.g("myshape")
     .attr({
         "transform" : "matrix(1.25,0,0,-1.25,175.4,27)"
        })
     .add();

     this.renderer.path(['M', 0, 0, 'L', -4.252, -11.338, -4.252, 0, 0, 0, 'z'])
    .css({
        'fill' : '#711f1c',
        'fill-opacity' : '1',
        'fill-rule' : 'nonzero',
        'stroke' : 'none'
    })
    .add("myshape");
   }
  }
 }

结果是：

<g class="highcharts-myshape" 
   transform="matrix(1.25,0,0,-1.25,175.4,27)"/>
<path 
   fill="none" 
   d="M 0 0 L -4.252 -11.338 -4.252 0 0 0 z" 
   style="fill:#711f1c;fill-opacity:1;fill-rule:nonzero;stroke:none;"
/>

如何将<path> 元素添加到<g> 元素中？

Answer 1

您需要将 g 元素而不是其名称传递给 add 即

 var g = this.renderer.g("myshape")
 .attr({
     "transform" : "matrix(1.25,0,0,-1.25,175.4,27)"
    })
 .add();

 this.renderer.path(['M', 0, 0, 'L', -4.252, -11.338, -4.252, 0, 0, 0, 'z'])
.css({
    'fill' : '#711f1c',
    'fill-opacity' : '1',
    'fill-rule' : 'nonzero',
    'stroke' : 'none'
})
.add(g);