Saya membuat diagram batang dasar menggunakan chartjs dan berfungsi dengan baik. Sekarang saya ingin memperbarui nilai pada interval berbasis waktu. Masalah saya adalah bahwa setelah saya membuat bagan, saya tidak tahu cara memperbarui nilainya dengan benar ...
Kode saya:
var ctx = $("#myChart").get(0).getContext("2d");
var dts = [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [0, 0, 0, 0, 0]
}
];
var data = {
labels: ["Core#1", "Core#2", "Core#3", "Core#4", "Total"],
datasets: dts
};
var chart = new Chart(ctx);
chart.Bar(data);
//test code
setInterval( function () {
data.datasets[0].data = [random(), random(), random(), random(), random()];
chart.Bar(data);
},2000);
dalam kode pengujian, saya memperbarui nilai dengan datasets[0].data
- apakah ini cara yang tepat untuk melakukannya? Masalah dengan ini adalah bahwa setiap kali saya menelepon chart.Bar()
, nilai-nilai diatur ulang ke 0 kemudian dianimasikan ke nilai acak (seperti saya membuat ulang grafik). Dengan cara ini, semua animasi selalu dari 0 ke nilai yang terlihat aneh. Saya berharap bahwa jika saya memperbarui nilai dari 50 ke 10 bar akan turun ke 10 dari 50 dan tidak puas ke 0 kemudian dianimasikan ke 10.
Saya tidak menemukan apa pun dalam dokumen tentang ini ... apakah saya melakukan sesuatu yang salah atau ini tidak mungkin dengan perpustakaan ini?
sumber
Jawaban:
Pembaruan: Sepertinya chartjs telah diperbarui (lihat komentar di bawah). Ada beberapa contoh yang terlihat sangat bagus:
Pos Asli
Pada November 2013, tampaknya ada sangat sedikit opsi untuk memperbarui grafik.
Ada contoh yang baik di sini (digandakan di bawah) tentang menambahkan poin baru ke bagan garis. Masih agak gelisah tetapi tidak terlalu buruk. Namun, saya pikir efeknya mungkin tergantung pada grafik yang Anda gunakan.
Memang terlihat seperti ini di suatu tempat dalam pipa pengembangan. Saya belum melihat indikasi tanggal rilis: https://github.com/nnnick/Chart.js/issues/13 [Ditutup pada 26 Jul 2014]
JS
HTML
sumber
The
update()
memicu update dari grafik. chart.update ()update()
dapat dipanggil dengan aman setelah memperbarui nilai dari satu atau lebih titik yang ada dalam objek data, menampilkan perubahan dalam satu loop render animasi.sumber
Inilah cara melakukannya di versi terbaru dari ChartJs:
Lihat video yang jelas ini
atau mengujinya di jsfiddle
sumber
chart.update()
menjiwai dari posisi poin sebelumnya seperti yang diinginkan OP.Anda juga dapat menggunakan fungsi destroy (). Seperti ini
sumber
Anda hanya perlu mengubah
chartObject.data.datasets
nilainya dan meneleponupdate()
seperti ini:sumber
Hapus dom kanvas dan tambahkan lagi.
sumber
Saya pikir cara termudah adalah menulis fungsi untuk memperbarui bagan Anda termasuk
chart.update()
metode. Lihatlah contoh sederhana ini yang saya tulis di jsfiddle untuk Bar Chart.Semoga ini membantu.
sumber
Saya tidak berpikir itu mungkin saat ini.
Namun itu adalah fitur yang harus segera hadir, seperti yang penulis sarankan di sini: https://github.com/nnnick/Chart.js/issues/161#issuecomment-20487775
sumber
Jika destroy () dan clear () tidak berfungsi (seperti yang saya alami), Anda dapat menggunakan jquery untuk menghapus kanvas dan menambahkannya lagi.
sumber
Cara paling sederhana adalah mengganti elemen kanvas dan memanggil Chart baru () lagi:
Tentu saja, Anda harus mengganti YourChartData, YourChartType, dan YourChartOptions Anda dengan nilai yang benar yang diperlukan untuk menginisialisasi Chart.js. Lihat Chart.js Documents .
Anda dapat memanggil fungsi reloadMyChart dengan mengklik tombol atau acara lain yang Anda butuhkan. Mungkin Anda akan menambahkan parameter ke fungsi ini dan menggunakannya untuk membuat panggilan REST untuk memperbarui bagan Anda secara dinamis, seperti ini:
Semoga ini bisa membantu! =)
sumber
Menampilkan grafik pembaruan waktu-nyataJS
kode lengkap, Anda dapat mengunduh di tautan deskripsi
sumber
Setidaknya ada 2 cara untuk menyelesaikannya:
1)
chart.update()
2) Hapus grafik yang ada menggunakan chart.destroy () dan buat objek grafik baru.
sumber
Anda dapat memeriksa contoh
Chart
dengan menggunakanChart.instances
. Ini akan memberi Anda semua contoh grafik. Sekarang Anda dapat mengulangi contoh itu dan dan mengubah data, yang ada di dalam konfigurasi. misalkan Anda hanya memiliki satu bagan di halaman Anda.sumber
Sangat sederhana, ganti saja elemen kanvas bagan.
sumber