Question

我正在制作以下图表。我的计划是使用它每1秒显示实时数据，缓冲区为600点。我希望它显示初始数据（整个600点）获取数据（通过setInterval模拟）然后放置并移位。问题是它只显示12个点。

问题1：你能帮我解决一下我错过了什么，或者ChartJS是不可能的？问题2：ChartJS的缓冲区是否合理？

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!!</title>
    </head>
    <script src="/socket.io/socket.io.js"></script>
    <script src="Chart.min.js"></script>
    <script>
        var socket = io();

        socket.on('pv_changed', function(data) { document.getElementById('pv').innerHTML = data.value });
    </script>
    <style>
    </style>
    <body>
        Hello World!!!<br/>
        <label>PV Value: </lable>
        <label id="pv">hi</lablel>
        <div class="container">
          <div>
            <canvas id="myChart" height=130px></canvas>
            <script>
                var ctx = document.getElementById('myChart').getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'W', 'T', 'F', 'S', 'S'],
                        datasets: [{
                            label: 'Test',
                            data: Array.apply(null, Array(600)).map(Number.prototype.valueOf,0),
                            backgroundColor: "rgba(255,153,0,0.4)",
                            animation: true
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            yAxes: [{
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Month'
                                },
                                ticks: {
                                    beginAtZero: true,
                                    min: -5,
                                    max: 25,
                                    stepsize: 5
                                }
                            }],
                            xAxes: [{
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Hello'
                                },
                                ticks: {
                                    beginAtZero: true,
                                    min: 0,
                                    max: 600,
                                    stepsize: 50
                                }
                            }]
                        }
                    }
                });

                var top = 20;
                var now = 0;
                setInterval(function() {
                    myChart.data.datasets[0].data.shift();
                    myChart.data.datasets[0].data.push(now);
                    myChart.update();
                    now = now + 1;
                    if(now == 20)
                        now = 0;
                }, 1000);
            </script>
          </div>
        </div>
    </body>
</html>

Answer 1

您似乎无法使用myChart.update（）更新数据集。尝试创建临时对象，然后将该对象分配给myChart.data.datasets。然后，您需要重新绘制图表。我在角度项目link中使用chart.js时遇到了同样的问题。您检查了link吗？

图表JS没有显示所有数据

1 个答案: