Google Visualization показывает только один график при циклическом просмотре массива для отображения нескольких

Я видел много дискуссий о создании нескольких графиков на одной странице, когда вы знаете, сколько графиков создается заранее. Я создаю страницу, где мне нужно нанести на график несколько элементов, и заранее неизвестно, сколько будет элементов. Последний график всегда отображается, предыдущие нет. При отладке я вижу, что все графики отображаются при вызове функции рисования, но они исчезают при вызове следующего рисования. Возможно, это что-то глупое, но я искал несколько часов и не могу понять. При переходе в тестовую среду (версия 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>

Спасибо!

Источник

1 ответ

Ну, похоже, это было что-то глупое. Возможно, теги div не были установлены вовремя для вызова отрисовки, поэтому, когда я разбил его на отдельные просмотры - сначала настраивая div, затем вызывая вызовы отрисовки, это работало без проблем.

Источник
Другие вопросы по тегам