javascript - simples - ¿La forma correcta de eliminar todos los datos de la serie de una tabla de gráficos altos?

graficos estadisticos

Question

ACTUALIZACIÓN: Aquí hay un jsfiddle que muestra el problema: http://jsfiddle.net/pynju/1/

Haga clic en la columna azul el lunes. Cuando se carga la vista detallada, observe que 01-07 tiene 3 columnas (se espera 2). Haga clic en la barra más alta para volver a la vista original. Observe que las etiquetas en xAxis no se eliminan.

===============

Tengo un gráfico de barras que tiene 2 series, que se muestran como pares de barras, una al lado de la otra.

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

Los datos iniciales son datos del día de la semana con el eje X: domingo - lunes - martes - miércoles - jueves - viernes - sábado

La serie inicial tiene un elemento de desglose con datos y datos nuevos2 (ver arriba)

Utilizando el código de demodown drilldown como ejemplo, tengo este código en su lugar:

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);
}
}
}
},

Establecer controlador de gráfico:

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''
});
}
}

El cuadro inicial muestra perfectamente bien:

Cuando hace clic en cualquiera de las barras azules (el conjunto de datos que tiene el desglose), las cosas se ponen feas para los primeros 7 elementos del eje x:

Es como si el código no eliminara los conjuntos de datos iniciales:

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

Cuando hace clic en cualquiera de las barras con la intención de restablecer el conjunto de datos / serie original:

Entonces ... está claro que el código de eliminación de series que estoy usando no funciona. ¿Cuál es la mejor manera de eliminar completamente los datos en el gráfico y las 2 series que necesito mostrar cada vez dependiendo de qué se hace clic?

Answer 1

Otra forma de eliminar todas las series en HighCharts con un ciclo for es comenzar desde el final. He aquí cómo hacerlo:

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

Prefiero ir por esta ruta porque al usar un gráfico HighStock, el navegador suele ser la primera serie. También prefiero mantener un conjunto de variables en la serie de navegación. En ese caso, haré lo siguiente:

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();
}
}

Ahora puedo configurar fácilmente la serie de navegadores.

Aquí hay un ejemplo de cómo eliminar todas las series de un Highchart: http://jsfiddle.net/engemasa/srZU2/

Aquí hay un ejemplo de reinicio de una tabla HighStock con nuevos datos (incluida la serie de navegación): http://jsfiddle.net/engemasa/WcLQc/

Answer 2

Puede ser simplemente una cuestión de indicarle a la tabla que vuelva a dibujar. Cuando elimine una serie, intente forzar la tabla a volver a dibujar:

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

Answer 3

intenta esto para eliminar todas las series de cartas,

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

esto funciona para mi. el código

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

no funcionará porque el chart.series.length se reduce cada vez que se llama a remove() . De esa forma, nunca alcanzaré la duración esperada. Espero que esto ayude.

Answer 4

Encontré la solución de trabajo. Prueba esto:

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

Eliminará completamente todas las series.

Answer 5

De la siguiente manera, el gráfico no volverá a dibujar cada iteración.
Entonces obtendrás un mejor rendimiento.

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

Answer 6

La razón for (var i = 0; i < chart.series.length; i++) no funciona es porque estás modificando la matriz mientras la estás recorriendo. Para evitar esto, puede recorrer la matriz de derecha a izquierda, de modo que cuando elimine un elemento, el índice de la matriz apuntará al último elemento de la matriz.

Usando lodash''s forEachRight , puedes hacer:

_.forEachRight(chart.series, chartSeries => {
chartSeries.remove(false);
});
chart.redraw();