1

ループ内のスライドショーのように、一定の間隔で Highcharts グラフを読み込む Web ページがあります。私の問題は、Web を Chrome で数時間実行した後 (現時点では他のブラウザーはオプションではありません)、「Aw, Snap ! この Web ページの表示中に問題が発生しました。」というメッセージが表示されることです。

「Chrome 開発ツール -> タイムライン」を使用すると、「DOM ノード数」が常に増加していることがわかります (ドキュメント数も)。

これはより大きな Web の一部であるため、コードを投稿できません。ただし、同様の方法で処理を行うページを作成しました。JQuery.load() でグラフをロードします。

プレーンな HTML ページをローテーションしても、DOM カウントは増加しません (ガベージ コレクションを取得します)。

誰かが私が間違っていることを教えてください。これを別の方法で行うことはできますか？これはハイチャートのバグですか? この歓迎を解決する方法に関する提案。

この動作を生成できるコードを次に示します。(申し訳ありませんが、jsfiddle で動作させることができませんでした) (「$(document).ready」関数でコメントとコメント解除して、ロード メソッド間で変更します)

このページをここに掲載しました: http://memoryleak.ivarragnarsson.comここでは、漏れのある Highcharts バージョンまたは標準の HTML 読み込みの非漏れバージョンを表示することを選択できます。

「メモリリーク.html」

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.src.js"></script>

    <script type="text/javascript">
        function UpdateGraphsDiv()
        {
        if (typeof window.chart != 'undefined')
        {
            window.chart.destroy();
        }

            $.ajaxSetup({ cache: false, async: false });
            $("#chartcontainer").load("graph.html");
        }

        $(document).ready(function ()
        {
            UpdateGraphsDiv(); setInterval(UpdateGraphsDiv, 5000);  //Updates graph in div using JQuery Load
        });


    </script>
</head>
<body>
<div id="chartcontainer"></div>
</body>
</html>

「グラフ.html」

<div id='container1' style='min-width: 310px; height: 400px; margin: 0 auto'></div>
    <script type='text/javascript'>
    $(function ()
    {
        $('#container1').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            },
            tooltip: {
                headerFormat: '<span style=""font-size:10px"">{point.key}</span><table>',
                pointFormat: '<tr><td style=""color:{series.color};padding:0"">{series.name}: </td>' +
                '<td style=""padding:0""><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Tokyo',
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

            }, {
                name: 'New York',
                data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

            }, {
                name: 'London',
                data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

            }, {
                name: 'Berlin',
                data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

            }]
        });
    });
    </script>
</div>

このDOMノードの蓄積を止める方法を教えてください。

4

2 に答える 2

1

同意したように、呼び出すことchart.destroy()で DOM ノードの増加の問題の大部分が解決されます。Ivar の例によると、Highcharts に依存していないことがわかります (添付のグラフを参照) jQuery.load()。以前のコンテンツを適切に消去していないようです。

左: グラフなし || 右：チャートあり左: グラフなし || 右：チャートあり

于 2013-09-23T12:08:04.200 に答える