Bagan pai dengan jQuery


93

Saya ingin membuat diagram lingkaran di JavaScript. Saat mencari, saya menemukan Google Charts API. Karena kami menggunakan jQuery, saya menemukan bahwa ada integrasi jQuery untuk Google Charts yang tersedia.

Tapi masalah saya adalah di sini data sebenarnya dikirim ke server Google untuk membuat grafik. Adakah cara untuk mencegah data dikirim ke Google? Saya khawatir tentang pengiriman data saya ke pihak ketiga.

Jawaban:


48

jqPlot terlihat cukup bagus dan ini open source.

Berikut tautan ke contoh jqPlot yang paling mengesankan dan terkini .


catatan: di sebagian besar versi (baru-baru ini juga saat ini) menggunakan $ referensi di luar deklarasi (function ($) ..), jadi mungkin bertentangan dengan prototipe atau yang lainnya
Mario Peshev

99

Flot

Batasan: garis, titik, bidang yang terisi, batang, pai, dan kombinasi semuanya

Dari perspektif interaksi, Flot sejauh ini akan membuat Anda sedekat mungkin dengan grafik Flash yang bisa Anda dapatkan jQuery. Meskipun keluaran grafiknya cukup apik, dan terlihat bagus, Anda juga dapat berinteraksi dengan titik data. Yang saya maksud dengan ini adalah Anda dapat memiliki kemampuan untuk mengarahkan kursor ke titik data dan mendapatkan umpan balik visual tentang nilai titik tersebut dalam grafik.

Versi trunk dari flot mendukung diagram lingkaran.

Kemampuan Flot Zoom.

Di atas ini, Anda juga memiliki kemampuan untuk memilih potongan grafik untuk mendapatkan kembali data untuk "zona" tertentu. Sebagai fitur sekunder untuk "zonasi" ini, Anda juga dapat memilih area pada grafik dan memperbesar untuk melihat titik data sedikit lebih dekat. Sangat keren .


Grafik mini

Batasan: Pai, Garis, Batang, Kombinasi

Grafik mini adalah alat grafik mini favorit saya di luar sana. Sangat bagus untuk grafik gaya dasbor (pikirkan dasbor Google Analytics saat Anda masuk lagi). Karena sangat kecil, mereka dapat dimasukkan dalam baris (seperti pada contoh di atas). Ide bagus lainnya yang dapat digunakan di semua plugin grafik adalah kemampuan penyegaran otomatis. Demo Kecepatan Mouse mereka menunjukkan kepada Anda kekuatan pembuatan grafik langsung yang terbaik.


Grafik Kueri 0.21

Batasan: Area, Garis, Bar dan kombinasi dari semuanya

jQuery Chart 0.21 bukanlah plugin charting terbaik di luar sana yang harus dikatakan. Ini cukup mendasar dalam fungsionalitas ketika datang ke bagan yang dapat ditangani, namun itu bisa fleksibel jika Anda dapat meluangkan waktu dan upaya untuk itu.

Menambahkan nilai ke dalam bagan relatif sederhana:

.chartAdd({

    "label"  : "Leads",
    "type"   : "Line",
    "color"  : "#008800",
    "values" : ["100","124","222","44","123","23","99"]
});

jQchart

Batasan: Bar, Line

jQchart adalah salah satu yang aneh, mereka telah membangun transisi animasi dan fungsionalitas drag / drop ke dalam grafik, namun itu sedikit kikuk - dan tampaknya tidak ada gunanya. Itu memang menghasilkan grafik yang terlihat bagus jika Anda CSSmengaturnya dengan benar, tetapi ada yang lebih baik di luar sana.


TufteGraph

Batasan: Batang dan Batang Bertumpuk

Tuftegraph menjual dirinya sebagai "grafik batang cantik yang akan Anda tunjukkan pada ibu Anda". Itu datang dekat, Flot lebih cantik, tetapi Tufte memang cocok untuk menjadi sangat ringan. Meskipun dengan itu muncul batasan - ada beberapa opsi untuk dipilih, jadi Anda mendapatkan apa yang Anda berikan. Lihatlah untuk grafik batang win cepat.


Terima kasih atas jawaban anda. Saya memeriksa jqPlot sekarang tampaknya menyelesaikan masalah saya. Tapi 1 masalah masih tersisa, saya ingin legenda grafik muncul di grafik daripada di luar.
Arun P Johny

7
Setiap kali saya melihat daftar yang bagus seperti ini, saya berharap setiap item adalah jawaban terpisah sehingga mereka dapat dipilih secara independen. Akan jauh lebih efisien jika menggunakan lib dengan skor tertinggi.
Jesse Aldridge

2
Menimpali di sini sebagai seseorang yang menggunakan Flot dan menganggapnya sebagai lib yang bagus.
Brighid McDonnell

grr saya mencoba flot tetapi membuangnya karena saya tidak dapat menyesuaikan label sumbu
chiliNUT

Sorantis, link ke Query Chart 0.21 sudah mati.
jawo

5

Berton-ton saran bagus di sini, hanya akan melemparkan ZingChart ke tumpukan untuk ukuran yang baik. Kami baru-baru ini merilis pembungkus jQuery untuk pustaka yang membuatnya lebih mudah untuk membuat dan menyesuaikan bagan. Tautan CDN ada dalam demo di bawah ini.

Saya anggota tim ZingChart dan kami di sini untuk menjawab setiap pertanyaan yang mungkin Anda miliki!


4

Beberapa lainnya yang belum disebutkan:

Untuk kue mini, garis, dan batang, Peity brilian, sederhana, kecil, cepat, menggunakan markup yang sangat elegan.

Saya tidak yakin hubungannya dengan Flot (diberikan namanya), tapi Flotr2 cukup bagus, pastinya lebih baik pai daripada Flot.

Bluff menghasilkan grafik garis yang terlihat bagus, tetapi saya mengalami sedikit masalah dengan pie-nya.

Bukan apa yang saya cari, tetapi produk komersial lain (seperti Highcharts) adalah TeeChart .


4

Chart.js cukup berguna, mendukung banyak jenis grafik lainnya juga.

Ini dapat digunakan baik dengan jQuery maupun tanpa.


1
Perpustakaan diagram lingkaran yang sangat baik. Saya menggunakan charts.js untuk diagram lingkaran, dan morris.js untuk yang lainnya. morris.js luar biasa, kecuali bagan donat f! & * # yang bodoh itu. Ketika saya menginginkan diagram lingkaran yang sebenarnya tanpa lubang af! ^ & * @ Donat di dalamnya, saya tidak melihat lebih jauh dari charts.js. Charts.js mungkin adalah solusi yang bagus untuk jenis grafik lainnya juga, tapi Anda tidak bisa mengalahkan API morris.js yang sengaja sangat mudah digunakan
chiliNUT

3

Ada pemain baru di lapangan, menawarkan Diagram Navigasi lanjutan yang menggunakan Canvas untuk animasi dan performa super mulus:

https://zoomcharts.com/

Contoh grafik:

diagram lingkaran interaktif

Dokumentasi: https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/

Yang keren tentang lib ini:

  • Irisan lainnya dapat diperluas
  • Pai menawarkan penelusuran untuk struktur hierarki (lihat contoh)
  • tulis pengontrol sumber data Anda sendiri dengan mudah, atau sediakan file json sederhana
  • ekspor gambar beresolusi tinggi keluar dari kotak
  • dukungan sentuhan penuh , bekerja dengan lancar di iPad, iPhone, android, dll.

masukkan deskripsi gambar di sini

Grafik gratis untuk penggunaan non-komersial, lisensi komersial dan dukungan teknis juga tersedia.

Juga grafik Waktu interaktif dan Grafik Bersih ada untuk Anda gunakan. masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

Grafik dilengkapi dengan API dan Pengaturan yang luas, sehingga Anda dapat mengontrol setiap aspek grafik.


Maksud kamu apa? Kami sudah memiliki fasilitas pemangkasan gambar bawaan.
jancha

0

Periksa TeeChart untuk Javascript

  • Gratis untuk penggunaan non-komersial.

  • Termasuk plugin untuk jQuery , Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript, dll ...

  • Demo interaktif di sini dan di sini .

  • Beberapa tangkapan layar dari beberapa demo:

TeeChart Javascript - Batang

TeeChart Javascript - Pai

TeeChart Javascript - Poin

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.