Comment sélectionner des colonnes (à travers plusieurs panneaux) dans Highcharts/Highstocks

Question

J'ai cet exemple: http://jsfiddle.net/qzprvohr/1/

Ce que je suis en train de réaliser - si je clique (juste une fois) à une colonne, je dois tout sélectionner colonnes qui a la même valeur d'axe x. Actuellement, cela fonctionne seulement pour un clic, le reste est non sélectionné. Il est également possible d'utiliser une couleur d'arrière-plan pour les colonnes sélectionnées (pas pour la colonne elle-même). Quelque chose comme xAxis.crosshair.color & xAxis.crosshair.width faire pour l'état stationnaire.

J'ai essayé quelque chose comme ceci pour sélectionner toutes les colonnes (mais il ne fonctionne pas correctement):

plotOptions: {   
       series: { 
         allowPointSelect: true, 
         cursor: 'pointer', 
         point: { 
          events: { 
            click: function (event) 
            { 
             var selectedCategory = this.category; 
             var chart = this.series.chart; 
             for (var i = 0; i < chart.series.length; i++) 
             { 
              for (var j = 0; j < chart.series[i].data.length; j++) 
              { 
               if (typeof chart.series[i].data[j] !== "undefined" && 
                chart.series[i].data[j].category == selectedCategory) 
               { 
                chart.series[i].data[j].select(true, true); 

               } 
              } 
             } 
            } 
           } 
          }}} 

Answer 1

J'ai joué un peu avec l'exemple et je pense que je l'ai trouvé la solution. Si j'utilise la fonction setTimeout pour la sélection, toutes les colonnes sélectionnées resteront dans l'état sélectionné. J'ai aussi utilisé plotBands pour une autre couleur de fond. Exemple ici: http://jsfiddle.net/qzprvohr/2/

plotOptions: { 
      series: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       point: { 
        events: { 
         click: function (event) { 
          var clickedPoint = this; 
          setTimeout(function() { 
           var selectedCategory = clickedPoint.category; 
           var chart = clickedPoint.series.chart; 
           for (var i = 0; i < chart.series.length; i++) { 
            for (var j = 0; j < chart.series[i].data.length; j++) { 
             if (typeof chart.series[i].data[j] !== "undefined" &&              chart.series[i].data[j].category == selectedCategory) { 
              chart.series[i].data[j].select(true, true); 
              chart.xAxis[i].removePlotBand('selection' + i) 
              chart.xAxis[i].addPlotBand({ 
               color:'red', 
               from: selectedCategory - 40000000, 
               to: selectedCategory + 40000000, 
               id: 'selection'+i 
              }); 
             } 
            } 
           } 
          }, 0); 
         } 
        } 
       } 
      } 
     }