Javascript 如何在谷歌图表中动态创建多个水平条形图？

我是谷歌图表API的新手。 我想用它来可视化我关于谷歌Play商店评论的数据，包括多个问题、情绪和其他条件

我想建立一个水平条形图，其中x轴包含不同的应用程序，每个应用程序包含7个问题，y轴是不同应用程序中每个问题的情绪总和

我已经完成了在单个div元素中包含所有数据的水平图表。但是，为了方便用户，我希望在单个div元素中最多显示5个数据，如果当前数据集中有5个以上的数据，则动态创建div元素。最后，绘制图表的div元素将水平附加到另一个名为issueBar\u div的div元素。用户可以使用滚动条查看不同的图表

我所做的：

分区数据：

var title = ['APP'];
var issueRow = {{ projectissues|safe }}; // 7 different issues got from Django
var graph_data = [title.concat(issueRow)];
var cnt = 0;
var divide_row = [];
var tableRows = ... // tableRows is the app name mapping to sentiment sum which corresponding to different issue array dictionary.
// like the form  APP -> [20, 12, -1, 3, 5, 21, 57]
for (var app in tableRows) {
        cnt ++;                                
        var row = [app];
        for (var i = 0; i < tableRows[app].length; i++) {
            row.push(tableRows[app][i]);
        }
        if(cnt < 6){
            divide_row.push(row);
        }
        else{
            graph_data.push(divide_row);
            divide_row = [];
            cnt = 0;
        }
}

