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方法只会更新图表。绝不应该刷新整个页面。

但是在调用update时，可以通过将0作为唯一参数传递为documented来阻止动画：

有时图表更新时，您可能不需要动画。为此，您可以持续update来呼叫0。这将同步显示图表，并且没有动画。

Answer 2

答案是，按钮位于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>

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

2 个答案: