Обновляйте только Chart.js без анимации и без обновления браузера. - PullRequest
Новая
       63

Обновляйте только Chart.js без анимации и без обновления браузера.

1 голос
/ 08 ноября 2019

Я пытаюсь обновить только 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();
    };

Ответы [ 2 ]

1 голос
/ 08 ноября 2019

Я не знаю, что вы подразумеваете под «он обновляет браузер» - метод update только обновляет график. Это никоим образом не должно обновлять всю страницу.

Но вы можете предотвратить анимацию при вызове update, передав 0 в качестве единственного параметра, как документировано :

Иногда при обновлении диаграммы может не потребоваться анимация. Для этого вы можете позвонить update с продолжительностью 0. Это сделает диаграмму синхронно и без анимации.

0 голосов
/ 08 ноября 2019

Ответ таков: кнопка была внутри формы в 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>
...