Javascript 如何使用Google图表按顺序创建图表

我已经尝试了很多东西，但都没有成功

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

因此，基本上，我想在数组中循环，为每个元素创建一个图表，并将图表（显然有自己的相关div）附加到div容器中

例如，如果我有3个元素，那么按顺序创建3个图表，并在container 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

//循环遍历此贝叶斯网络上的节点
对于（var k=0；k

然后我将函数图定义为：

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

函数绘图图（）
{
//获取表示此节点所需的图表类型。
var node_name=当前_图_node.node_name；
var node_id=当前_图_node.node_id；
var node_desc=当前图_node.node_desc；
var node_type=当前_图_node.node_type；
变量节点\图表\类型=当前\图形\节点。节点\图表\类型；
//var chart\u title=当前图\u node.node\u chart\u title；
//为此创建一个数据表
var data_table=new google.visualization.DataTable（）；
//TODO应该重新定义这些！它不应该是静态的！
data\u table.addColumn（'string'，node\u name）；
数据_table.addColumn（'number'，'Probability'）；
//循环通过此节点的边缘。
对于（var i=0；i<当前图\u节点.marginals.length；i++）
{
//获取这些边缘细节
var marg=当前图形节点。marginals[i]；
var标签=marg.label；
var值=边际值；
数据_table.addRow（[标签，值]）；
}//末端附加边缘。
//设置此图表的显示选项
变量选项=
{
//TODO这不应该是静态的。可能在JSON配置文件中有
节点\图表\标题
标题：节点名称+'（绝对0-100%比例）+'\n'+节点描述，
图例：{位置：“无”}
//hAxis:{title:'Year'，titleTextStyle:{color:'red'}
};
变量id=节点id+“\u div”；
var图表=空；
if（node_type==“LabelledEN”| | node_type====“BooleanEN”
||节点_类型==“RankedEN”| |节点_类型==“DiscreteRealEN”）
chart=新的google.visualization.BarChart（document.getElementById（id））；
其他的
chart=新的google.visualization.LineChart（document.getElementById（id））；
//现在画图表
图表绘制（数据表、选项）；
//document.getElementById（“twins_div”）.draw（数据、选项）；
}//结束法绘图图

但它不起作用。它所做的是在整个数组中循环，然后只为最后一个元素绘制图表

警报（“YES BACK”），而不是在进入drawChart后为每个元素调用警报（“YES BACK”），它为数组中的每个元素调用警报（“YES BACK”），然后在退出循环时，为最后一个元素绘制图表（我意识到这一点，因为“current_graph_node”的值在循环中每次都被覆盖

对于那些感兴趣的人，我正在使用AgenaRisk的API来阅读贝叶斯网络，并显示我所嵌入的节点的图表，以表示它们的概率分布。

---

该数组是一个JSON数组。

展开上面@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']});

函数初始化（）{
对于（var k=0；k

只需尝试在jsfiddle.net中修改一些基础知识，提供部分JSON数据。谢谢，但实际上我对代码中的JSON位没有任何问题。一切都很好。它只是使用谷歌图表顺序绘制图表，但不起作用。JSON位（每个节点元素）只包含有关图表上要使用的数据的信息。我知道如何检索。我唯一的问题是顺序绘制图表部分。@enapupe非常感谢该网站。我实际上并不知道。JSON部分是为了帮助人们在jsfiddle.net中运行代码，它使调试变得更容易。此外，我也不知道想想google.load（'visualization'）将运行不止一次，因为这是对库的调用，只会触发一次回调..for循环应该在回调中。非常感谢您的帮助。很抱歉这么晚才响应。最近非常忙。我刚刚尝试了您的建议，但它仍然不适用于我：（每次，我意识到，当它到达以下行时就会停止：

chart=new google.visualization.ColumnChart（document.getElementById（id））；

这就是错误发生的地方（我不知道）。在jsfiddle.net中修改代码，以便我们可以帮助您。您也可以在Chrome或Firefox中打开该页面并打开它。）