ZingChart JS - 可視ノードを取得

Question

ZingChart libraryを使用してグラフを作成しましたが、すべてが期待どおりに機能しています。このグラフは、特定のコンセントの消費電力を時間とともに示します。

グラフがロードされると、その期間の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プロパティminとmax（kminとkmaxなど）と直列minとmax（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チームのです。これがあなたの問題を解決すれば教えてください。

Answer 2

これは最良の解決策ではありませんが、今のところ解決します。

誰でもこの疑惑コードを改善するためのヒントがある場合は、お気軽にコメントしてください。

日付にMoment.jsを使用して、ズームイベントから返された最小および最大の日付/時刻値を使用し、これら2つの日付/時刻の間の消費電力値を追加しました。

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