Highcharts.JS删除数据冻结浏览器

Question

我正在从 Firebase 实时数据库中检索数据。 我需要获取图表中的值，所以我决定使用 highchart.js。 有人可以向我解释为什么图表中最旧的值被删除了吗？ 我用highcharts个股票。 我试图添加一个滚动条，这样我就可以看到所有的值，但它不起作用。 我也不明白为什么我的浏览器在加载图表时会冻结...我认为这是因为我在刷新浏览器时加载了图表，但这很奇怪，因为我现在最多只显示 200 个值。

非常感谢 ！

main.js 中的代码：

     // function to plot values on charts
function plotValues(chart, timestamp, value) {
    var x = epochToJsDate(timestamp).getTime();
    var y = Number(value);
    if (chart.series[0].data.length > 40) {
        chart.series[0].addPoint([x, y], true, false, true); //If you want a point limit: 1) Change the "40" to the limit you want and put "true" instead of "false
    } else {
        chart.series[0].addPoint([x, y], true, false, true);
    }

    chartALM = createALMChart();
    
     dbRef.orderByKey().on('child_added', snapshot => {
                    var jsonData = snapshot.toJSON(); 
                    // Save values on variables
                    var Défaut_communication_automate = jsonData.Défaut_communication_automate;
                    var timestamp = jsonData.timestamp;
                    // Plot the values on the charts
                    plotValues(chartALM, timestamp, Défaut_communication_automate);
                    });

   

Code in charts-definition.js :

    // Create the charts when the web page loads
    window.addEventListener('load', onload);    
    
    function onload(event) {
        chartALM = createALMChart();
    // Create ALM Chart
    function createALMChart() {
        
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart-ALM',
                type: 'spline'
            },
            rangeSelector: {
                enabled: true,
                height: 100,
                allButtonsEnabled: true,
                buttons: [{
                   {
                    type: 'year',
                    count: 1,
                    text: 'Week',
                    dataGrouping: {
                        forced: true,
                        units: [['week', [1]]]
                    }
                }, {
                    type: 'all',
                    text: 'Month',
                    dataGrouping: {
                        forced: true,
                        units: [['month', [1]]]
                    }
                }],
                buttonTheme: {
                    width: 60
                },
                selected: 2
            },
            series: [{
                name: 'ALM',
                
                showInNavigator: true
            },{
                name: 'ATRE'
            }],
            title: {
                text: undefined
            },
            plotOptions: {
                series: {
                   
                },
                line: {
                    animation: false,
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: { second: '%H:%M:%S' },
                scrollbar: {
                    enabled: true
                  }
    
            },
            yAxis: {
                title: {
                    text: 'Défaut communication automate'
                }
            },
            credits: {
                enabled: true
            }
        });
        return chart;
    }

Answer 1

当涉及冻结浏览器时，请尝试关闭您的onload() function，然后添加createALMChart() function。

function onload(event) {
    chartALM = createALMChart();
}

function createALMChart() {  
    var chart = new Highcharts.Chart({
       (...)
    });
    return chart;
}