删除 Legend Item 单击上的 SVG 渲染路径

Question

这是我的jsfiddle

我正在通过渲染路径元素在某些系列的末尾绘制箭头标记。当我隐藏其他图例时，箭头标记会移动，而不会删除渲染的箭头标记。

我尝试使用以下方式删除渲染的元素

在箭头标记系列上使用 destroy 方法。

plotOptions: {
  series: {
   events: {
     legendItemClick: {
//svgElements are retrieved from called function which draws arrow mark
     svgElements.forEach((ele) => {
                  if(ele.d !== 'M 0 0')
                    ele.destroy();
                })
   }
  }
 }
}

通过使用删除方法

svgElements.forEach((ele) => {
                  if(ele.d !== 'M 0 0')
                    ele.element.remove();
                })

通过在 SVG 上使用 id

svgElements.forEach((ele) => {
                  if(ele.d !== 'M 0 0')
                    $('#legend4').remove();
                })

通过使用 safeRemoveChild 方法

svgElements.forEach((ele) => {
                  if(ele.d !== 'M 0 0')
                    ele.safeRemoveChild(ele.element);
                })

但其中 none 有效。任何建议都会有所帮助。

Answer 1

您不需要删除自定义箭头，更新它们的位置就足够了。例如：

if (series.customArrow) {
  series.customArrow.attr({
    d: path
  })
} else {
  series.customArrow = series.chart.renderer.path(path)
    .attr({
      fill: series.color
    })
    .add(series.group);
}

现场演示： https://jsfiddle.net/BlackLabel/wv41sqro/

API参考：https://api.highcharts.com/class-reference/Highcharts.SVGElement

删除 Legend Item 单击上的 SVG 渲染路径

Remove SVG rendered path on Legend Item Click

javascript

highcharts

angular