我不擅长说英语。请理解。
使用堆栈柱形图时出现内存泄漏问题。
我们每 2 秒在堆栈柱形图上使用 setCategories、setData 更新数据。
但是，内存使用量不断增加，浏览器将被强制终止。
程序唯一要做的就是调用 setCategories、setData。我需要做些什么来清理内存吗？
测试环境为os：windows7、windows10，浏览器：最新版chrome 57.0.2987.133
您可以看到您在 1、3、5、7、10、15 和 20 分钟后继续增加。
内存使用量随时间增加，因此您可以立即检查。
您可以通过在 Chrome 中运行 [shift + esc] 快捷方式在任务窗口中检查内存使用情况。
将示例代码作为附件发送。谢谢你。
JQuery 和 Highcharts(5.0.10) 使用最新版本。
<script>
var dy = {
instanceAlias : {}
};
var CATEGORIES = ["a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11","a12","a13","a14","a15","a16","a17","a18","a19","a20"];
var THEME = "";
var HEIGHT = "290";
var highchartConfig = {
column : {
chart: {
renderTo: null,
type: 'column'
},
xAxis: {
gridLineWidth: 1,
tickLength: 4,
categories : null,
labels : {
rotation: 0,
formatter : function(d){
return dy.instanceAlias[this.value] || this.value;
}
}
},
yAxis: {
min : 0,
max : 5,
lineWidth: 1,
tickLength: 4, // Same value as offset
tickPosition: "outside",
tickWidth: 1,
tickAmount: 3,
tickInterval : 25,
title: {
style : {
display: 'none'
}
},
stackLabels: {
style : {
"fontWeight": "normal",
color : (THEME == "dark") ? "#b0b0b3" : "#000"
}
}
},
plotOptions: {
series: {
borderRadius: 6,
borderWidth: 0,
marker :{
enabled :true,
symbol : "circle",
radius : 4
}
}
},
series: null
}
};
var stack1Config = $.extend(true,{},highchartConfig.column,{
colors : ["#009651","#ff9800","#ff1100","#009651"], //stack colors
chart: {
animation: false,
renderTo: "stack1",
height : HEIGHT
},
xAxis: {
categories : CATEGORIES
},
title: {
style: {
display: 'none'
}
},
subtitle: {
style: {
display: 'none'
}
},
legend : false,
tooltip : false,
yAxis: {
max : null,
tickInterval : null,
tickLength : null,
stackLabels: {
enabled: true,
useHTML : false,
style : {
"fontWeight": "normal",
color : (THEME == "dark") ? "#b0b0b3" : "#000"
}
}
},
plotOptions: {
column: {
stacking: 'normal',
},
series: {
animation: false,
stickyTracking: false,
enableMouseTracking: false,
lineWidth: 0,
marker: {
enabled : true,
symbol : "circle",
radius : 4
},
}
},
series : (function(){
var series = new Array();
var stack = [
{id : "normal", alias : "normal"},
{id : "warning", alias : "warning"},
{id : "danger", alias : "danger"}
];
for (var i = 0; i < stack.length; i++) {
//stack column 브러시 추가.
series.push({
name : stack[i].alias || stack[i].id,
id : stack[i].id,
lineWidth: 1,
data : (function(categories){
var data = [];
for (var i = 0; i < categories.length; i++) {
data.push(0);
}
return data;
})(CATEGORIES)
});
}
//circle
series.push({
type : "scatter",
name : "scatter",
id : "scatter",
marker: {
fillColor: '#FFFFFF',
lineWidth: 1,
lineColor: null
},
data : (function(b){
var data = [];
for (var i = 0; i < b.length; i++) {
data.push(0);
}
return data;
})(CATEGORIES)
});
console.log(series)
return series;
})()
});
var stack2Config = $.extend(true,{},highchartConfig.column,{
colors :["#009651"],
chart: {
animation: false,
renderTo: "stack2",
height : HEIGHT
},
xAxis: {
categories : CATEGORIES
},
title: {
style: {
display: 'none'
}
},
subtitle: {
style: {
display: 'none'
}
},
legend : false,
tooltip : false,
yAxis: {
max : null,
tickInterval : null,
tickLength : null,
stackLabels: {
enabled: true,
useHTML : false,
style : {
"fontWeight": "normal",
color : (THEME == "dark") ? "#b0b0b3" : "#000"
}
}
},
plotOptions: {
animation: false,
stickyTracking: false,
enableMouseTracking: false,
lineWidth: 0,
marker : {
enabled : false
},
column : {
dataLabels: {
enabled: true,
useHTML: true,
x : 0,
y : 0,
style : {
"fontWeight": "normal"
}
}
}
},
series : (function(){
var series = new Array();
var stack = [
{id : "cpu", alias : "CPU"}
];
for (var i = 0; i < stack.length; i++) {
//stack column 브러시 추가.
series.push({
name : stack[i].alias || stack[i].id,
id : stack[i].id,
lineWidth: 1,
data : (function(categories){
var data = [];
for (var i = 0; i < categories.length; i++) {
data.push(0);
}
return data;
})(CATEGORIES)
});
}
//circle
series.push({
type : "scatter",
name : "scatter",
id : "scatter",
marker: {
fillColor: '#FFFFFF',
lineWidth: 1,
lineColor: null
},
data : (function(b){
var data = [];
for (var i = 0; i < b.length; i++) {
data.push(0);
}
return data;
})(CATEGORIES)
});
console.log(series)
return series;
})()
});
var stack1 = Highcharts.chart(stack1Config);
var stack2 = Highcharts.chart(stack2Config);
var alarmTimeoutId = null;
var alarmTimeout = function(){
return setTimeout(function(){
var ACT_COLUMN = {
normal : [],
warning : [],
danger : [],
scatter : [] // success,warning,danger total value
};
var length = 20;
for (var i = 0; i < length; i++) {
var normalCnt = Math.round(Math.random()*100);
var warningCnt = Math.round(Math.random()*100);
var dangerCnt = Math.round(Math.random()*100);
ACT_COLUMN.scatter.push({ y: normalCnt+warningCnt+dangerCnt });
ACT_COLUMN.normal.push(normalCnt);
ACT_COLUMN.warning.push(warningCnt);
ACT_COLUMN.danger.push(dangerCnt);
}
for (var key in ACT_COLUMN) {
stack1.get(key).setData(ACT_COLUMN[key],false,false);
}
stack1.xAxis[0].setCategories(CATEGORIES);
ACT_COLUMN.scatter = null;
ACT_COLUMN.normal = null;
ACT_COLUMN.warning = null;
ACT_COLUMN.danger = null;
ACT_COLUMN = null;
var cpuData = [];
for (var i = 0; i < length; i++) {
var cpu = Math.round(Math.random()*100);
var color = "#009651";
if(cpu <= 50){
color = "#009651";
}else if(cpu <= 80){
color = "#ff9800";
}else{
color = "#ff1100";
}
cpuData.push({y : cpu, color : color });
}
var series = stack2.series;
var seriesLength = series.length;
for (var i = 0; i < seriesLength; i++) {
series[i].setData(cpuData,false,false);
}
stack2.xAxis[0].setCategories(CATEGORIES);
clearTimeout(alarmTimeoutId);
alarmTimeoutId = alarmTimeout();
}, 2000);
}
alarmTimeout();
</script>