javascript - 仅更新没有动画且不刷新浏览器的 Chart.js

Question

我正在尝试只更新 Chart.js，而不需要刷新浏览器，也没有所有行的重新加载动画。我尝试使用简单的命令 chart.update()，但它不断刷新浏览器和动画。我想以最简单的方式做到这一点。我的数据来自数据库。
这是我的图表:

<script>
    var newData = [<?php echo $datacor1;?>];
    var lbl = [<?php echo $labels; ?>];
    var ctx1 = document.getElementById('mychart1');

    var myLineChart = new Chart(ctx1, {
        type: 'line', 
        data: {
          labels: lbl,
          datasets: [
            {
              label: "Corrente 1",
              data: [<?php echo $datacor1;?>],
              borderWidht: 6,
              borderColor: 'red',
              backgroundColor: 'transparent'
            },
            {
              label: "Corrente 2",
              data: [<?php echo $datacor2; ?>],
              borderWidht: 6,
              borderColor: 'blue',
              backgroundColor: 'transparent'
            },
            {
              label: "Corrente 3",
              data: [<?php echo $datacor3; ?>],
              borderWidht: 6,
              borderColor: 'green',
              backgroundColor: 'transparent'
            },
            {
              label: "Corrente Total",
              data: [<?php echo $datatotcor; ?>],
              borderWidht: 6,
              borderColor: 'black',
              backgroundColor: 'transparent'
            },
          ]            
        },
        plugins: [

        ],
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }],
            xAxes: [{
              gridLines: {
                display: false
              }
            }]
          },

          title: {
            display: true,
            fontSize: 20,
            text: "Gráfico das Correntes"
          },

          labels: {
            fontStyle: "bold",
          },

          layout: {
            padding: {
              left: 0,
              right: 0,
              top: 0,
              bottom: 0
            }
          },
          tooltips: {
            enabled: true,
            mode: 'single',
            responsive: true,
            backgroundColor: 'black',
            titleFontFamily: "'Arial'",
            titleFontSize: 14,
            titleFontStyle: 'bold',
            titleAlign: 'center',
            titleSpacing: 4,
            titleMarginBottom: 10,
            bodyFontFamily: "'Mukta'",
            bodyFontSize: 14,
            borderWidth: 2,
            borderColor: 'grey',
            callbacks:{
              title: function(tooltipItem, data) {
                  return data.labels[tooltipItem[0].index];
              },
              afterTitle: function(tooltipItem, data) {
                var date = <?php echo json_encode($tempo) ?>

                return date[tooltipItem[0]['index']]; 
              },
              label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';                  
                    if (label) {
                        label += ': ';
                    }
                    label += (tooltipItem.yLabel)+"A";                  
                    return label;
              }
            }
          },
          aspectRatio: 1,
          maintainAspectRatio: false
        }
    });

    function updateChart ()
    {
      window.myLineChart.update();
    };
    </script>

这是我尝试更新图表的内容:

function updateChart ()
    {
      myLineChart.update();
    };

Answer 1

我不知道“它不断刷新浏览器”是什么意思 - update 方法只更新图表。它绝不应该刷新整个页面。

但是您可以通过将 0 作为唯一参数传递给 update 来阻止动画，如 documented :

Sometimes when a chart updates, you may not want an animation. To achieve this you can call update with a duration of 0. This will render the chart synchronously and without an animation.