Animasi carta Google kehilangan keterlihatan apabila data carta berubah
P粉170438285
P粉170438285 2023-09-02 12:32:58
0
1
608

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/docs/animation

     

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);
P粉170438285
P粉170438285

membalas semua (1)
P粉301523298

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.

    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!