var title=['APP']；
var issueRow={{projectissues | safe}}；//从Django得到7种不同的问题
var图_数据=[title.concat（issueRow）]；
var-cnt=0；
var divide_row=[]；
var tableRows=…//tableRows是映射到不同问题数组字典对应的情绪和的应用程序名称。
//就像表单APP->[20,12，-1,3,5,21,57]
for（表格行中的var应用程序）{
cnt++；
var行=[app]；
对于（var i=0；i

创建div元素并绘制图表

为了构建一个使用滚动条的应用程序，我对issueBar\u div添加了一些限制

动态创建div元素并绘制

    function drawIssueBar() {
        var issueBar = document.getElementById("issueBar_div");
        // titleRow include the APP and other issue
        var titleRow = graph_data[0];
        delete_element();
        for(var i = 1;i<graph_data.length;i++){
            // create div element and set their attribute
            var my_div = document.createElement("div");
            my_div.id = "issuebar_" + i;
            my_div.style.display = "table-cell";
            // append this element to #issueBar_div
            issueBar.appendChild(my_div);
            // get the sliced data and push to total_data
            var row_data = graph_data[i];
            var total_data = [titleRow];
            for(var k=0;k<row_data.length;k++){
                total_data.push(row_data[k]);
            }
            // the new data container
            var data = new google.visualization.arrayToDataTable(total_data);
            var div_width = $("#home").width();
            var materialOptions = {
                height: 400,
                width: div_width,
                hAxis: {
                    title: 'Sum of sentiment'
                },
                vAxis: {
                    title: 'APP'
                },
                bars: 'vertical'
            };
            var materialChart = new google.charts.Bar(document.getElementById("issuebar_" + i));
            materialChart.draw(data, materialOptions);
        } 
    }
    // delete the div element
    function delete_element(){
        i = 1;
        while(true){
            element = document.getElementById("issuebar_" + i);
            if(element !== null){
                element.outerHTML = "";
                delete element;
                i++;
            }
            else{
                break;
            }
        }
    }

函数drawsissuebar（）{ var issueBar=document.getElementById（“issueBar_div”）； //标题包括应用程序和其他问题 var titleRow=图形_数据[0]； 删除_元素（）；

---

对于（var i=1；i所有。我已经解决了我的问题

我注意到Google图表文档中显示了一个非常重要的句子：

对于页面上的每个图表，添加对google.charts.setOnLoadCallback（）的调用，并将绘制图表的回调作为输入

所以我决定在绘制每个条形图时回调绘制方法

    function drawIssueChart(){
        // create the div element and draw the chart
        delete_element();
        var issueBar = document.getElementById('issueBar_div');
        for(var i = 0;i<graph_data.length;i++){
            var my_div = document.createElement("div");
            my_div.id = "issuebar_" + i;
            my_div.style.display = "table-cell";
            issueBar.appendChild(my_div);
            var row_data = graph_data[i];
            // use the drawIssueBar as a callback
            google.charts.setOnLoadCallback(drawIssueBar(row_data, my_div));
        }
    }

具体解决方案 1.我使用new函数作为回调函数。row_data是需要显示的数据，my_div是存储图表的div元素

var drawIssueBar = new Function("row_data", "my_div",
        "var data = google.visualization.arrayToDataTable(row_data);" +
        "var div_width = $('#home').width();" +
        "var materialOptions = {" + 
            "height: 400," + 
            "width: div_width," + 
            "hAxis: {" +
                "title: 'Sum of sentiment'" +
            "}," +
            "vAxis: {" +
                "title: 'APP'" +
            "}," +
            "bars: 'vertical'" +
        "};"+
        "var materialChart = new google.charts.Bar(my_div);" +
        "materialChart.draw(data, materialOptions);"
    );

2.重写数据处理

    var titleRow = ... // like the form of ["APP", "issue1", "issue2", ..."issue7"]
    var cnt = 0;
    var divide_row = [];

    for (var app in tableRows) {
        cnt ++;                                
        var row = [app].concat(tableRows[app]);
        if(cnt < 6){
            divide_row.push(row);
        }
        else{
            graph_data.push([titleRow].concat(divide_row));
            // console.log(graph_data[graph_data.length - 1]);
            divide_row = [];
            cnt = 0;
        }
    }

var titleRow=…//类似于[“应用程序”、“问题1”、“问题2”、“问题7”]
var-cnt=0；
var divide_row=[]；
for（表格行中的var应用程序）{
cnt++；
var row=[app].concat（tableRows[app]）；
if（cnt<6）{
分排。推（排）；
}
否则{
graph_data.push（[titleRow].concat（divide_row））；
//log（graph_data[graph_data.length-1]）；
除以行=[]；
cnt=0；
}
}

3.编写一个名为drawIssueChart的新函数来绘制所有条形图

    function drawIssueChart(){
        // create the div element and draw the chart
        delete_element();
        var issueBar = document.getElementById('issueBar_div');
        for(var i = 0;i<graph_data.length;i++){
            var my_div = document.createElement("div");
            my_div.id = "issuebar_" + i;
            my_div.style.display = "table-cell";
            issueBar.appendChild(my_div);
            var row_data = graph_data[i];
            // use the drawIssueBar as a callback
            google.charts.setOnLoadCallback(drawIssueBar(row_data, my_div));
        }
    }

函数drawIssueChart（）{
//创建div元素并绘制图表
删除_元素（）；
var issueBar=document.getElementById（'issueBar_div'）；
对于（var i=0；i所有。我已经解决了我的问题

我注意到Google图表文档中显示了一个非常重要的句子：

对于页面上的每个图表，添加对google.charts.setOnLoadCallback（）的调用，并将绘制图表的回调作为输入

所以我决定在绘制每个条形图时回调绘制方法

    function drawIssueChart(){
        // create the div element and draw the chart
        delete_element();
        var issueBar = document.getElementById('issueBar_div');
        for(var i = 0;i<graph_data.length;i++){
            var my_div = document.createElement("div");
            my_div.id = "issuebar_" + i;
            my_div.style.display = "table-cell";
            issueBar.appendChild(my_div);
            var row_data = graph_data[i];
            // use the drawIssueBar as a callback
            google.charts.setOnLoadCallback(drawIssueBar(row_data, my_div));
        }
    }

具体解决方案
1.我使用new函数作为回调函数。row_data是需要显示的数据，my_div是存储图表的div元素

var drawIssueBar = new Function("row_data", "my_div",
        "var data = google.visualization.arrayToDataTable(row_data);" +
        "var div_width = $('#home').width();" +
        "var materialOptions = {" + 
            "height: 400," + 
            "width: div_width," + 
            "hAxis: {" +
                "title: 'Sum of sentiment'" +
            "}," +
            "vAxis: {" +
                "title: 'APP'" +
            "}," +
            "bars: 'vertical'" +
        "};"+
        "var materialChart = new google.charts.Bar(my_div);" +
        "materialChart.draw(data, materialOptions);"
    );

2.重写数据处理

    var titleRow = ... // like the form of ["APP", "issue1", "issue2", ..."issue7"]
    var cnt = 0;
    var divide_row = [];

    for (var app in tableRows) {
        cnt ++;                                
        var row = [app].concat(tableRows[app]);
        if(cnt < 6){
            divide_row.push(row);
        }
        else{
            graph_data.push([titleRow].concat(divide_row));
            // console.log(graph_data[graph_data.length - 1]);
            divide_row = [];
            cnt = 0;
        }
    }

var titleRow=…//类似于[“应用程序”、“问题1”、“问题2”、“问题7”]
var-cnt=0；
var divide_row=[]；
for（表格行中的var应用程序）{
cnt++；
var row=[app].concat（tableRows[app]）；
if（cnt<6）{
分排。推（排）；
}
否则{
graph_data.push（[titleRow].concat（divide_row））；
//log（graph_data[graph_data.length-1]）；
除以行=[]；
cnt=0；
}
}

3.编写一个名为drawIssueChart的新函数来绘制所有条形图

    function drawIssueChart(){
        // create the div element and draw the chart
        delete_element();
        var issueBar = document.getElementById('issueBar_div');
        for(var i = 0;i<graph_data.length;i++){
            var my_div = document.createElement("div");
            my_div.id = "issuebar_" + i;
            my_div.style.display = "table-cell";
            issueBar.appendChild(my_div);
            var row_data = graph_data[i];
            // use the drawIssueBar as a callback
            google.charts.setOnLoadCallback(drawIssueBar(row_data, my_div));
        }
    }

函数drawIssueChart（）{
//创建div元素并绘制图表
删除_元素（）；
var issueBar=document.getElementById（'issueBar_div'）；
对于（var i=0；iHi@WhiteHat，我已经尝试过了。遗憾的是结果仍然是一样的。没有，那里只有不相关的警告。-->
graph\u data[0]
--它返回数组还是单个值？它返回数组，如[“APP”、“issue1”、“issue2”、“issue3”…“issue7”]。它将是条形图中每个条形图的列名。嗨@WhiteHat，我已经尝试过了。遗憾的是结果没有改变。没有，那里只有不相关的警告。-->
graph\u data[0]
--它返回数组还是单个值？它返回数组，如[“APP”、“issue1”、“issue2”、“issue3”的形式…“issue7”]。它将是条形图中每个条形图的列名。谷歌图表文档参考：谷歌图表文档参考：