Динамическое добавление диаграмм с помощью флота

Я запускаю следующий код. Кнопка в основном добавляет диаграмму на страницу html. Проблема, с которой я сталкиваюсь, заключается в следующем: когда я нажимаю кнопку во второй раз, кривая прежнего графика исчезает (хотя метки не исчезают), и я хочу, чтобы она осталась. Я пытался отладить, и это происходит, когда я изменяю свойство innerHTML прямо в начале функции javascript buttonClicked. Кто-нибудь может сказать мне, почему это происходит?

<html>
<head>
<title>Configurando gráficos</title>
<script language="javascript" type="text/javascript" src="../scripts/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../scripts/jquery.flot.js"></script>
<script type="text/javascript" language="javascript">

var id = 0;

function requestGraph(placeholder) {
  $.ajax({url: "../requests/get_xml_oid.php?oid=1.3.6.1.2.1.2.2.1.10.65540&host=200.234.199.161", success: function(request){
        // Initialize dataToDraw to an empty array
        var dataToDraw = [];

        // The first tag is called ifInOctets      
        var ifInOctetsEl = request.getElementsByTagName("ifInOctets")[0];

        // Store the data element, to loop over the time-value pairs      
        var dataEl = ifInOctetsEl.getElementsByTagName("data");

        // For each data element, except the first one
        var i;
        for (i=1; i<dataEl.length; i++){
            // get the time-value pair
            var timeEl = dataEl[i].getElementsByTagName("time")[0];
            var valueEl = dataEl[i].getElementsByTagName("value")[0];
            var time = timeEl.textContent;
            var value = valueEl.textContent;

            // get the value of the former data element
            // Warning: the former value in the XML file is newer than the latter
            var formerValueEl = dataEl[i-1].getElementsByTagName("value")[0];
            var formerValue = formerValueEl.textContent;

            // push to the dataToDraw array
            dataToDraw.push( [parseInt(time)*1000, parseInt(formerValue) - parseInt(value)]);

        }

        // tell the chart that the x axis is a time variable
        var options = {
            xaxis: { mode: "time"}
        };

        // plot the chart and place it into the placeholder
        jQuery.plot(jQuery(placeholder), [dataToDraw], options);

      }});
}
function buttonClicked() {
    document.getElementById("body").innerHTML += "<div id=\"placeholder" + id + "\" style=\"width:600px;height:300px;\"></div>";
    requestGraph("#placeholder" + id);
    setInterval("requestGraph(\"#placeholder" + id + "\")",60000);
    id = id + 1;
}

</script>
</head>
<body id="body">
<button type="button" onClick="buttonClicked()">Click Me!</button>
</body>
</html>

javascript charts flot
person Thiago    schedule 05.03.2010    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Согласно этому предыдущему вопросу присваивание innerHTML уничтожает дочерние элементы. Мне не ясно, что это именно то, что вы видите, но, возможно, использование document.createElement, предложенное в аналогичном вопросе, сработает и для вас.

person Dave Bacher    schedule 05.03.2010