Flot不會在動態添加的元素中繪製（）

Question

我正在處理統計信息顯示板，我想用Ajax填充單個圖表+表格面板。本來我剛靜態定義空面板的HTML，但自從我開始把手模板化他們剛剛海軍報不希望合作：

Error: Invalid dimensions for plot, width = null, height = null 

代碼：

<style type="text/css">} 
    .dashboard-chart { min-height: 150px; } 
</style> 
<div class="row" id="dashboard-container"></div> 
<script id="dashboard-template" type="text/x-handlebars-template"> 
    <div id="{{dashboard-id}}" class="dashboard-section col-md-6"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"><h1 class="panel-title">{{dashboard-title}}</h3></div> 
      <div class="panel-body row-fluid"> 
       <div id="{{dashboard-id}}-chart" class="dashboard-chart col-md-3"></div> 
       <div class="col-md-9"> 
        <table id="{{dashboard-id}}-table" class="dashboard-table table table-striped"> 
         <thead>{{{dashboard-thead}}}</thead> 
         <tbody></tbody> 
        </table> 
        {{{dashboard-content}}} 
       </div> 
      </div> 
     </div> 
    </div> 
</script> 
<script type="text/javascript"> 
var baseurl = "/foo_app/" 
$(function(){ 
    // get template 
    var template = Handlebars.compile($("#dashboard-template").html()); 
    // define dashboards 
    var dashboards = [ 
     { 
      templateargs: { 
       "dashboard-id": "servertypes", 
       "dashboard-title": "Server Types", 
       "dashboard-thead": "<tr><th>Type</th><th>Count</th></tr>", 
       "dashboard-content": "" 
      }, 
      ajaxurl: baseurl + "ajax/test.php?type=servertypes", 
      callback: function(data) { 
       console.log(chart); 
       console.log(chart.width()); 
       console.log(chart.height()); 
       $.plot(chart, data, chart_options); // !! -- problem here -- !! 
       for(i=0;i<data.length;i++) { 
        table.append("<tr><td>"+data[i]['label']+"</td><td>"+data[i]['data']+"</td></tr>"); 
       } 
      } 
     } 
    ]; 
    // define chart options 
    var chart_options = { 
     series: { pie: { show: true, innerRadius: 0.5 } }, 
     legend: { show: false } 
    } 

    for(i=0, l=dashboards.length; i<l; i++){ 
     // append dash item 
     $("#dashboard-container").append(template(dashboards[i]["templateargs"])); 
     // get current dash id 
     var cur_id = dashboards[i]["templateargs"]["dashboard-id"]; 
     // get chart/table references 
     var chart = $(cur_id+"-chart"); 
     var table = $(cur_id+"-table tbody"); 
     // request data 
     $.ajax({ 
      type: "GET", 
      url: dashboards[i]["ajaxurl"], 
      error: function() { alert('AJAX error'); }, 
      success: dashboards[i]["callback"] 
     }); 
    } 
}); 
</script> 

的如下呈現在DOM源：

<div id="servertypes" class="dashboard-section col-md-6"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"><h1 class="panel-title">Server Types</h1></div> 
     <div class="panel-body row-fluid"> 
      <div id="servertypes-chart" class="dashboard-chart col-md-3"></div> 
      <div class="col-md-9"> 
       <table id="servertypes-table" class="dashboard-table table table-striped"> 
        <thead><tr><th>Type</th><th>Count</th></tr></thead> 
        <tbody></tbody> 
       </table> 

      </div> 
     </div> 
    </div> 
</div> 

的chart對象轉儲出到控制檯爲：

Object { length: 0, prevObject: Object, context: HTMLDocument → openstack_inventory, selector: "servertypes-chart" } 

但寬度和高度都轉儲到控制檯作爲null。我試着通過模板中的style屬性專門設置寬度和高度，但我仍然得到相同的錯誤。

Answer 1

根據您的控制檯輸出：selector: "servertypes-chart"這導致您的圖表找不到html元素。對於id-selector，這需要"#servertypes-chart"。

變化

var chart = $(cur_id+"-chart"); 
var table = $(cur_id+"-table tbody"); 

到

var chart = $("#" + cur_id+"-chart"); 
var table = $("#" + cur_id+"-table tbody");