Pustaka Bagan JavaScript

223

Adakah yang akan merekomendasikan perpustakaan charting JavaScript tertentu - khususnya yang tidak menggunakan flash sama sekali?

javascript  charts 
— Steve M
sumber

Jawaban:

160

Ada semakin banyak Sumber Terbuka dan solusi komersial untuk pembuatan bagan JavaScript murni yang tidak memerlukan Flash. Dalam tanggapan ini saya hanya akan menyajikan opsi Open Source.

Ada 2 kelas utama solusi JavaScript untuk grafik yang tidak memerlukan Flash:

  • Berbasis kanvas, dirender dalam IE menggunakan ExplorerCanvas yang pada gilirannya bergantung pada VML
  • SVG di browser berbasis standar, diterjemahkan sebagai VML di IE

Ada pro dan kontra dari kedua pendekatan tetapi untuk perpustakaan charting saya akan merekomendasikan nanti karena terintegrasi dengan DOM, memungkinkan untuk memanipulasi elemen grafik dengan DOM, dan yang paling penting pengaturan acara DOM. Sebaliknya pustaka charting Kanvas harus menemukan kembali roda DOM untuk mengelola acara. Jadi, kecuali Anda bermaksud membuat grafik statis tanpa penanganan acara, solusi SVG / VML harus lebih baik.

Untuk solusi SVG / VML ada banyak opsi, termasuk:

Raphael adalah perpustakaan grafik open-source yang sangat aktif, terpelihara dengan baik, dan matang dengan dukungan lintas-browser yang sangat baik termasuk IE 6 hingga 8, Firefox, Opera, Safari, Chrome, dan Konqueror. Raphael tidak bergantung pada kerangka JavaScript apa pun dan karenanya dapat digunakan dengan Prototipe, jQuery, Dojo, Mootools, dll ...

Ada sejumlah perpustakaan bagan berdasarkan Raphael, termasuk (tetapi tidak terbatas pada):

  • gRaphael , ekstensi dari perpustakaan grafis Raphael
  • Ico , dengan API intuitif berdasarkan pada panggilan fungsi tunggal untuk membuat grafik yang kompleks

Pengungkapan: Saya adalah pengembang salah satu garpu Ico di github .

— Jean Vincent
sumber
5
Grafico dan Ico adalah dua garpu yang tidak kompatibel dari Ico awal oleh Alex Young. Jadi tidak akurat untuk menyatakan bahwa Ico telah menjadi Grafico. Grafico hanya salah satu dari garpu.
— Jean Vincent
Perlu dicatat bahwa Raphael tampaknya tidak lagi dipertahankan. Komit terakhir adalah sekitar Juli 2010.
— Alastair Pitts
1
Hanya mengunduh grafik raphael, sangat menyukainya tetapi tidak ada dokumen, hanya untuk mengingatkan.
— Orbit
@Alastair: Raphael sekarang disponsori dan dikembangkan oleh Sencha ... atau begitulah kata mereka :)
— Roy Tinker
1
SVG tidak didukung di Android pra-Honeycomb. Jika dapat melihat grafik pada berbagai perangkat Android saat ini adalah persyaratan, Anda harus memilih solusi berbasis Canvas. Artikel tentang Sencha Touch Charts ini menjelaskan lebih lanjut tentang pembuatan grafik seluler secara umum, dan mengapa Sencha Touch memilih rute Canvas.
— Pallavi Anderson
70

Jika Anda menggunakan jQuery, saya menemukan flot sangat bagus - coba contoh untuk melihat apakah mereka sesuai dengan kebutuhan Anda, tetapi saya telah menemukan mereka melakukan sebagian besar apa yang saya butuhkan untuk proyek saya saat ini.

Selain itu, ExtJS 4.0 telah memperkenalkan serangkaian grafik - sangat kuat, dan dirancang untuk bekerja dengan data langsung.

