Animasi carta Google kehilangan keterlihatan apabila data carta berubah

Question

Saya menghadapi masalah untuk mendapatkan animasi Carta Google berfungsi dengan baik. Saya rasa masalahnya ialah carta terus melukis semula dan bukannya hanya mengemas kini data, tetapi berdasarkan kod sampel Google dan pengetahuan terhad saya tentang JavaScript, saya tidak pasti cara untuk membetulkannya. Saya tidak mahu memasukkan butang untuk mengemas kini carta kerana carta akhirnya akan mengemas kini data secara dinamik daripada sumber data. Bagaimanakah cara saya mengemas kini carta saya untuk menghidupkan perubahan data dengan betul? Rujukan: https://developers.google.com/chart/interactive/d

P粉301523298 · Answer

Untuk membolehkan carta menganimasikan daripada satu set data ke set seterusnya, anda perlu menyimpan rujukan kepada carta yang sama dan bukannya membuat carta baharu setiap kali anda melukis.

Sila rujuk contoh berikut...

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(initChart);
var chart;

function initChart() {
  chart = new google.visualization.ColumnChart(document.getElementById('pizzaChart'));
  drawChart();
}

function drawChart() {

  var mushroomData = Math.floor(Math.random() * 11);
  document.getElementById("logger").innerHTML = mushroomData;

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Mushrooms', mushroomData],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2]
  ]);

  var options = {
    title: 'How Much Pizza I Ate Last Night',
    width: '100%',
    animation: {duration: 1000, easing: 'out'}
  };

  chart.draw(data, options);
}

setInterval(drawChart, 1000);

Nota: Carta pai Google tidak menyokong kesan animasi.