Question

可悲的是，当添加新数据并填充图表区域时，图表仅以增量跳跃的形式绘制事物。我希望它连续不断地滚动并几乎一个接一个地添加新数据，然后将图形向左滚动而不是图形跳跃。

通过将动画设置为1000毫秒，我可以使代码更平稳地移动，但是随后图形被弄乱了。请尝试以下示例。

myChart = new Chart(ctx, {
              type: 'scatter',
              data: {
                  labels: [],
                  datasets: []
              },
              options: {
                // animation:false,
                animation:{
                  duration: 200,
                  easing: 'linear'
                },
                maintainAspectRatio: false,
                scales: {
                  xAxes: [{
                    ticks: {
                      callback: function(value) {
                        //"HH:mm:ss"
                        return moment(value).format("mm:ss");
                      }
                    },
                  }],
                  yAxes: [{
                    ticks: {
                      beginAtZero:true,
                      max: 100,
                      min: 0
                    }
                  }]
                }
              }
          });

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Chart.js demo</title>
        <!-- import plugin script -->
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js'></script>
    </head>
    <body>
        <!-- line chart canvas element -->
        <canvas id="buyers" width="300" height="200"></canvas>
        
        <script>
            // line chart data
            var buyerData = {
              type:"scatter",
              data: {
                  labels: [],
                  datasets: [{label:"Trainer",data:[
                    {x:Date.now()-100,y:5},{x:Date.now(),y:5},{x:Date.now()+1000,y:15}],borderColor:"rgb(0,0,255)",showLine:true,fill:false}]
              },
              options: {
                // animation:false, MUCH more jumpy
                animation:{
                  duration: 200,
                  easing: 'linear'
                },
                maintainAspectRatio: false,
                scales: {
                  xAxes: [{
                    ticks: {
                      callback: function(value) {
                        //"HH:mm:ss"
                        return moment(value).format("mm:ss");
                      }
                    },
                  }],
                  yAxes: [{
                    ticks: {
                      beginAtZero:true,
                      max: 100,
                      min: 0
                    }
                  }]
                }
              }
            };
            // get line chart canvas
            var buyers = document.getElementById('buyers').getContext('2d');
            // draw line chart
            let chart = new Chart(buyers,buyerData);
            function update(){
                buyerData.data.datasets[0].data.push({x:Date.now(),y:Math.random()*100})
              chart.update();
              setTimeout(update,100);
          
            }
            update();
        </script>
    </body>
</html>

Codepen

chart.js平滑滚动动画

0 个答案: