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.

jqPlot terlihat cukup bagus dan ini open source.

Berikut tautan ke contoh jqPlot yang paling mengesankan dan terkini .

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.

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!

$('#pie-chart').zingchart({
  "data": {
    "type": "pie",
    "legend": {},
    "series": [{
      "values": [5]
    }, {
      "values": [10]
    }, {
      "values": [15]
    }]
  }
});

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script>

<div id="pie-chart"></div>

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 .

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

Ini dapat digunakan baik dengan jQuery maupun tanpa.

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

https://zoomcharts.com/

Contoh grafik:

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.

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

Juga grafik Waktu interaktif dan Grafik Bersih ada untuk Anda gunakan.

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

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: