javascript - type - xaxis highcharts

Highcharts: Ocultar y mostrar leyenda

Question

Me gustaría poder cambiar la visibilidad de la leyenda de un gráfico cuando el usuario hace clic en un botón.

He intentado ocultar la leyenda utilizando el método destroy() no documentado, sin embargo, cuando intento volver a representar la leyenda y sus elementos, los elementos aparecen en la parte superior izquierda del gráfico en lugar de dentro de la leyenda. Los elementos tampoco parecen tener ninguno de sus controladores de eventos adjuntos (al hacer clic en un elemento ya no se alterna una serie).

¿Hay una mejor manera de hacer esto? Tengo que admitir las implementaciones SVG y VML, así que estoy buscando una solución que aborde ambas.

Ejemplo de JSFiddle

$(''#updateLegend'').on(''click'', function (e) {
var enable = !chart.options.legend.enabled;
chart.options.legend.enabled = enable;
if (!enable) {
chart.legend.destroy(); //"hide" legend
} else {
var allItems = chart.legend.allItems;
//add legend items back to chart
for (var i = 0; i < allItems.length; i++) {
var item = allItems[i];
item.legendItem.add();
item.legendLine.add();
item.legendSymbol.add();
}
//re-render the legend
chart.legend.render();
}
});

Answer 1

Actualizar un poco de código de respuesta seleccionada. Ahora aumentará el espacio al mostrar / ocultar leyenda.

$(''#updateLegend'').click(function (e) {
var legend = chart.legend;
if(legend.display) {
legend.group.hide();
legend.box.hide();
legend.display = false;
} else {
legend.group.show();
legend.box.show();
legend.display = true;
}
var series = chart.series[0];
$(chart.series).each(function(){
this.setVisible(true, false);
});
chart.redraw();
});

Answer 2

Aquí hay una solución interesante que se me ocurrió: funciona para Highcharts3 y Highstocks1.3 https://bitbucket.org/jkowalleck/highcharts-legendextension

Todo lo que tienes que hacer es agregar la https://bitbucket.org/jkowalleck/highcharts-legendextension que escribí a tu página HTML, y obtendrás 3 nuevas funciones agregadas a la Tabla:
myChart.legendHide() ,
myChart.legendShow() y
myChart.legendToggle()

Vea los ejemplos:
en Highcharts con leyenda flotante: http://jsfiddle.net/P2g6H/
en Highstocks con leyenda estática: http://jsfiddle.net/ps6Pd/

Answer 3

En el caso de que destruyas una leyenda, necesitas generar una leyenda completa Una solución más simple es usar la función ocultar () / mostrar () para los elementos.

http://jsfiddle.net/sbochan/3Bh7b/1/

$(''#updateLegend'').click(function (e) {
var legend = chart.legend;
if(legend.display) {
legend.group.hide();
legend.box.hide();
legend.display = false;
} else {
legend.group.show();
legend.box.show();
legend.display = true;
}
});

Answer 4

Hasta ahora la única solución de trabajo en el mundo:

for (i = 0; i < chart.series.length; i++)
chart.series[i].options.showInLegend = true;
chart.series[0].setData(chart.series[0].data); 

La representación manual no funciona (ocultar legend.box, etc., siempre que haya varias páginas en la leyenda, entonces el botón del navegador permanece). setData llama al renderizador interno que actúa bastante bien y hace todo lo que se necesita.
Hmm, tal vez al final puedas hacer esto:
chart.setSize( chartWidth, chartHeight+chart.legend.fullHeight, false );

Answer 5

Tan simple como

myChartObject.legend.update({
enabled:true
)};

Answer 6

Una forma bastante sencilla de hacer esto es recorrer la serie y actualizarla para que no aparezca en la leyenda. Esto le permite animar dentro y fuera de mostrar la leyenda y utilizar todo el espacio del contenedor, ya que los métodos están integrados.

Por ejemplo, alternar elementos de leyenda se vería así:

$(''#toggleButton'').click(function() {
for(i in chart.series)
chart.series[i].update({ showInLegend: chart.series[i].options.showInLegend == null ? false : !chart.series[i].options.showInLegend }, false);
chart.redraw();
});

Vea esta demostración de JSFiddle para alternar, mostrar y ocultar usando los botones.