ZingChart JS -获取可见节点

Question

我使用ZingChart库创建了一个图表，一切都如愿以偿。该图表用于显示特定插座的功耗随时间的变化。

在加载图形时，系统将显示该时间段的kWh消耗。

用户能够放大和缩小图形，当出现这种情况时，我想显示图表中显示的这段时间的耗电量。

我正在使用变焦事件：

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

当我放大或缩小时，函数getseriesdata、getseriesdata和getplotvalue总是返回完整的图形值，而不仅仅是可见的。

P对象给出了新的x和y限制，但我无法找到一种方法来使用它们只获得可见值。

有人做过这个吗？

任何帮助都是非常感谢的。

谢谢!

Answer 1

zoom事件返回scaleX min和max (作为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团队的一员。如果这能解决你的问题请告诉我。

Answer 2

所以，这不是最好的解决方案，但现在可以。

如果有人有任何技巧来改进这个垃圾代码，请，请随时评论。

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