javascript - ZingChart JS - 获取可见节点

Question

我使用 ZingChart library 创建了一个图表一切都按预期进行。该图用于显示特定 socket 随时间变化的功耗。

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

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

有人做过吗？

非常感谢任何帮助。

谢谢!

Answer 1

zoom 事件返回 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 团队的一员。如果这能解决您的问题，请告诉我。