时间戳

首页 > 解决方案 > Chart.JS 删除卡在循环中的数据

chart.js - Chart.JS 删除卡在循环中的数据

问题描述

我一直在从这里和谷歌学习一些 js。现在我有一个使用 Chart.JS 的图表，它按预期添加了数据。但是，当我尝试删除一个数据点时，我陷入了一个循环并且我的浏览器挂起。

它正在按预期加载前 10 个条目，但除此之外，我不知道。

我的完整代码如下；

    <?php
include'./dist/test.php';
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<body>
<div width="400" height="150">
    <canvas width="400" height="150" id="players"></canvas>
</div>
<script>
var pCount = <?php echo $p; ?>;
var pMax = <?php echo $pm; ?>;

var ctx_live = document.getElementById("players");
var myChart = new Chart(ctx_live, {
    type: 'bar',
    data: {
        labels: [],
        datasets: [{
            data: [],
            borderWidth: 1,
            borderColor:'#00c0ef',
            label: 'liveCount',
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: "",
        },
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    max: pMax,
                    stepSize: 1
                }
            }]
        }
    }
});

var RodneyData = function() {
    $.ajax({
        success: function(data) {
            myChart.data.labels.push(pCount);
            myChart.data.datasets[0].data.push(pCount);
            myChart.update();
        }
    });
};

var DelBoyData = function() {
    $.ajax({
        success: function(data) {
            let total = myChart.data.labels.length;
            while (total >= 10) {
                myChart.data.labels.pop();
                myChart.data.datasets[0].data.pop();
            }
            chart.update();
        }
    });
};
setInterval(RodneyData, 3000);
setInterval(DelBoyData, 3000);
</script>
</body>
</html>

标签： chart.js

解决方案

这是我的解决方案。

var addData = function() {
$.ajax({
    success: function(data) {
        myChart.data.labels.push(pCount);
        myChart.data.datasets[0].data.push(pCount);
        myChart.update();
        if (myChart.data.datasets[0].data.length > 5) {
            myChart.data.labels.shift();
            myChart.data.datasets[0].data.splice(0,1);
            myChart.update();
        }
    }
});

}; 设置间隔（添加数据，1000）；

推荐阅读