javascript - 如何在Google Chart中动态创建多个水平条形图？

Question

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

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

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

我做了什么:

1. 分区数据:

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

2. 创建 div 元素并绘制图表

为了构建滚动条的使用，我向 issueBar_div 添加了一些限制。

<div id="issueBar_div" style="height:400px; overflow-x:scroll; overflow-y:hidden";></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;
            }
        }
    }

当前问题:

基本上，创建的 div 元素会按预期创建，但图表只会显示一个图表，如下所示。

The successful chart

The fail part when move the scrollbar to right

如何解决这个问题？

任何答案将不胜感激。谢谢。

Answer 1

全部。我已经解决了我的问题!!!

我注意到 Google Chart 文档上显示了一个非常重要的句子:

对于页面上的每个图表，添加对 google.charts.setOnLoadCallback() 的调用以及将图表绘制为输入的回调

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

具体解决方案

1.我使用new Function作为回调函数。 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;
        }
    }

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

结果

The successful chart

Another successful chart when moving the scrollbar to right

我从这个解决方案中学到了很多东西!

希望可以帮助遇到这个问题的人。