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

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

警报（“YES BACK”），而不是在进入drawChart后为每个人调用它，它为数组中的每个元素调用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']});

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

1 个答案: