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

您可以通过调用.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();

这是一个证明要点的小提琴：http://jsfiddle.net/jfpq6zcg/

Answer 2

查看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.

最后，我认为你是在隐藏功能之后，因为当你点击另一个按钮时你想要把这些（删除的）系列带回来。因此，如果删除，则必须重新渲染系列。

如何删除在Highcharts

2 个答案: