6

我使用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 限制，但我找不到使用它们仅获取可见值的方法。

有人做过吗？

很感谢任何形式的帮助。

谢谢！

4

2 回答 2

8

该zoom事件返回 scaleX min 和 max (as kminand kmax) 以及系列 min 和 max (as xminand xmax)。

使用xminand 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 团队。让我知道这是否解决了您的问题。

于 2015-12-28T17:46:58.593 回答
4

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

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

使用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%"
        });
于 2015-12-27T01:27:45.270 回答