javascript - Highcharts 无法破坏标签

Question

我向 highcharts 添加了一些标签，单击按钮时需要销毁这些标签，但不幸的是标签仍然可见

这是 fiddle 。

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

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>


        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button id="remove">
REmove callouts
</button>

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('<div class="callout top">'+callout+'</div>',  
                      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('<div class="callout top">'+callout+'</div>',  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/