关于使用 Highcharts.SVGRenderer 创建/销毁 Highcharts SVG 元素的问题答案

【问题标题】：Question on Highcharts SVG element create / destroy using Highcharts.SVGRenderer关于使用 Highcharts.SVGRenderer 创建/销毁 Highcharts SVG 元素的问题
【发布时间】：2021-06-27 19:57:24
【问题描述】：

我已经阅读了有关如何使用 Highcharts.SVGRenderer 创建自定义 SVG 文本等的各种示例。但是，我想知道创建和清理它们的正确做法是什么？

目前我在 events.redraw 钩子上制作它们（因为我想根据动态数据更新 SVG 文本），但是看起来 redraw 钩子在各种场合被多次调用（看起来像它会在添加系列和添加数据时重绘），然后 SVG 没有得到清理......所以我最终在图表中拥有相同 SVG 元素的多个副本。任何子序列重绘显然会不断向图表中添加更多 SVGElement。

问题：

我是否需要自己跟踪所有生成的 SVGElement 并在每次重绘它们时手动调用 destroy()？
Highcharts 中是否有任何内部跟踪器可以使用SVGRenderer 跟踪创建的 SVG？（这样我就可以使用内部 ref 来调用 destroy 自己）
如果我不应该在重绘事件中绘制它们，那么在我需要动态更新这些生成的 SVG 元素时，推荐使用什么钩子来绘制我的 SVG 元素。
我是否绝对需要跟踪自己对 SVG 元素的引用？这样做似乎有点太多的开销/麻烦。

【问题讨论】：

标签： javascript svg highcharts

【解决方案1】：

是的，您需要跟踪所有生成的 SVG 元素，您想要更新它们，但比销毁它们更好的是更新它们的属性。
不，没有这样的跟踪器。
您可以在load 事件中绘制元素，并在需要时重新绘制它们（例如，当您更改数据时）。
不，您必须只跟踪需要更新的元素。也许您的一些问题将通过注释解决？ https://www.highcharts.com/docs/advanced-chart-features/annotations-module

events: {
  render: function() {
    var chart = this,
      series = chart.series[0],
      x = series.points[2].plotX,
      y = series.points[2].plotY - 50;

    if (!chart.customElement) {
      chart.customElement = chart.renderer.text().add();
    }

    chart.customElement.attr({
      text: 'some text ' + Math.random(),
      x,
      y
    });
  }
}

现场演示： http://jsfiddle.net/BlackLabel/t250crx1/

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

【讨论】：