ZingChart JS — получить видимые узлы

Я создал график, используя библиотеку ZingChart, и все работает, как и ожидалось. График используется для отображения энергопотребления конкретной розетки с течением времени.

Когда график загружен, система показывает потребление кВтч за этот период времени.

У пользователя была возможность увеличивать и уменьшать график, и когда это произойдет, я хотел бы показать энергопотребление за этот период времени, показанный на графике.

Я использую событие масштабирования:

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%"
        });

Когда я увеличиваю или уменьшаю масштаб, функции geteriesdata, getseriesvalues ​​и getplotvalues ​​всегда возвращают полные значения графика, а не только видимые.

Объект p дает мне новые пределы x и y, но я не могу найти способ использовать их для получения только видимых значений.

Кто-нибудь сделал это?

Любая помощь очень ценится.

Спасибо!


javascript graph plot zooming zingchart
person cdonate    schedule 26.12.2015    source источник

Ответы (2)


arrow_upward
8
arrow_downward

Событие zoom возвращает минимум и максимум масштабаX (как kmin и kmax), а также серию min и max (как xmin и xmax).

Используя xmin и xmax, вы можете просто разрезать массив значений, чтобы получить видимые значения.

Вот пример.

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

Вы можете просмотреть рабочую демонстрацию здесь.

Полное раскрытие: я в команде ZingChart. Дайте мне знать, если это решит вашу проблему.

person Justin Bogart    schedule 28.12.2015

arrow_upward
4
arrow_downward

Так что не лучшее решение, но пока сойдет.

Если у кого-то есть какие-либо советы по улучшению этого дерьмового кода, пожалуйста, не стесняйтесь комментировать.

Используя Moment.js для дат, я использовал минимальное и максимальное значения даты/времени, возвращенные из события масштабирования, и добавил значения энергопотребления между этими двумя датами/временем.

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%"
        });
person cdonate    schedule 27.12.2015