Попытка выпустить все остальные столбцы, когда пользователь выбирает один столбец

Question

Я не могу понять, как погасить все остальные столбцы, когда пользователь выбирает конкретный столбец. Я попытался сделать цикл, чтобы просмотреть данные, но он все еще не работает.

Кроме того, мне нужно, чтобы пользователь щелкнул по столбцу, а затем снова щелкнул по нему, и все столбцы снова исчезнут.

Этот код выделяет только один бар.

Любые предложения?

$(function() { 

    $('#container4').highcharts({ 
     chart: { 
      type: 'column' 
     }, 

     title: { 
      text: '' 
     }, 

     legend: { 
      enabled: false 
     }, 

     exporting: { 
      enabled: false 
     }, 

     credits: { 
      enabled: false 
     }, 

     xAxis: { 
      gridLineColor: '', 
      labels: { 
       enabled: false 
      } 
     }, 

     yAxis: { 
      title: { 
       text: 'Fruit' 
      }, 
      visible: false 
     }, 

     credits: { 
      enabled: false 
     }, 

     plotOptions: { 
      series: { 
       allowPointSelect: true, 
       states: { 
        select: { 
         color: 'blue', 
        } 
       } 
      }, 
      column: { 
       stacking: 'normal', 
      } 
     }, 

     series: [{ 
      name: '', 
      data: [-40, -60, -70, -80, -90, -100, -100, -100, -100, -100, -100], 
      threshold: 0, 
      color: '#E0E0E0 ', 
      enableMouseTracking: false, 
     }, { 
      name: '', 
      data: [-60, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50], 
      threshold: 0, 
      color: 'green', 
      negativeColor: 'red', 
     }, ] 
    }); 
}); 

Answer 1

Вы не используете API, вы можете сделать это самостоятельно (если он не конфликтует с другими вещами).

$(function() { 
 
    $('#container4').highcharts({ 
 
     chart: { 
 
      type: 'column', 
 
      events: { 
 
       click: function(e) { 
 
        console.log(e); 
 
       }, 
 
       selection: function(e) { 
 
        console.log(e); 
 
       } 
 
      } 
 
     }, 
 
     title: { 
 
      text: '' 
 
     }, 
 
     legend: { 
 
      enabled: false 
 
     }, 
 
     exporting: { 
 
      enabled: false 
 
     }, 
 
     credits: { 
 
      enabled: false 
 
     }, 
 
     xAxis: { 
 
      gridLineColor: '', 
 
      labels: { 
 
       enabled: false 
 
      } 
 
     }, 
 
     yAxis: { 
 
      title: { 
 
       text: 'Fruit' 
 
      }, 
 
      visible: false 
 
     }, 
 
     credits: { 
 
      enabled: false 
 
     }, 
 
     plotOptions: { 
 
      /*series: { 
 
       allowPointSelect: true, 
 
       states: { 
 
        select: { 
 
         color: 'blue', 
 
        } 
 
       } 
 
      },*/ 
 
      column: { 
 
       stacking: 'normal', 
 
      } 
 
     }, 
 
     series: [{ 
 
      name: '', 
 
      data: [-40, -60, -70, -80, -90, -100, -100, -100, -100, -100, -100], 
 
      threshold: 0, 
 
      color: '#E0E0E0 ', 
 
      enableMouseTracking: false, 
 
     }, { 
 
      name: '', 
 
      data: [-60, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50], 
 
      threshold: 0, 
 
      color: 'green', 
 
      negativeColor: 'red', 
 
     }, ] 
 
    }); 
 
}); 
 

 
$(document).on('click', '.highcharts-tracker rect', function() { 
 
    var elm = $(this); 
 
    if (!elm.attr('class')) { 
 
     $('.highcharts-tracker rect').removeAttr('class').css('opacity', 0.5); 
 

 
     elm.attr('class', 'active').css('opacity', 1); 
 
    } else { 
 
     $('.highcharts-tracker rect').removeAttr('class').css('opacity', 1); 
 
    } 
 
});

.highcharts-series rect { 
 
    transition:all .3s ease; 
 
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<div id="container4"></div>

http://jsbin.com/jiluwimiyo