高圖表折線圖內存不足

Question

我正在嘗試使用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

Answer 1

該圖表的特定數據在您的代碼中帶來了錯誤。 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));