从自定义 Highcharts 绘图中删除标签答案

【问题标题】：Remove label from custom Highcharts drawing从自定义 Highcharts 绘图中删除标签
【发布时间】：2025-11-23 14:10:02
【问题描述】：

我创建了一个自定义Highcharts drawing，我目前拥有它，如果用户将鼠标悬停在一个元素上，它会显示一个标签。但是，我想在 mouseout 上删除标签。

这是我目前所拥有的：

$('#container').highcharts({
  chart: {
    backgroundColor: 'white',
    events: {
      load: function () {
        var ren = this.renderer;

        ren.rect(50, 50, 60, 50, 0)
          .attr({
            'stroke-width': 2
          })
          .on('mouseover', function() {
            ren.label('Foo')
            .attr({
              fill: Highcharts.getOptions().colors[0],
              padding: 10,
              r: 5,
              zIndex: 8
            })
            .css({
              color: '#fff'
            })
            .add();
          })
          .on('mouseout', function() {
            // need to remove the Foo label here
          })
          .add();
        }
      }
    }
  }
});

有什么想法吗？

【问题讨论】：

如果您可以设置fiddle 然后编辑您的问题以将其置于顶部，这将有所帮助

标签： javascript highcharts

【解决方案1】：

当您以这种方式创建元素时：

var myRect = renderer.rect(x, y, w, h, r);

然后您可以使用myRect 变量访问您的矩形。

现在你可以调用Element对象的所有方法了：

myRect.add();
myRect.on( ... );
myRect.destroy(); // remove element from DOM

【讨论】：