只更新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

答案是，按钮位于HTML中的表单内，这就是它刷新整个页面的原因。
错误示例：

<div class="chart1">
      <canvas id="mychart1" ></canvas>
      <form method="POST">
        <p class="datafilter">Filtrar data:<input type="date" id="datafilter">
        <button type="submit" id="subfilt">FILTRAR</button></p>
        <button type="update" id="update" onclick="updateChart()">UPDATE</button>
      </form>
    </div>

正确的例子：

<div class="chart1">
      <canvas id="mychart1" ></canvas>
      <form method="POST">
        <p class="datafilter">Filtrar data:<input type="date" id="datafilter">
        <button type="submit" id="subfilt">FILTRAR</button></p>
      </form>
      <button type="update" id="update" onclick="updateChart()">UPDATE</button>
    </div>

Answer 2

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

但是可以通过将0作为唯一参数传递来防止调用update时出现动画，如文档所示：

有时当图表更新时，您可能不想要动画。为此，您可以调用update，持续时间为0。这将同步呈现图表，而不需要动画。