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 - 獲取可見節點

回答

相關問題