Highcharts無法摧毀標籤

Question

我增加了一些標籤，需要被點擊，但按鍵時被破壞highcharts不幸的標籤仍然可見

這裏是小提琴。

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/