Javascript 动态创建google图表并将其附加到jquery中动态创建的div中

我有下面的代码，在其中我遍历一个项目列表并创建动态div元素。然后，在每个循环的末尾，我想使用

googlevisualizations

创建一个条形图，并将其附加到创建的

divs

中。但是，我收到以下错误

未定义容器

我不熟悉

googlevisualizations

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

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);

    });
}

function-drawerchart（）{
PAGES=.keys（u.countBy（perct_by_page_COLL_vs_NCOLL，函数（data）{return data.page_SHORT；}））；
$。每个（页面、功能（索引、项目）{
$（“#BLOQUES”）。追加（“”）
page_sub=$.grep（perct_by_page_COLL_vs_NCOLL，函数（n，i）{return n.page_SHORT==item；}）；
容器=$（“#BLOQUES”）.find（“..”+项）
container.append（“”+页码子[0]。页码标题+“”）
container.append（“”）
x=第_页子[0]
a=x[“页短”]
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]
]);
变量选项={
标题：“”，
图表区：{宽度：'50%}，
哈克斯：{
标题：“总人口”，
最小值：0
},
言辞：{
标题：“城市”
}
};
var chart=newgoogle.visualization.BarChart（container.find（'.BarChart'））；
图表绘制（数据、选项）；
});
}

图表需要一个特定的dom元素
不是jquery引用，它基本上是一个元素数组

建议使用循环索引为图表元素分配id

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

完整片段

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);

  });
}

function-drawerchart（）{
PAGES=.keys（u.countBy（perct_by_page_COLL_vs_NCOLL，函数（data）{return data.page_SHORT；}））；
$。每个（页面、功能（索引、项目）{
$（“#BLOQUES”）。追加（“”）
page_sub=$.grep（perct_by_page_COLL_vs_NCOLL，函数（n，i）{return n.page_SHORT==item；}）；
容器=$（“#BLOQUES”）.find（“..”+项）
container.append（“”+页码子[0]。页码标题+“”）
container.append（“”）
x=第_页子[0]
a=x[“页短”]
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]
]);
变量选项={
标题：“”，
图表区：{宽度：'50%}，
哈克斯：{
标题：“总人口”，
最小值：0
},
言辞：{
标题：“城市”
}
};
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);

  });
}