— Bittercoder
sumber
2
Ini adalah perpustakaan yang sama dengan Geoff Dalgas yang digunakan untuk membuat grafik reputasi di sini di StackOverflow. Ini benar-benar adalah kit yang bagus.
— Charles Roper
Satu-satunya keluhan nyata saya tentang flot adalah bahwa ketika merender di IE terlihat mengerikan pada tingkat zoom selain 100% (yaitu semua garis / blok tidak berskala - ini jelas merupakan masalah bagi kita yang memiliki tampilan resolusi tinggi).
— Bittercoder
2
Sepertinya grafik flot terlihat lebih bagus daripada yang lain yang pernah saya lihat. Berikut ini tautan ke 20 perpustakaan bagan JavaScript: javascript.open-libraries.com/utilities/chart/…
— B Seven
Saya suka flot juga, telah menggunakan ini berkali-kali pada aplikasi web yang berbeda sebelumnya.
— fedmich
1
Saya suka flot secara umum tetapi ingin semua data menjadi angka, jadi jika Anda ingin merencanakan sesuatu seperti penjualan per pelanggan (dengan nama) atau per produk tidak akan berfungsi
— Zachary K
60

Lihat http://www.highcharts.com !

Highcharts adalah pustaka bagan yang ditulis dalam JavaScript murni, menawarkan cara mudah untuk menambahkan bagan interaktif ke situs web Anda atau aplikasi web. Highcharts saat ini mendukung tipe bagan garis, spline, area, garis bidang, kolom, batang, pai, dan sebar.

— Torstein Hønsi
sumber
12
Layak menunjukkan bahwa perpustakaan ini gratis untuk penggunaan non-komersial, tetapi biaya uang untuk situs-tunggal dan multi-situs. Sepertinya harga yang cukup masuk akal.
— Nick Spacek
Pada awalnya itu sebagai plug tak tahu malu tetapi mereka terlihat SANGAT mengagumkan !! Itu tidak gratis untuk penggunaan komersial, saya tidak punya referensi apakah harga masuk akal atau tidak tetapi mereka terlihat ok sekilas!
— Trufa
Ini adalah pustaka charting yang sama yang digunakan di CloudFlare.com, dan itu terlihat sangat hebat. Saya baru saja akan menggunakan perpustakaan charting DevExpress, yaitu ASP.NET dan merender dan gambar di server ketika saya menemukan perpustakaan highchart. Saya langsung yakin bahwa ini adalah jalan yang harus ditempuh. Ketika saya menemukan bahwa CloudFlare, yang memiliki salah satu dashboard / analitik yang paling menarik yang pernah saya lihat, menggunakannya juga saya dijual! Saat ini saya sedang bereksperimen dengannya, dan itu berhasil dalam upaya pertama saya untuk menyematkan bagan di halaman web saya ... jadi sepertinya juga mudah digunakan!
— Loudenvier
1
Satu suara lagi untuk Highcharts. Saat ini saya menggunakannya, dan itu hebat. Mendukung jQuery, Mootools dan Prototype, dan sangat mudah untuk diatur dan digunakan.
— gnclmorais
1
Stackoverflow sendiri menggunakan highcharts stackoverflow.com/users/22656/jon-skeet?tab=reputation
— Scott
36

Ini mungkin bukan apa yang Anda cari, tetapi
Google's Chart API sangat keren dan mudah digunakan.

— Jan Gressmann
sumber
16
ini bukan javascript
— user102008
5
hanya ingat, Google Chart membutuhkan koneksi internet dan juga memiliki beberapa batasan pada jumlah permintaan klien yang diizinkan
— fedmich
@ user102008: sekarang :) (Anda masih dapat mengakses API berbasis gambar lama jika Anda mau)
— Spycho
Google Chart API tidak dapat digunakan secara offline, buruk untuk pengembangan seluler.
— oldwizard
Saya perlu melakukan Candlestick tipe horizontal, ada yang tahu kalau itu mungkin dengan google chart api?
— Tom Stickel
15

