Highcharts无法破坏标签

我已经在按下单击按钮时需要销毁的高级图表中添加了一些标签，但不幸的是标签仍然可见

这是小提琴。

https://jsfiddle.net/7pq3po3o/3/

HTML：

 
  REmove callouts  

使用Javascript： –

 $(document).ready(function(){ remove_labels = false gen_points = {"0":[{"x_axis":"0.8","y_axis":"09/07/2016 00:00","point":"0","callout":"called out","y_axis_position":""}]} var drawchart = function() { categories = ["09/07/2016 00:00","09/07/2016 00:01","09/07/2016 00:02","09/07/2016 00:03","09/07/2016 00:04"] rate_1 = [0.8,0.54,0.6,0.3,0.4] rate_2 = [0.33,0.16,0.33,0.3,0.38] rate_3 = [0.03,0.04,0.05,0.03,0.01] var addCallout = function(chart) { console.log('redraw called') var xAxis; var yAxis; if (Object.keys(gen_points).length === 0) { // alert('empty object') } else{ for (var key in gen_points){ console.log('******generate callouts******* == ') xAxis = chart.xAxis[0] yAxis = chart.yAxis[0] gen_points[key].forEach(function(obj,index){ point_val = gen_points[key][index]['point'] callout = gen_points[key][index]['callout'] series = chart.series[parseInt(key)] point = series.data[parseInt(point_val)]; console.log('gen_points == ', gen_points) console.log('xAxis == ', xAxis) console.log('yAxis == ', yAxis.toPixels) console.log('series == ', series) console.log('point == ', point) console.log('point plotX == ', point.plotX) console.log('chart.plotLeft == ', chart.plotLeft) console.log('xAxis == ', point.plotX + chart.plotLeft) console.log('point plotY == ', point.plotY) console.log('chart.plotTop == ', chart.plotTop) console.log('yAxis == ', point.plotY + chart.plotTop) if (remove_labels){ console.log(chart.renderer.label) var a = chart.renderer.label('
'+callout+'
', point.plotX + chart.plotLeft + 10, point.plotY + chart.plotTop - parseInt(y_axis_position), 'callout',null, null, true).destroy(); alert('destroy') console.log('a',a); }else{ var a = chart.renderer.label('
'+callout+'
', point.plotX + chart.plotLeft + 10, point.plotY + chart.plotTop - 30, 'callout',null, null, true).add(); console.log('a',a); } }) } } }; $('#container').highcharts({ chart: { // type: 'bar', events: { load: function() { // alert('load') addCallout(this); }, redraw: function() { // alert('redraw') addCallout(this); }, } }, title: { text: 'Spikes Graph', x: -20 //center }, subtitle: { text: '', x: -20 } , series: [{ turboThreshold: 2000 // to accept point object configuration }], xAxis: { categories: categories, tickInterval: 60, }, yAxis: { title: { text: 'Error Rate' }, min: 0, max: 5, plotLines: [{ value: 0, width: 1, color: '#808080' }], labels:{ format : '{value} %' } }, tooltip: { valueSuffix: '°C' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [ // {turboThreshold: 2000 }, { name: 'Rate-1', data: rate_1, turboThreshold: 2000, lineWidth: 1, dataLabels: { enabled: true, useHTML: true, style: { fontWeight: 'bold' }, }, }, { name: 'Rate-2', data: rate_2, turboThreshold: 2000, lineWidth: 1 }, { name: 'Rate-3', data: rate_3, turboThreshold: 2000, lineWidth: 1 } ] }); }; drawchart() $('#remove').on('click', function(){ console.log('remove clicked') remove_label = true $("#container").highcharts().redraw() console.log('redraw complete') }) }) 

Answer 1

为什么你不能使用.remove（）方法？ 它将帮助您的图表：

  $('#remove').on('click', function() { remove_label = true $('.callout').remove(); }) 

在这里你可以看到一个如何工作的例子： https ： //jsfiddle.net/7pq3po3o/6/