Флот не будет рисовать() в динамически добавленном элементе

Question

Я работаю над панелью статистики, и я хотел бы заполнить отдельные диаграммы + панели таблиц с помощью Ajax. Первоначально я только статически определил HTML пустых панелей, но с тех пор я начал шаблонирования их рули Flot просто не хочет сотрудничать:

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 для вашего графика. Это должно быть "#servertypes-chart" для id-selector.

Изменить

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

в

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