Javascript 当通过数组循环显示多个图形时，Google Visualization仅显示一个图形_Javascript_Visualization

Javascript 当通过数组循环显示多个图形时，Google Visualization仅显示一个图形

javascript

Javascript 当通过数组循环显示多个图形时，Google Visualization仅显示一个图形,javascript,visualization,Javascript,Visualization,我已经看到了很多关于在一个页面中创建多个图形的讨论，当您知道有多少个图形被预先创建时。我正在创建一个页面，我需要在其中绘制几个项目，并且事先不知道会有多少项目。最后一张图总是显示出来，前面的不显示。在调试时，我可以看到在调用draw函数时显示所有的图形，但在调用下一个draw函数时，它会消失。这可能是件愚蠢的事，但我找了好几个小时都没找到答案。更改到测试环境（版本1.1）会使所有这些内容都显示出来，但不会显示悬停文本。有什么建议吗？代码是整个过程的一部分，因此我尝试使用硬编码数据创建压缩版本：

我已经看到了很多关于在一个页面中创建多个图形的讨论，当您知道有多少个图形被预先创建时。我正在创建一个页面，我需要在其中绘制几个项目，并且事先不知道会有多少项目。最后一张图总是显示出来，前面的不显示。在调试时，我可以看到在调用draw函数时显示所有的图形，但在调用下一个draw函数时，它会消失。这可能是件愚蠢的事，但我找了好几个小时都没找到答案。更改到测试环境（版本1.1）会使所有这些内容都显示出来，但不会显示悬停文本。有什么建议吗？代码是整个过程的一部分，因此我尝试使用硬编码数据创建压缩版本：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Summary</title> 
  <link href="assets/css/bootstrap.css" rel="stylesheet">
  <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</head> 
<body> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

        google.load('visualization', '1', {'packages':['corechart']});
        google.setOnLoadCallback(summary_go);

        function summary_go() {

            /* skipping a bunch of code that does some queries and pulls the data into arrays for the graphs */
            var graph_data = new Array(
                {title: "Potassium SerPl-sCnc",
                    head: ["Date","mmol/L"],
                    data: [[new Date("2004", "09", "23"),3.6],
                        [new Date("2005", "08", "31"),3.5],
                        [new Date("2007", "09", "01"),3.4],
                        [new Date("2008", "01", "11"),4.1],
                        [new Date("2009", "09", "30"),3.5]]},

                {title: "Albumin/Creat Ur-mRto",
                    head: ["Date","ug/mg{creat}"],
                    data: [[new Date("2004", "09", "23"),5],
                        [new Date("2009", "09", "30"),8]]});

            var labdiv = document.getElementById("lab-list");
            for (var i = 0; i < graph_data.length; i++) {
                labdiv.innerHTML += "<li>" + graph_data[i]['title'] + "<div id=\"" + graph_data[i]['title'] + "\"></div></li>";

                var dataTable = new google.visualization.DataTable();
                dataTable.addColumn('date', 'Date');
                dataTable.addColumn('number', 'Value');
          dataTable.addRows(graph_data[i]['data']);

                var chart = new google.visualization.LineChart(document.getElementById(graph_data[i]['title']));
                var options = {
                    vAxis: {title: graph_data[i]['head'][1]},
               legend: {position: 'none'},
          };

                chart.draw(dataTable, options);
            }
        }
    </script> 

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12" id="lab-list">
                <h3>Patient Data</h3>
            </div>
        </div>
    </div><!--/.fluid-container-->

</body> 
</html>


总结
load（'visualization'，'1'，{'packages'：['corechart']}）；
setOnLoadCallback（summary_go）；
函数摘要_go（）{
/*跳过一些执行查询并将数据拉入图形数组的代码*/
变量图\数据=新数组(
{标题：“钾SerPl sCnc”，
标题：[“日期”，“mmol/L”]，
数据：[[新日期（“2004”、“09”、“23”），3.6]，
[新日期（“2005”、“08”、“31”），3.5]，
[新日期（“2007”、“09”、“01”），3.4]，
[新日期（“2008”、“01”、“11”），4.1]，
[新日期（“2009”、“09”、“30”），3.5]]，
{标题：“白蛋白/创造我们的目标”，
标题：[“日期”，“ug/mg{creat}”]，
数据：[[新日期（“2004”、“09”、“23”），5]，
[新日期（“2009”、“09”、“30”），8]]；
var labdiv=document.getElementById（“实验室列表”）；
对于（var i=0；i”+图形数据[i]['title']+“”；
var dataTable=new google.visualization.dataTable（）；
dataTable.addColumn（'date'，'date'）；
dataTable.addColumn（'number'，'Value'）；
addRows（graph_data[i]['data']）；
var chart=new google.visualization.LineChart（document.getElementById（graph_data[i]['title']）；
变量选项={
vAxis:{title:graph_data[i]['head'][1]}，
图例：{位置：'无'}，
};
图表绘制（数据表、选项）；
}
}
患者数据

谢谢

看来这是件愚蠢的事。div标签可能没有及时为draw调用进行设置，所以当我将它分成不同的外观时——首先设置div，然后调用draw调用，它没有任何问题