动态创建和追加谷歌图表到动态创建的div在jquery

Question

我有以下代码，其中我遍历项目列表并创建动态div元素。然后，在每个循环结束时，我想使用google visualisations创建条形图并将其附加到创建的divs。但是，我收到以下错误。

集装箱没有被定义

我是新来google visualisations。我想知道这是否可能。下面是我的代码：

function drawBarChart() { 

    PAGES = _.keys(_.countBy(perct_by_page_COLL_vs_NCOLL, function(data) { return data.PAGE_SHORT; })); 

    $.each(PAGES, function(index, item){ 
     $("#BLOQUES").append("<div class='" + item + "'></div>") 
     page_sub = $.grep(perct_by_page_COLL_vs_NCOLL, function(n, i) {return n.PAGE_SHORT === item;}); 

     container = $("#BLOQUES").find('.' + item) 

     container.append('<div>' + page_sub[0].PAGE_TITLE + '</div>') 
     container.append("<div class='barchart'></div>") 

     x = page_sub[0] 
     a = x['PAGE_SHORT'] 
     b = x['PERC_ALL'] 
     c = x['PERC_NCOLL'] 
     d = x['PERC_ALL'] 

     var data = google.visualization.arrayToDataTable([ 
      ['PAGE_SHORT', 'PERC_ALL', 'PERC_COLL', 'PERC_NCOLL'], [a, b, c, d] 
     ]); 

     var options = { 
      title: '', 
      chartArea: {width: '50%'}, 
      hAxis: { 
       title: 'Total Population', 
       minValue: 0 
      }, 
      vAxis: { 
       title: 'City' 
      } 
     }; 

     var chart = new google.visualization.BarChart(container.find('.barchart')); 
     chart.draw(data, options); 

    }); 
} 

Answer 1

图表期待特定的DOM元素
不一个jquery参考，这基本上是元素

的阵列建议使用环路索引到一个id分配给图表元件

container.append("<div id='chart" + index + "' class='barchart'></div>") 

然后使用id以创建图表

var chart = new google.visualization.BarChart($('#chart' + index)[0]); 

全部片段...

function drawBarChart() { 

    PAGES = _.keys(_.countBy(perct_by_page_COLL_vs_NCOLL, function(data) { return data.PAGE_SHORT; })); 

    $.each(PAGES, function(index, item){ 
    $("#BLOQUES").append("<div class='" + item + "'></div>") 
    page_sub = $.grep(perct_by_page_COLL_vs_NCOLL, function(n, i) {return n.PAGE_SHORT === item;}); 

    container = $("#BLOQUES").find('.' + item) 

    container.append('<div>' + page_sub[0].PAGE_TITLE + '</div>') 
    container.append("<div id='chart" + index + "' class='barchart'></div>") 

    x = page_sub[0] 
    a = x['PAGE_SHORT'] 
    b = x['PERC_ALL'] 
    c = x['PERC_NCOLL'] 
    d = x['PERC_ALL'] 

    var data = google.visualization.arrayToDataTable([ 
     ['PAGE_SHORT', 'PERC_ALL', 'PERC_COLL', 'PERC_NCOLL'], [a, b, c, d] 
    ]); 

    var options = { 
     title: '', 
     chartArea: {width: '50%'}, 
     hAxis: { 
      title: 'Total Population', 
      minValue: 0 
     }, 
     vAxis: { 
      title: 'City' 
     } 
    }; 

    var chart = new google.visualization.BarChart($('#chart' + index)[0]); 
    chart.draw(data, options); 

    }); 
}