0

当您知道提前创建了多少个图表时，我已经看到很多关于在单个页面中创建多个图表的讨论。我正在创建一个页面，我需要在其中绘制多个项目，并且事先不知道会有多少项目。最后一张图总是显示出来，前面的没有。调试时，我可以看到调用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>

谢谢！

4

1 回答 1

0

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

于 2012-08-19T19:53:01.210 回答