如何使用 Google Charts 顺序创建图表

Question

我已经尝试了很多方法来做到这一点，但没有成功。

我有一个 JavaScript 数组（实际上是一个用 JavaScript 解析的 JSON 数组），其中包含元素（数组中元素的类型并不重要）。 我想遍历数组并按顺序创建与数组中每个元素对应的图表。所有图表都添加到 div 容器中。

所以基本上，我想遍历数组，为每个元素创建一个图表，并将图表（显然有它自己的关联 div）附加到一个 div 容器。

例如，如果我有 3 个元素，则依次创建 3 个图表并将它们显示在容器 div 中。

我尝试过这样的事情：

//Loop through the nodes on this Bayesian Network
for(var k = 0; k < current_bn.nodes.length; k++)
{
//Set the global variable current_graph_node's value to this node.
current_graph_node = current_bn.nodes[k]; //current_bn.nodes[k];

var chart_id = current_graph_node.node_id+"_div";
var graph_div = document.createElement("div");
graph_div.setAttribute("id", chart_id);
graph_div.setAttribute("class", "chart_div");

//Call the function to draw the map.
google.load('visualization', '1', {'callback':'drawChart', 'packages':['corechart']});
document.getElementById("twins_div").appendChild(graph_div);
alert("YES BACK");

}//END looping each node

然后我将函数drawChart定义为：

function drawChart() 
{
//Get the chart type required to represent this node.
var node_name = current_graph_node.node_name;
var node_id = current_graph_node.node_id;
var node_desc = current_graph_node.node_desc;
var node_type = current_graph_node.node_type;
var node_chart_type = current_graph_node.node_chart_type;
//var chart_title = current_graph_node.node_chart_title;

//create a DataTable for this
var data_table = new google.visualization.DataTable();

//TODO Should redefine these! It should not be static!
data_table.addColumn('string', node_name);
data_table.addColumn('number', 'Probability');

//Loop through the marginals of this node.
for(var i=0; i < current_graph_node.marginals.length; i++)
{

    //Get this marginal details
    var marg = current_graph_node.marginals[i];
    var label = marg.label;
    var value = marg.value;
    data_table.addRow([label, value]);

}//END appending marginals.

//Set the display options for this chart
var options = 
{
    //TODO This should not be static. perhaps have in JSON config filee
            node_chart_title
    title: node_name+' (Absolute 0 - 100% Scale)'+'\n'+node_desc,
    legend: { position: "none" }
    //hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};

var id = node_id+"_div";
var chart=null;

if(node_type === "LabelledEN" || node_type === "BooleanEN"
    || node_type === "RankedEN" || node_type === "DiscreteRealEN" )
    chart = new google.visualization.BarChart(document.getElementById(id));
else
    chart = new google.visualization.LineChart(document.getElementById(id));

//Now draw the chart
chart.draw(data_table, options);


//document.getElementById("twins_div").draw(data, options));

}//END method drawchart

但它不起作用。它的作用是遍历整个数组，然后仅绘制最后一个元素的图表。

alert("YES BACK")，而不是在进入drawChart之后为每个元素调用alert("YES BACK")，它为数组中的每个元素调用alert("YES BACK")，然后在退出循环时绘制图表最后一个元素（我开始意识到，因为每次循环都会覆盖“current_graph_node”的值。

对于那些感兴趣的人，我正在使用 AgenaRisk 的 API 来读取贝叶斯网络并显示我被埋葬的节点的图表以表示它们的概率分布。 该数组是一个 JSON 数组。

Answer 1

扩展上面@enapupe 的评论，这大致是您想要的代码结构：

function init () {
    for(var k = 0; k < current_bn.nodes.length; k++) {
        //Set the global variable current_graph_node's value to this node.
        current_graph_node = current_bn.nodes[k]; //current_bn.nodes[k];

        var chart_id = current_graph_node.node_id+"_div";
        var graph_div = document.createElement("div");
        graph_div.setAttribute("id", chart_id);
        graph_div.setAttribute("class", "chart_div");

        //Call the function to draw the map.
        drawChart();
        document.getElementById("twins_div").appendChild(graph_div);
        alert("YES BACK");
    }//END looping each node
}
google.load('visualization', '1', {'callback': init, 'packages':['corechart']});