[英]Highcharts Line Charts Out of memory
我正在尝试使用Highcharts填充折线图。 直到几天前它一直运行良好,然后它开始崩溃,Chrome浏览器和Internet Explorer出现“ SCRIPT7:内存不足”错误。 我还有其他3条折线图以完全相同的方式构建,效果很好。 该图表非常适合用作柱形图。
这是JSFIDDLE 。 代码如下:
function average(arr) {
return _.reduce(arr, function(memo, num) {
var total = memo + num;
return memo + num;
}, 0) / (arr.length === 0 ? 1 : arr.length);
}
function translateMonth(d) {
var month;
if (d.getMonth() === 0) {
month = 'Jan';
} else if (d.getMonth() === 1) {
month = 'Feb';
} else if (d.getMonth() === 2) {
month = 'Mar';
} else if (d.getMonth() === 3) {
month = 'Apr';
} else if (d.getMonth() === 4) {
month = 'May';
} else if (d.getMonth() === 5) {
month = 'Jun';
} else if (d.getMonth() === 6) {
month = 'Jul';
} else if (d.getMonth() === 7) {
month = 'Aug';
} else if (d.getMonth() === 8) {
month = 'Sep';
} else if (d.getMonth() === 9) {
month = 'Oct';
} else if (d.getMonth() === 10) {
month = 'Nov';
} else if (d.getMonth() === 11) {
month = 'Dec';
}
return month;
}
var npsData = [];
npsData = [{
avg: 100,
coach: "NUNES",
date: "Jul"
},{
avg: 100,
coach: "NUNES",
date: "Jul"
},{
avg: 100,
coach: "NUNES",
date: "Jul"
},{
avg: 100,
coach: "NUNES",
date: "Jul"
},{
avg: 100,
coach: "NUNES",
date: "Aug"
},{
avg: 100,
coach: "NUNES",
date: "Aug"
}]
var npsChartData = [];
npsChartData = _.chain(npsData)
.groupBy("date")
.map(function(value, key) {
return {
name: key,
y: parseFloat(Math.round(average(_.pluck(value, "avg"))))
}
})
.value();
var chart4 = new Highcharts.Chart({
chart: {
type: 'line',
renderTo: 'postCoachingSurvey',
plotBorderColor: '#0574AC',
borderWidth: .5,
plotShadow: true
},
credits: {
enabled: false
},
title: {
text: 'Post Coaching Survey',
style: {
color: '#666666',
fontWeight: 'bold'
}
},
legend: {
enabled: false,
itemStyle: {
color: '#868686',
fontSize: '10px'
}
},
xAxis: {
categories: _.pluck(npsChartData, name),
labels: {
enabled: true,
formatter: function() {
return this.value;
}
}
},
yAxis: {
tickPositioner: function () {
var positions = [],
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 6);
for (tick; tick - increment <= this.dataMax; tick += increment) {
positions.push(tick);
}
//console.log (positions);
return positions;
}, title: {
text: 'eNPS',
style: {
color: '#666666'
}
},
labels: {
format: '{value}%'
}
},
tooltip: {
enabled:false,
pointFormat: '{point.y}' + '%',
crosshairs: true
//percentageDecimals: 1
},
plotOptions: {
series: {
cursor: 'pointer',
dataLabels: {
enabled: true,
//formatter: function() {
//return '{point.y}' + '%';
//}
}
}
},
series: [{
type: 'line',
name: 'Nps Average Score',
data: npsChartData,
color: '#EB6E00'
}]
});//end chart4
该图表的特定数据在您的代码中带来了错误。 yAxis.tickPositioner
函数中有一个无限循环。 您有以下代码:
increment = Math.ceil((this.dataMax - this.dataMin) / 6);
for (tick; tick - increment <= this.dataMax; tick += increment) {
// ...
}
简而言之,如果数据的最小值和最大值相同,则increment
值将变为0
,因此您的for循环语句tick += increment
不执行任何操作,并且将一直持续下去。
可以通过确保increment
值最小为1来解决此问题。您可以尝试( JSFiddle ):
increment = Math.max(1, Math.ceil((this.dataMax - this.dataMin) / 6));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.