javascript - and - HighCharts: una leyenda, dos gráficos

xaxis options highcharts

Question

Tengo cuatro diferentes diagramas de spline de HighChart. Todos contienen seis series que representan los seis estados de Nueva Inglaterra. Quiero hacer clic en cualquier leyenda y ocultar / mostrar esa serie en todos los gráficos. He intentado legendclickitem pero no puedo obtenerlo para ambos gráficos. Es lo que estoy preguntando, si es así, ¿puedes apuntarme en la dirección correcta, gracias?

Responder:

Usando el código Paweł FusIn y para mantener una leyenda en cada tabla, utilicé el siguiente código. Puede hacer clic en cualquier elemento de leyenda y actualiza todos los cuadros.

plotOptions: {
series: {
events: {
legendItemClick: function(event) {
if (this.visible) {
$(''#container1'').highcharts().series[this.index].hide(); 
$(''#container2'').highcharts().series[this.index].hide(); 
$(''#container3'').highcharts().series[this.index].hide(); 
$(''#container4'').highcharts().series[this.index].hide(); 
} 
else {
$(''#container1'').highcharts().series[this.index].show(); 
$(''#container2'').highcharts().series[this.index].show(); 
$(''#container3'').highcharts().series[this.index].show(); 
$(''#container4'').highcharts().series[this.index].show();
}
return false;
}
}
}

Answer 1

Es posible, eche un vistazo: http://jsfiddle.net/teEQ3/

$(''#container1'').highcharts({
    xAxis: {
        categories: [''Jan'', ''Feb'', ''Mar'', ''Apr'', ''May'', ''Jun'', ''Jul'', ''Aug'', ''Sep'', ''Oct'', ''Nov'', ''Dec'']
    },

    legend: {
        enabled: false
    },

    series: [{
        id: ''someId'',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});
$(''#container2'').highcharts({
    xAxis: {
        categories: [''Jan'', ''Feb'', ''Mar'', ''Apr'', ''May'', ''Jun'', ''Jul'', ''Aug'', ''Sep'', ''Oct'', ''Nov'', ''Dec'']
    },

    plotOptions: {
        series: {
            events: {
                legendItemClick: function (event) {
                    var XYZ = $(''#container1'').highcharts(),
                        series = XYZ.get(this.options.id); //get corresponding series

                    if (series) {
                        if (this.visible) {
                            series.hide();
                        } else {
                            series.show();
                        }
                    }
                }
            }
        }
    },

    series: [{
        id: ''someId'',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

Entonces, la idea es habilitar solo en una leyenda de gráfico, luego en todos los gráficos respectivos ocultar las series correspondientes.

Answer 2

Si quisiera tener mis gráficos separados en pestañas, con una leyenda (en su propia pestaña) para controlar la serie visible en todas las demás pestañas, ¿cómo podría hacerlo? He leído que esto se puede hacer creando un gráfico (con la misma serie) y no mostrando el gráfico, solo la leyenda. es posible?