ZingChart JS - Nhận các nút hiển thị

Question

Tôi đã tạo Biểu đồ bằng cách sử dụng ZingChart library và mọi thứ đang hoạt động như mong đợi. Biểu đồ được sử dụng để hiển thị mức tiêu thụ điện năng của một cửa hàng cụ thể theo thời gian.

Khi đồ thị được tải, hệ thống sẽ hiển thị mức tiêu thụ kWh trong khoảng thời gian đó.

Người dùng có thể phóng to và thu nhỏ biểu đồ và khi điều đó xảy ra, tôi muốn hiển thị mức tiêu thụ điện cho khoảng thời gian đó được hiển thị trong biểu đồ.

Tôi đang sử dụng sự kiện zoom:

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

Khi tôi phóng to hoặc thu, các chức năng getseriesdata, getseriesvalues ​​và getplotvalues ​​luôn trả lại giá trị đồ thị đầy đủ, không chỉ là những người nhìn thấy được.

Đối tượng p cho tôi giới hạn x và y mới, nhưng tôi không thể tìm cách sử dụng chúng để chỉ nhận giá trị hiển thị.

Có ai đã làm điều này không?

Bất kỳ trợ giúp nào được đánh giá rất nhiều.

Cảm ơn!

Answer 1

Các zoom lợi nhuận sự kiện cả hai phút scaleX và max (như kmin và kmax) và hàng loạt min và max (như xmin và xmax).

Sử dụng xmin và xmax, bạn có thể đơn giản cắt mảng giá trị để nhận giá trị hiển thị.

Đây là một ví dụ.

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.

Họ và tiết lộ: Tôi đang trên đội ZingChart. Hãy cho tôi biết nếu điều này giải quyết được vấn đề của bạn.

Answer 2

Vì vậy, không phải là giải pháp tốt nhất, nhưng nó sẽ làm ngay bây giờ.

Nếu có ai có bất kỳ mẹo nào để cải thiện mã crap này, vui lòng, hãy bình luận.

Sử dụng Moment.js cho các ngày, tôi đã sử dụng giá trị ngày/giờ tối thiểu và tối đa được trả lại từ sự kiện thu phóng và thêm giá trị tiêu thụ điện giữa hai ngày/giờ này.

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