Ada perpustakaan javascript lain berdasarkan SVG. Itu disebut Protovis dan itu berasal dari Stanford Visualization Group

Ini juga memungkinkan membuat grafik dan visualisasi interaktif yang bagus.

http://vis.stanford.edu/protovis/ex/

Meskipun hanya untuk browser web modern

UPDATE: Tim protovis telah pindah ke perpustakaan lain yang disebut d3.js (Data Driven Documents) sebagaimana yang mereka katakan:

"Tim Protovis sekarang sedang mengembangkan perpustakaan visualisasi baru, D3.js, dengan dukungan yang ditingkatkan untuk animasi dan interaksi. D3 dibangun berdasarkan banyak konsep dalam Protovis"

Perpustakaan baru sekarang dapat ditemukan di:

http://mbostock.github.com/d3/

PEMBARUAN 2:

"Becak" adalah toolkit JavaScript untuk membuat grafik deret waktu interaktif. Berdasarkan d3.js yang menyederhanakan banyak pekerjaan dengan d3.js meskipun sedikit kurang kuat.

http://code.shutterstock.com/rickshaw/

— Fgblanch
sumber
Berdasarkan tampilan cepat, saya tidak berpikir D3 "menggantikan" Protovis. Saya akan mengatakan bahwa tim "pindah" karena mereka melihatnya lebih menarik dan canggih.
— David J.
14

Saya baru-baru ini mencari perpustakaan charting javascript dan saya mengevaluasi sejumlah sebelum akhirnya memilih jqplot yang sesuai dengan kebutuhan saya dengan sangat baik. Seperti yang disebutkan oleh jawaban Jean Vincent, Anda benar-benar memilih antara solusi berbasis kanvas dan svg.

Menurut saya pro dan kontra utama adalah sebagai berikut. Solusi berbasis SVG seperti Raphael (dan cabang) sangat bagus jika Anda ingin membangun grafik yang sangat dinamis / interaktif. Atau jika persyaratan pembuatan bagan jauh di luar norma (mis. Anda ingin membuat semacam bagan hibrid atau Anda telah membuat visualisasi baru yang belum dipikirkan oleh orang lain). Kelemahannya adalah kurva belajar dan jumlah kode yang harus Anda tulis. Anda tidak akan menghasilkan bagan dalam beberapa menit, bersiaplah untuk menginvestasikan waktu pembelajaran nyata dan kemudian menulis sejumlah kode yang bagus untuk menghasilkan bagan yang relatif sederhana.

Jika persyaratan pembuatan grafik Anda cukup standar, misalnya Anda ingin beberapa grafik garis atau batang atau mungkin satu atau dua diagram lingkaran, dengan interaktivitas terbatas, maka ada baiknya mencari solusi berbasis kanvas. Hampir tidak ada kurva belajar, Anda akan bisa mendapatkan grafik dasar dalam beberapa menit, Anda tidak perlu menulis banyak kode, hanya beberapa baris javascript / jquery dasar yang Anda butuhkan. Tentu saja Anda hanya akan dapat menghasilkan jenis grafik tertentu yang didukung perpustakaan, biasanya terbatas pada berbagai rasa garis, bilah, pai. Pilihan interaktivitas akan sangat terbatas, artinya tidak ada untuk banyak perpustakaan di luar sana, meskipun beberapa efek hover terbatas dimungkinkan dengan yang lebih baik.

Saya menggunakan JQplot yang merupakan solusi berbasis kanvas karena saya hanya benar-benar membutuhkan beberapa jenis grafik standar. Dari penelitian saya dan bermain-main dengan berbagai pilihan, saya menemukan fitur yang cukup lengkap (jika Anda hanya setelah grafik standar) dan sangat mudah digunakan, jadi saya akan merekomendasikannya jika persyaratan Anda serupa.

Untuk meringkas, simpel, dan inginkan bagan sekarang, kemudian gunakan JQplot. Kompleks / berbeda dan tidak terdesak waktu kemudian pergi dengan Raphael dan teman-teman.

