Moyen approprié pour supprimer toutes les données de la série d'un graphique en grappes
UPDATE: Voici un jsfiddle qui montre le problème: http://jsfiddle.net/pynju/1/
Cliquez sur la colonne bleue lundi. Lors du chargement de la vue de détail, notez que 01-07 a 3 colonnes (2 prévues). Cliquez sur la barre la plus haute pour revenir à la vue d'origine. Notez que les étiquettes sur xAxis ne sont pas supprimées.
===============
J'ai un graphique à barres qui a 2 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 les données du jour de la semaine, l'axe des abscisses étant: dimanche - lundi - mardi - mercredi - jeudi - vendredi - samedi
La série initiale comporte un élément d'exploration avec une nouvelle donnée & data2 (Voir ci-dessus)
En utilisant le code de démonstration drilldown à titre d'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 graphique:
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'
});
}
}
La carte initiale s’affiche parfaitement: 
Lorsque vous cliquez sur l'une des barres bleues (l'ensemble de données contenant le détail), les choses se gênent pour les 7 premiers éléments de l'axe des x:
C'est comme si les jeux 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 dans l’intention de rétablir le jeu de données/la série d’origine: 
Donc ... il est clair que le code de série que j'utilise ne fonctionne pas. Quelle est la meilleure façon de supprimer complètement les données du graphique et des 2 séries que je dois afficher à chaque fois en fonction de ce qui est cliqué?
essayez ceci pour supprimer toutes les séries de graphiques,
while(chart.series.length > 0)
chart.series[0].remove(true);
ça marche pour moi. le code
for (var i = 0; i < chart.series.length; i++)
ne fonctionnera pas car le chart.series.length est diminué à chaque appel de remove(). De cette façon, la i n'atteindra jamais la longueur attendue. J'espère que cela t'aides.
De la manière suivante, le graphique ne redessinera pas chaque itération.
Ainsi vous obtiendrez une meilleure performance.
while( chart.series.length > 0 ) {
chart.series[0].remove( false );
}
chart.redraw();
Une autre façon de supprimer toutes les séries dans HighCharts avec une boucle for est de commencer à la fin. Voici comment le faire:
var seriesLength = chart.series.length;
for(var i = seriesLength - 1; i > -1; i--) {
chart.series[i].remove();
}
Je préfère utiliser cette voie, car lorsque vous utilisez une carte HighStock, le navigateur est généralement la première série. Je préfère également conserver un jeu de variables dans la série de navigateurs. 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 du navigateur.
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 la série de navigateurs): http://jsfiddle.net/engemasa/WcLQc/
La raison pour laquelle for (var i = 0; i < chart.series.length; i++) ne fonctionne pas est que vous modifiez le tableau pendant que vous le parcourez. Pour contourner ce problème, vous pouvez parcourir le tableau de droite à gauche. Ainsi, lorsque vous supprimez un élément, l'index du tableau pointe toujours sur le dernier élément du tableau.
En utilisant forEachRight de lodash, vous pouvez faire:
_.forEachRight(chart.series, chartSeries => {
chartSeries.remove(false);
});
chart.redraw();
var seriesLength = chart.series.length;
for(var i = seriesLength -1; i > -1; i--) {
chart.series[i].remove();
}
Il peut simplement s'agir simplement de demander au tableau 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
}
Vous pouvez également mettre à jour et ajouter une nouvelle série. Si la nouvelle série est inférieure à la série actuelle, supprimez la série:
var hChart = $("#Chart").highcharts();
for (var i = 0; i < newSeries.length; i++) { //UPDATE-OLD/ADD-NEW SERIES
if (hChart.series[i])
hChart.series[i].update(newSeries[i]);
else
hChart.addSeries(newSeries[i]);
}
var serieslen = newSeries.length;
if (hChart.series[serieslen]) {
var loopfrm = hChart.series.length - 1;
for (var i = loopfrm; i >= serieslen; i--) {//REMOVE SERIES
hChart.series[loopfrm].remove();
}
}