javascript - examples - ZingChart JS-Obtenga nodos visibles

zingchart examples

Question

Creé un gráfico usando la biblioteca ZingChart y todo está funcionando como se esperaba. El gráfico se usa para mostrar el consumo de energía de una salida específica a lo largo del tiempo.

Cuando se carga el gráfico, el sistema muestra el consumo de kWh para ese período de tiempo.

El usuario tenía la capacidad de acercar y alejar el gráfico, y cuando eso ocurra, me gustaría mostrar el consumo de energía para ese período de tiempo que se muestra en el gráfico.

Estoy usando el evento de zoom:

zingchart.render({ 
            id:''chartDiv'',
            data:graphset,
            height:500,
            events:{
                zoom:function(p){
                    console.log(p);
                    console.log(zingchart.exec(p.id, ''getseriesdata'', {}));
                    console.log(zingchart.exec(p.id, ''getseriesvalues'', {}));
                    console.log(zingchart.exec(p.id, "getplotvalues", {}));
                }
            },
            width:"100%"
        });

Cuando acerco o alejé, las funciones getseriesdata, getseriesvalues ​​y getplotvalues ​​siempre devuelven los valores completos del gráfico, no solo los visibles.

El objeto p me da los nuevos límites xey, pero no puedo encontrar la manera de usarlos para obtener solo los valores visibles.

¿Alguien ha hecho esto?

Cualquier ayuda es muy apreciada.

¡Gracias!

Answer 1

Por lo tanto, no es la mejor solución, pero lo hará por ahora.

Si alguien tiene algún consejo para mejorar este código de mierda, por favor, siéntase libre de comentar.

Utilizando Moment.js para las fechas, utilicé los valores mínimo y máximo de fecha / hora devueltos del evento de zoom y agregué los valores de consumo de energía entre estas dos fechas / horas.

zingchart.render({ // Render Method[3]
            id:''chartDiv'',
            locale:"MYLOCALE",
            data:graphset,
            height:500,
            events:{
                zoom:function(p){

                    var dateInit = moment(p.kmin).format("YYYY-MM-DD HH:mm:ss");
                    var dateEnd = moment(p.kmax).format("YYYY-MM-DD HH:mm:ss");
                    var newTotal = 0.0;
                    var arrayTotal = 0;

                    function getNewConsumption(element, index, array) {
                        if( moment(element[5]).isAfter(dateInit) && moment(element[5]).isBefore(dateEnd) ){
                            newTotal = newTotal + element[2];
                            arrayTotal++;
                        }
                    }

                    parseJSONReturn.forEach(getNewConsumption);

                    var new_average_consumption  = newTotal / arrayTotal;
                    var new_ms = moment(dateEnd).diff(moment(dateInit));
                    var new_d = moment.duration(new_ms).asHours();
                    var new_total_kwh = new Big((new_average_consumption * new_d) / 1000);

                    $("#kwh_consumption").empty().text(new_total_kwh.toFixed(2));
                }
            },
            width:"100%"
        });

Answer 2

El evento de zoom devuelve tanto la escalaX min y max (como kmin y kmin ) como las series min y max (como xmin y xmax ).

Usando xmin y xmax , puede simplemente cortar la matriz de valores para obtener los valores visibles.

Aquí hay un ejemplo.

zingchart.bind(''myChart'', ''zoom'', function(p) {
    var start = p.xmin;
    var end = p.xmax + 1;
    var series = zingchart.exec(''myChart'', ''getseriesvalues'')[0];
    series = series.slice(start, end+1);
    // You can now do whatever you want with the series values
});

Puede ver una demostración en funcionamiento aquí.

Divulgación completa: estoy en el equipo de ZingChart. Avísame si esto resuelve tu problema.