Javascript 使用flot动态添加图表
我正在运行以下代码。该按钮基本上会将图表添加到html页面中。我面临的问题是:当我第二次点击按钮时,前一张图表的曲线会消失(尽管标签不会消失),我希望它保持不变。我尝试过调试,当我修改buttonClicked javascript函数开头的innerHTML属性时,就会发生这种情况。有人能告诉我为什么会这样吗Javascript 使用flot动态添加图表,javascript,charts,flot,Javascript,Charts,Flot,我正在运行以下代码。该按钮基本上会将图表添加到html页面中。我面临的问题是:当我第二次点击按钮时,前一张图表的曲线会消失(尽管标签不会消失),我希望它保持不变。我尝试过调试,当我修改buttonClicked javascript函数开头的innerHTML属性时,就会发生这种情况。有人能告诉我为什么会这样吗 <html> <head> <title>Configurando gráficos</title> <script languag
<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>
格拉菲科斯酒店
var-id=0;
函数请求图(占位符){
$.ajax({url:../requests/get_xml_oid.php?oid=1.3.6.1.2.1.1.10.65540&host=200.234.199.161),成功:函数(请求){
//将dataToDraw初始化为空数组
var dataToDraw=[];
//第一个标记称为IFinoctes
var ifinoctesel=request.getElementsByTagName(“ifinoctes”)[0];
//存储数据元素,以循环时间-值对
var dataEl=ifInOctetsEl.getElementsByTagName(“数据”);
//对于每个数据元素,第一个除外
var i;
对于(i=1;i根据,分配给innerHTML会破坏子元素。我不清楚这是否正是您所看到的,但可能使用类似问题中建议的document.createElement
也适用于您