檢查數據的所有圖表和隱藏那些有沒有

Question

我想檢查我與highcharts做出圖表，如果他們有負荷每任何數據重新繪製圖形的。

我做了這個代碼工作：

(function (H) { 

    var chartPrototype = H.Chart.prototype; 

    // Hide graph if there are no data, show it othervise 
    function handleNoData() { 
     name = $(".graph_identifier").attr("data-name"); 

     if (this.series.length > 0 && this.series[0].data.length > 0) { 
      $('#message-'+name).fadeOut(250, function(){ 
       $('#container-'+name+', #table-'+name).fadeIn(250); 
      });    
     } else { 
      $('#container-'+name+', #table-'+name).fadeOut(250, function(){ 
       $('#message-'+name).fadeIn(250); 
      });    
     } 
    } 

    // Add event listeners 
    chartPrototype.callbacks.push(function (chart) { 
     H.addEvent(chart, 'load', handleNoData); 
     H.addEvent(chart, 'redraw', handleNoData); 
    }); 

}(Highcharts)); 

的問題是，這個代碼的工作只有當你每頁單圖。但在我的主頁上有5個不同的圖表，當其中一個圖表沒有數據時，它隱藏所有圖表。

我試圖修改代碼，並通過圖表到handleNoData功能是這樣的：

H.addEvent(chart, 'load', handleNoData(chart)); 
H.addEvent(chart, 'load', printPage); 
H.addEvent(chart, 'redraw', handleNoData(chart)); 

但後來我得到這個錯誤：

Uncaught TypeError: Cannot read property 'call' of undefined

我想它，因爲只有你可以做的事情是傳遞函數名稱而不是參數（如果可以的話，那麼我沒有發現他們的API如何）。

現在我不得不用這個每一個曲線圖，這是不是我想要什麼，也不能正確檢測重繪：

chart = $("#container").highcharts(); 
$(chart).on('load redraw', handleNoData(chart)); 

有誰知道知道如何實現這一目標？

我花了很長時間挖掘他們的API和谷歌，但我找不到任何東西。

謝謝。

編輯：

我設法找到問題並解決它。它是圖形標識符...函數本身按預期工作。

Answer 1

好吧，我設法相當迅速地找到解決方案，所以我張貼充分的工作例如：

<div id="container-graph_name" class="graph-container" data-name="graph_name"></div> 
<div id="message-graph_name" class="message-container">No data to show</div> 

<script> 
    (function (H) { 

     var chartPrototype = H.Chart.prototype; 

     // Hide graph if there are no data, show it othervise 
     function handleNoData() { 
      var name = $(this.renderTo).attr("data-name"); 

      if (this.series.length > 0 && this.series[0].data.length > 0) { 
       $('#message-'+name).fadeOut(250, function(){ 
        $('#container-'+name+').fadeIn(250); 
       }); 
      } else { 
       $('#container-'+name+').fadeOut(250, function(){ 
        $('#message-'+name).fadeIn(250); 
       }); 
      } 
     } 

     // Add event listeners 
     chartPrototype.callbacks.push(function (chart) { 
      H.addEvent(chart, 'load', handleNoData); 
      H.addEvent(chart, 'redraw', handleNoData); 
     }); 

    }(Highcharts)); 
</script> 

這的確是與圖表本身的識別問題。此代碼將採用容器的data-name屬性的圖表名稱，並使用它顯示/隱藏ID爲container-和message-且以data-name屬性中設置的名稱結尾的div。

你唯一需要做的就是讓每個圖形和消息設置上面指定的唯一ID。

希望這有助於某人。