ZingChart JS - 获取可见节点

我使用ZingChart library创建了一个图表，并且所有内容都按预期工作。该图用于显示特定插座随时间的功耗。ZingChart JS - 获取可见节点

当图表加载时，系统显示该时间段的耗电量。

用户能够放大和缩小图形，当发生这种情况时，我想显示图形中显示的那段时间的功耗。

我使用变焦事件：

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

有没有人这样做？

任何帮助，非常感谢。

谢谢！

来源

2015-12-26 cdonate

的zoom事件返回两者的scaleX min和max（如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队。让我知道这是否解决了你的问题。

来源

2015-12-28 17:46:58

非常好，谢谢。 – cdonate

所以，不是最好的解决方案，但它现在会做。

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

对日期使用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-27 01:27:45 cdonate

ZingChart JS - 获取可见节点

回答

相关问题