如何删除在 Highcharts 中通过 chart.renderer 添加的文本

Question

我在图表中添加了标签，而不是图例 (see fiddle here)。绘制图形后，通过 chart.renderer.text 将这些系列标签附加到图形上，用户可以单击按钮以添加其他系列，这反过来又会抑制其他线条（成功）。但是，现在我怎样才能摆脱这些标签 - 它们现在立在那里。

示例：这是完整的线条和标签集：

这是在单击按钮以显示附加行时，同时抑制了其他四行：

我这样添加标签：

chart.renderer.text('Volcanic', 1170, 360)
  .css({
    fontSize: '13px',
    color: '#7d7d7d'
  })
.add();

现在，这些标签仍然存在 - 但应该消失。我有什么办法可以做到这一点？添加 ID 的可能性，然后调用 chart.renderer.byID(xy).remove() 或类似的东西？

Answer 1

查看 HC 文档，唯一似乎可移动的渲染元素是 rendered.path。但是，查看您的代码，您可以使用 jquery 删除已呈现的元素。在文本或文本中的 tspan 中呈现的文本。

jquery，这样去掉。单击自然时，下面的代码将删除所有（文本和系列）

var natural = ['Volcanic','Solar','Ozone','Orbital Changes']
 $(natural).each(function(i,d){
                chart.get(d).remove();
                $('tspan:contains("'+d+'")').closest('text').remove()
                $('text:contains("'+d+'")').remove()
            })

此外，我看到您对呈现的文本的 x、y 位置进行了硬编码，这在 jsfiddle 中查看时或屏幕太小或太大时会出现问题。您可以使用 plotX 和 plotY 来确定线的结束位置并在那里绘制。示例：

var chart = $('#container').highcharts();
var point = chart.get('Land Use').points 'get all the plotted points
  point[point.length-1].plotX ' length -1 is the last point, this is x, plotY will get you y.

最后，我认为您正在使用隐藏功能，因为您希望在单击其他按钮时恢复这些（已删除的）系列。因此，如果您删除了，则必须重新渲染该系列。

Answer 2

您可以通过调用 .destroy() 来删除渲染的对象。您需要做的就是将对象分配给变量。

var objLabel; // assign the var so it is reachable in your scope

objLabel = $('#container').highcharts().renderer.text('Volcanic', 100, 30)
  .css({
    fontSize: '13px',
    color: '#7d7d7d'
  })
.add();

这里有一个fiddle来证明这一点：http://jsfiddle.net/jfpq6zcg/

如何删除在 Highcharts 中通过 chart.renderer 添加的文本

How to remove text which was added via chart.renderer in Highcharts

javascript

jquery

charts

labels

highcharts