cari

Rumah  >  Soal Jawab  >  teks badan

Animasi carta Google kehilangan keterlihatan apabila data carta berubah

<p>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? </p> <p>Rujukan: https://developers.google.com/chart/interactive/docs/animation</p> <pre class="brush:php;toolbar:false;"><!DOCTYPE html> <html> <kepala> <sasaran asas="_atas"> <script src="https://www.gstatic.com/charts/loader.js"></script> </head> <badan> <div id="pizzaChart" style="limpahan: tersembunyi"></div> <p id="logger"></p> <skrip> google.charts.load('semasa', {'pakej':['carta teras']}); google.charts.setOnLoadCallback(drawChart); fungsi drawChart() { var mushroomData = Math.floor(Math.random() * 11); document.getElementById("logger").innerHTML = mushroomData; var data = google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('nombor', 'Slices'); data.addRows([ ['Mushrooms', mushroomData], ['Bawang', 1], ['Olives', 1], ['Zuchini', 1], ['Pepperoni', 2] ]); pilihan var = { tajuk: 'Berapa Banyak Pizza yang Saya Makan Semalam', lebar: '100%', animasi: {tempoh: 1000, pelonggaran: 'keluar'} }; carta var = google.visualization.ColumnChart(document.getElementById('PizzaChart')); carta.draw(data, pilihan); } setInterval(drawChart, 1000); </skrip> </badan> </html></pre>
P粉170438285P粉170438285452 hari yang lalu732

membalas semua(1)saya akan balas

  • P粉301523298

    P粉3015232982023-09-03 09:22:36

    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.

    balas
    0
  • Batalbalas