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

ztyzrc3y  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(147)

我正在从Firebase RealTime Database中检索数据。我需要在图表中获取值,所以我决定使用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;
    }
3qpi33ja

3qpi33ja1#

当涉及到冻结浏览器时,尝试关闭您的onload()函数,然后添加createALMChart()函数。

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

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

相关问题