我想在单击按钮时动态生成图形。我的问题是当我第二次点击按钮时,第一个图块阻止显示数据。问题是在addChart函数中使用setInterval但我无法弄清楚如何纠正这个问题。在我的逻辑中是否有一些理智?
<script>
function addChart() {
chartCount++;
var name = document.getElementById("chartName").value;
chartDict[name] = chartCount;
chart[chartCount] = new CanvasJS.Chart("chartContainer" + chartCount, {
title: {
text: name
},
axisY: {
includeZero: false,
maximum: 70
},
axisX: {
valueFormatString: "hh:mm tt"
},
data: [{
type: "line",
dataPoints: dps[chartCount]
}]
});
updateChart[chartCount] = function(count) {
count = count || 1;
for (var j = 0; j < count; j++) {
dps[chartCount].push({
x: xVal[chartCount],
y: yVal[chartCount]
});
xVal[chartCount] = new Date()
//console.log(xVal)
//xVal++;
}
if (dps[chartCount].length > dataLength) {
dps[chartCount].shift();
}
chart[chartCount].render();
};
intervals[chartCount] = setInterval(updateChart[chartCount], 1000)
}
</script>
您可以尝试以下解决方法:
在将新值重新分配给图表元素之前,从DOM中删除图表的内部内容以下是使用jquery的remove()方法的链接: