Question

重新加载Highchart时出现内存增加问题

我尝试在重新加载时显式地运行chart.destroy()，并添加其他“图表动画：闪光”，但这不是解决问题的理想方法。

setInterval ( "initChart()", 1000*30 );`        

function initChart(){

    if ( typeof $ ( '#guage1' ).highcharts () !== 'undefined' )
    {
        $ ( '#guage1' ).highcharts ().destroy ();
    }

    var data = [{
        borderColor: "red",
        color: "#7cb5ec",
        innerRadius: "100%",
        radius: "100%",
        y: 60
    }];

    setHighcharts($('#guage1'), data);
    datas($('#guage1'),data);
}


function datas($container,data){

    var chart = $container.highcharts();

    if(typeof chart !== 'undefiend' || chart != null){

        var y = null;
        y = chart.series[0].data[0].y;

        for ( var i = y; i >= 0; i = i - (y / 80) )
        {
            chart.addSeries ( {
                data : [ {
                    y : i,
                    radius : '100%',
                    innerRadius : '100%',
                } ],
                stickyTracking : false,
                enableMouseTracking : false
            }, false )
        }
        chart.redraw ();

        Highcharts.each ( chart.series, function ( s )
        {
            s.update ( {
                borderColor : s.data[0].color
            }, false );
        } );
        chart.redraw ();
    }
    chart = null;
}


function setHighcharts($container, data1) {
console.log('');

    $container.highcharts ( {
        chart : {
            type : 'solidgauge',
            spacingBottom : 0,
            spacingTop : 0,
            spacingLeft : 0,
            spacingRight : 0,
            marginTop : 28,
            marginLeft : 28,
            marginRight : 28,
            marginBottom : 28,
            backgroundColor : 'rgba(255, 255, 255, 0.0)',
            style : {
                fontFamily : 'Nanum Gothic'
            },
            animation: false
        },

        title : {
            text : '',
            style : {
                display : 'none',
            }
        },

        pane : {
            startAngle : 0,
            endAngle : 360,
            background : [ { // Track for Move
                outerRadius : '112%',
                innerRadius : '88%',

                backgroundColor : 'rgba(17, 17, 26, 1)',
                borderWidth : 0
            } ]
        },

        yAxis : {
            min : 0,
            max : 100,
            lineWidth : 0,
            tickPositions : [],
            stops : [ [ 0, '#218ad8' ], [ 1, '#69ff05' ] // red
            ],
        },

        plotOptions : {
            solidgauge : {
                borderWidth : '15px',
                linecap : 'round',
                dataLabels : {
                    enabled : false
                },
                rounded: true
            }
        },
        series : [{
            data : data1,
        }]
    });
}

我的页面上有5个规格图表，并且每30秒重新加载一次图表，并且内存大小会增加。

我猜创建的对象仍然在内存中。

7次重新加载171.8MB后，第一次加载为159.6MB。

那么，我如何释放重新加载的内存？

Answer 1

销毁每个图表并每30秒对其进行初始化不是一个好主意。相反，您可以使用诸如chart.update()，series.addPoint()，series.setData()等动态更新图表的方法。

演示：

API参考：

重新加载highchart时发生内存泄漏

1 个答案: