HighCharts 多边形标签 - 可缩放

Question

我有一个折线图，其中包含一些需要标签的背景多边形，很像 this post。但是，我的图表使用了 HighCharts 的缩放功能。 chart.events.render 将在缩放时绘制新标签，但不会删除旧标签，旧标签也不会缩放。使用 this.customLabel.destroy() 似乎不起作用。所以我最终在错误的地方添加了多余的标签。我如何删除每个新渲染的旧标签，或者现在有更好的方法来标记多边形吗？

Answer 1

试试这个方法：

  chart: {
    events: {
      render() {
        const chart = this;
        if (chart.customLabel) {
          chart.customLabel.destroy()
        }
        chart.customLabel = chart.renderer.label('test label', Math.random() * 200 + chart.plotLeft, Math.random() * 200 + chart.plotTop)
          .css({
            color: '#FFFFFF'
          })
          .attr({
            fill: 'rgba(0, 0, 0, 0.75)',
            padding: 8,
            r: 5,
            zIndex: 6
          })
          .add();
      }
    }
  },

演示：https://jsfiddle.net/BlackLabel/g1v4dwcn/ - 在 jsfiddle 中调整查看器的大小以查看效果。

发帖人编辑：见关于“两种不同的 SVG 元素”的评论

HighCharts 多边形标签 - 可缩放

HighCharts polygon label - zoom capable

javascript

highcharts