Comment supprimer toutes les données de série d'un graphique Highcharts ?

Question

MISE À JOUR : Voici une jsfiddle qui montre le problème : http://jsfiddle.net/pynju/1/

Cliquez sur la colonne bleue du lundi. Lorsque la vue détaillée se charge, remarquez que 01-07 a 3 colonnes (2 en principe). Cliquez sur la barre la plus haute pour revenir à la vue originale. Remarquez que les étiquettes sur l'axe des x ne sont pas supprimées.

\===============

J'ai un graphique à barres qui comporte deux séries, affichées sous forme de paires de barres, côte à côte.

series: [{
         showInLegend: false,
         data: dowChartData
      },{
         showInLegend: false,
         data: avgUserDowChartData
      }],

.

dowChartData = [                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   {
                y: 98.74,
                color: '#0072ff',
                drilldown: {
                   name: 'Category Engagement - Sunday',
                   categories: ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
                   data: [0,637,0,0,0,173,48.54,48.54,0,0,0,0,0,0,102.24,166.36,706.59,699.18,298.32,184.14,97.08,1539,0,1224.56],
                   color: '#0072ff',
                   data2: [506.80686467275,354.56354558498,333.25158689567,234.19283190879,234.82132336088,220.03247578171,222.86420797556,218.14034615202,170.42559544164,171.54776353196,249.24788461442,345.14915669555,206.65543589797,243.38811965637,367.02593304906,378.83677778129,467.45739743621,424.26264387522,639.60922934374,679.71299714907,373.26353846375,480.94380626458,551.82326068362,466.77469230724],
                   color2: '#C00'
                }
             }
AND SIMILAR

.

avgUserDowChartData = [                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         {
                y: 142.35,
                color: '#C00'
             },
AND SIMILAR

Les données initiales sont celles du jour de la semaine, l'axe des X étant : Dimanche - Lundi - Mardi - Mercredi - Jeudi - Vendredi - Samedi

La série initiale comporte un élément d'exploration avec de nouvelles données & data2 (voir ci-dessus)

En utilisant le code de la démo de drilldown comme exemple, j'ai ce code en place :

column: {
              borderWidth: 0,
            cursor: 'pointer',
            point: {
               events: {
                  click: function(event) {
                     var drilldown = this.drilldown;
                     if (drilldown) { // drill down
                        setChart(dowChart, drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.data2, drilldown.color2);
                     } else { // restore
                        setChart(dowChart, '', dowCategories, dowChartData);
                     }
                  }
               }
            },

Définir le gestionnaire de graphiques :

function setChart(chart, name, categories, data, color, data2, color2) {
      chart.xAxis[0].setCategories(categories);
//      chart.series[0].remove();
      for (var i = 0; i < chart.series.length; i++) {
          chart.series[i].remove();
      }
      chart.addSeries({
         showInLegend: false,
         name: name,
         data: data,
         color: color || 'white'
      });
      if (typeof(data2) != undefined && data2.length > 0) {
          chart.addSeries({
             showInLegend: false,
             name: name,
             data: data2,
             color: color2 || 'white'
          });
      }
   }

Le graphique initial s'affiche parfaitement bien :

Lorsque vous cliquez sur l'une des barres bleues (l'ensemble de données qui présente la recherche), les choses se gâtent pour les 7 premiers éléments de l'axe des x :

C'est comme si les ensembles de données initiaux n'étaient pas supprimés par le code :

for (var i = 0; i < chart.series.length; i++) {
          chart.series[i].remove();
      }

Lorsque vous cliquez sur l'une des barres avec l'intention de revenir à l'ensemble de données/série d'origine :

Donc... il est clair que le code de suppression de série que j'utilise ne fonctionne pas. Quel est le meilleur moyen de supprimer complètement les données du graphique et les deux séries que je dois afficher à chaque fois en fonction de ce qui est cliqué ?

Answer 1

Essayez ceci pour supprimer toutes les séries du graphique,

while(chart.series.length > 0)
    chart.series[0].remove(true);

cela fonctionne pour moi. le code

for (var i = 0; i < chart.series.length; i++)

ne fonctionnera pas car le chart.series.length est diminué chaque fois que remove() est appelé. De cette façon, le i n'atteindra jamais la longueur prévue. J'espère que cela vous aidera.

Answer 2

De la manière suivante, le graphique ne se redessinera pas à chaque itération.
Vous obtiendrez donc de meilleures performances.

while( chart.series.length > 0 ) {
    chart.series[0].remove( false );
}

chart.redraw();

Answer 3

Une autre façon de supprimer toutes les séries dans HighCharts avec une boucle for est de commencer par la fin. Voici comment procéder :

var seriesLength = chart.series.length;
for(var i = seriesLength - 1; i > -1; i--) {
    chart.series[i].remove();
}

Je préfère suivre cette voie parce que, lorsqu'on utilise un graphique HighStock, le navigateur est généralement la première série. Je préfère également conserver une variable définie sur la série du navigateur. Dans ce cas, je vais faire ce qui suit :

var seriesLength = chart.series.length;
var navigator;
for(var i = seriesLength - 1; i > -1; i--) {
    if(chart.series[i].name.toLowerCase() == 'navigator') {
        navigator = chart.series[i];
    } else {
        chart.series[i].remove();
    }
}

Maintenant, je peux facilement définir la série de navigateurs.

Voici un exemple de suppression de toutes les séries d'un Highchart : http://jsfiddle.net/engemasa/srZU2/

Voici un exemple de réinitialisation d'un graphique HighStock avec de nouvelles données (y compris les séries du navigateur) : http://jsfiddle.net/engemasa/WcLQc/

Answer 4

Il suffit peut-être de demander au graphique de se redessiner. Lorsque vous supprimez une série, essayez de forcer le graphique à se redessiner :

for (var i = 0; i < chart.series.length; i++) {
    chart.series[i].remove(true); //forces the chart to redraw
}

Answer 5

J'ai trouvé la solution qui fonctionne. Essayez ceci :

for (var i = 0; i < chart.series.length; i++) {
   chart.series[0].remove();
}
chart.redraw();

Il supprimera complètement toutes les séries.