为什么此功能导致浏览器刷新按钮变灰?

时间:2016-05-17 16:18:47

标签: javascript chart.js

我正在使用图表js测试实时图表,并在下面编写了简单的代码。每一秒,我都想用一些新数据重新绘制图形(在数据和标签数组中移位和推送)。尽管它有多么丑陋,但它仍然有效,并且每秒都会更新图形。但是,每次执行该功能时,刷新按钮都会灰显(几毫秒),即使没有与网络交互也是如此。为什么呢?

setInterval(function() {
    var ctx = document.getElementById("line-chart-1").getContext("2d");
    var chart1 = window.chart1;

    var d1 = chart1.data.datasets[0].data;
    var lab1 = chart1.data.labels;

    var newData = dataPointGenerator(70, 80);

    d1.shift();
    d1.push(newData.data);

    lab1.shift();
    lab1.push(newData.time);

    window.chart1 = new Chart(ctx, {
    type: 'line',
        data: {
            labels : lab1,
            datasets : [
                {
                    label: 'names[0]',
                    fill: false,
                    borderColor: "rgb(75,192,192)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgb(75,192,192)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgb(75,192,192)",
                    pointHoverBorderColor: "rgb(75,192,192)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data : d1
            }
        ]
    },
    options: {
        animation : false,
        scales: {
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'kW'
                }
            }]
        }
    }
});

function dataPointGenerator(start, end) {
    var rand = Math.floor(Math.random() * (end - start + 1) + start);
    var date = new Date();
    return {
        data : rand,
        time : date
    }
};

0 个答案:

没有答案