ZingChart JS - Get sichtbare Knoten

Question

Ich erstellte ein Diagramm mit ZingChart library und alles funktioniert wie erwartet. Die Grafik zeigt den Stromverbrauch einer bestimmten Steckdose im Zeitverlauf.

Wenn der Graph geladen ist, zeigt das System den kWh-Verbrauch für diesen Zeitraum an.

Der Benutzer war in der Lage, die Grafik zu vergrößern und zu verkleinern, und wenn das passiert, würde ich gerne den Stromverbrauch für den in der Grafik gezeigten Zeitraum zeigen.

Ich bin mit dem Zoom-Event:

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%" 
     }); 

Als ich vergrößern oder verkleinern, die Funktionen getseriesdata, getseriesvalues ​​und getplotvalues ​​immer die volle Diagrammwerte zurückgeben, nicht nur die sichtbaren.

Das p-Objekt gibt mir die neuen x- und y-Grenzen, aber ich finde keine Möglichkeit, sie zu verwenden, um nur die sichtbaren Werte zu erhalten.

Hat jemand das getan?

Jede Hilfe wird sehr geschätzt.

Danke!

Answer 1

Die zoom Ereignis kehrt sowohl die scaleX min und max (als kmin und kmax) und die Reihe min und max (als xmin und xmax).

Mithilfe der xmin und xmax können Sie einfach die Werte-Array in Scheiben schneiden, um die sichtbaren Werte zu erhalten.

Hier ist ein Beispiel.

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.

Vollständige Offenlegung: Ich auf dem ZingChart Team bin. Lassen Sie mich wissen, ob dies Ihr Problem löst.

Answer 2

Also, nicht die beste Lösung, aber es wird für jetzt tun.

Wenn jemand irgendwelche Tipps zur Verbesserung dieses Mist-Codes hat, bitte, fühlen Sie sich frei zu kommentieren.

Unter Verwendung von Moment.js für die Daten habe ich die vom Zoom-Ereignis zurückgegebenen minimalen und maximalen Datums-/Zeitwerte verwendet und die Stromverbrauchswerte zwischen diesen beiden Datums-/Uhrzeitangaben hinzugefügt.

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%" 
     });