javascript - 从自定义Highcharts绘图中删除标签

我已经创建了一个自定义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();
        }
      }
    }
  }
});

有任何想法吗？

最佳答案

通过这种方式创建元素时：

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

那么您可以使用myRect变量访问rect。

现在，您可以从Element对象调用所有方法：

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