— skorks
sumber
14

jqPlot bagus. Jika persyaratan Anda cukup "normal" dan Anda hanya ingin menggambar beberapa bagan, Anda mungkin kewalahan dengan jumlah opsi js charting. Dengan asumsi Anda tidak ingin melakukan riset berjam-jam, cukup gunakan jqPlot karena ini mungkin pilihan terbaik Anda. Ini mencakup sebagian besar kasus penggunaan untuk kebanyakan orang dengan baik. Beberapa alternatif dikhususkan untuk jenis grafik tertentu atau dibuat dengan menggunakan use case tertentu.

— Fletch
sumber
Saya pikir juga begitu setelah melakukan riset. Saat ini sepertinya salah satu pustaka grafik JS gratis terbaik yang tersedia.
— jturcotte
3

Saya akan merekomendasikan gRaphaël untuk pembuatan bagan JavaScript murni bersama dengan pustaka grafik vektor JavaScript murni yang dibuatnya ( Raphaël ).

gRaphaël saat ini mendukung Firefox 3.0+, Safari 3.0+, Opera 9.5+ dan Internet Explorer 6.0+.

— Peter McG
sumber
1
hanya ingin memberikan kepala bahwa tidak ada dokumen untuk lib ini, meskipun sangat bagus.
— Orbit
3

Lain adalah RGraph: Javascript dan perpustakaan grafik:

http://www.rgraph.net

Berbasis kanvas jadi cepat dan ada sekitar 20 jenis bagan berbeda. Ini gratis untuk penggunaan non-komersial juga!

— Richard
sumber
2

Favorit saya (flot) telah disebutkan.

Tapi pastikan untuk menyelidiki Ortho . Ini sangat baik untuk bagan pohon dan garis waktu.

— Rui Vieira
sumber
2

Kami baru saja membeli lisensi TechOctave Charts Suite untuk startup baru kami. Saya sangat merekomendasikan mereka. Lisensi sederhana. Grafik terlihat hebat! Mudah untuk memulai dan memiliki API yang kuat untuk saat kita membutuhkannya. Saya terkejut dengan betapa bersih dan dapat diperluas kode ini. Sangat senang dengan pilihan kita.

— Aaron Reis
sumber
1

Bukan perpustakaan Javascript tetapi mungkin merupakan alternatif yang cocok - lihat Google Charts di mana Anda dapat menghasilkan grafik dengan mengirimkan data querystring ke layanan web mereka.

— Luke Bennett
sumber
0

Saya dapat merekomendasikan ArcadiaCharts . Pustaka charting profesional baru untuk JavaScript dan GWT. Berjalan di semua browser tanpa plugin. Mudah dan cepat digunakan: membuat grafik tampak hebat hanya dengan beberapa baris kode. Gratis untuk penggunaan non-komersial.

— Hoang-Tran Vo
sumber
Saya bermain-main dengan ini, dan saya perhatikan tidak ada cara untuk mendapatkan lisensi komersial di situs web. Faktanya, situs web tidak jelas apakah ini gratis atau tidak.
— zumalifeguard
Kamu benar. Situs web telah diperbarui, sehingga Anda sekarang dapat dengan mudah mengetahui lisensi komersial yang sesuai dengan kebutuhan Anda: ArcadiaCharts .
— Hoang-Tran Vo
0

Dalam hal apa yang Anda butuhkan adalah grafik batang saja. Saya menerbitkan beberapa kode yang saya gunakan di proyek lama. Seseorang mengatakan kepada saya bahwa implementasi VML rusak pada IE versi terbaru, tetapi SVG seharusnya bekerja dengan baik. Mungkin akan kembali ke proyek dan merilis beberapa renderers serveride yang sudah saya miliki dan mungkin lapisan rendering WebGL. Ada sebuah tautan: http://blog.conquex.com/?p=64

— Ivan Mishonov
sumber
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.