ZingChart JS - 获取可见节点

Question

我使用 ZingChart library 创建了一个图形，一切都按预期工作。该图用于显示特定插座随时间变化的功耗。

加载图表后，系统会显示该时间段的 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、getseriesvalues 和 getplotvalues 总是 return 完整的图形值，而不仅仅是可见的值。

p 对象为我提供了新的 x 和 y 限制，但我找不到使用它们来仅获取可见值的方法。

有人做过吗？

非常感谢任何帮助。

谢谢！

Answer 1

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

如果有人有任何改进此垃圾代码的提示，请随时发表评论。

使用 Moment.js 作为日期，我使用了缩放事件返回的最小和最大 date/time 值，并在这两个 date/time 之间添加了功耗值。

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

zoom 事件 returns scaleX 的最小值和最大值（如 kmin 和 kmax）以及序列的最小值和最大值（如 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
});

You can view a working demo here.

完全披露：我在 ZingChart 团队。如果这能解决您的问题，请告诉我。

ZingChart JS - 获取可见节点

ZingChart JS - Get visible nodes

javascript

plot

graph

zooming

zingchart