JavaScript'te bir pasta grafik oluşturmak istiyorum. Arama sırasında Google Charts API'sini buldum. JQuery kullandığımız için Google Charts için jQuery entegrasyonunun mevcut olduğunu buldum .

Ama benim sorunum burada gerçek verilerin çizelgeleri oluşturmak için Google sunucusuna gönderilmesi. Verilerin Google'a gönderilmesini engellemenin bir yolu var mı? Verilerimi üçüncü bir tarafa göndermekle ilgileniyorum.

jqPlot oldukça iyi görünüyor ve açık kaynak.

İşte en etkileyici ve en güncel jqPlot örneklerine bir bağlantı .

Flot

Sınırlamalar: çizgiler, noktalar, doldurulmuş alanlar, çubuklar, pasta ve bunların kombinasyonları

Etkileşim perspektifinden bakıldığında, Flot sizi olabildiğince Flash grafiklere olabildiğince yaklaştıracaktır jQuery. Grafik çıktısı oldukça düzgün ve harika görünmekle birlikte, veri noktalarıyla da etkileşimde bulunabilirsiniz. Bununla demek istediğim, bir veri noktasının üzerine gelme ve grafikteki bu noktanın değeri hakkında görsel geri bildirim alma yeteneğine sahip olabileceğinizdir.

Flot'un gövde versiyonu pasta grafiklerini destekler.

Flot Zoom özelliği.

Buna ek olarak, belirli bir "bölge" için verileri geri almak için grafiğin bir parçasını seçme olanağına da sahipsiniz. Bu "bölgelemeye" ikincil bir özellik olarak, grafik üzerinde bir alan seçebilir ve veri noktalarını biraz daha yakından görmek için yakınlaştırabilirsiniz. Çok güzel .

Mini grafikler

Sınırlamalar: Pasta, Çizgi, Çubuk, Kombinasyon

Sparklines, benim en sevdiğim mini grafik aracıdır. Gösterge tablosu tarzı grafikler için gerçekten harika (bir sonraki girişinizde Google Analytics gösterge tablosunu düşünün). Çok küçük oldukları için, satıra dahil edilebilirler (yukarıdaki örnekte olduğu gibi). Tüm grafik eklentilerinde kullanılabilecek bir başka güzel fikir, kendini yenileme yetenekleridir. Mouse-Speed ​​demoları size canlı grafiğin gücünü en iyi şekilde gösterir.

Sorgu Grafiği 0.21

Sınırlamalar: Alan, Çizgi, Çubuk ve bunların kombinasyonları

jQuery Chart 0.21, söylenmesi gereken en güzel görünümlü grafik eklentisi değil. İşleyebileceği grafikler söz konusu olduğunda işlevsellik açısından oldukça basittir, ancak biraz zaman ve çaba harcayabilirseniz esnek olabilir.

Bir grafiğe değer eklemek nispeten basittir:

.chartAdd({

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

jQchart

Sınırlamalar: Bar, Line

jQchart tuhaf bir şey, animasyon geçişleri ve grafiğe sürükleme / bırakma işlevselliği oluşturdular, ancak biraz hantal ve görünüşte anlamsız. CSSKurulumu doğru yaparsanız güzel görünümlü grafikler oluşturur , ancak orada daha iyisi vardır.

TufteGraph

Sınırlamalar: Çubuk ve Yığılmış Çubuk

Tuftegraph kendisini “annenize göstereceğiniz güzel çubuk grafikler” olarak satıyor. Yaklaşıyor, Flot daha güzel, ancak Tufte çok hafif olmasını sağlıyor. Bununla birlikte kısıtlamalar getirse de - seçim yapabileceğiniz birkaç seçenek var, böylece size verileni alırsınız. Hızlı bir kazanç çubuk grafiği için kontrol edin.

Burada tonlarca harika öneri, sadece iyi bir önlem için ZingChart'ı yığına atacaksın . Kısa süre önce , kitaplık için grafik oluşturmayı ve özelleştirmeyi daha da kolaylaştıran bir jQuery sarmalayıcısı yayınladık . CDN bağlantıları aşağıdaki demoda yer almaktadır.

Ben ZingChart ekibindeyim ve herhangi birinizin sahip olabileceği soruları yanıtlamak için buradayız!

$('#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>

Bahsedilmeyen birkaç kişi daha:

Mini turtalar, çizgiler ve barlar için Peity parlaktır, basittir, küçücüktür , hızlıdır, gerçekten zarif işaretleme kullanır.

Flot ile ilişkisinden emin değilim (adı verilir), ancak Flotr2 oldukça iyi, kesinlikle Flot'tan daha iyi turtalar yapıyor.

Bluff güzel görünümlü çizgi grafikler oluşturuyor, ancak turtalarıyla ilgili biraz sorun yaşadım.

Peşinde olduğum şey değil, ama başka bir ticari ürün (Highcharts gibi) TeeChart .

Chart.js oldukça kullanışlıdır ve diğer birçok grafik türünü de destekler.

Hem jQuery ile hem de olmadan kullanılabilir.

Sahada, süper akıcı animasyonlar ve performans için Canvas'ı kullanan gelişmiş Navigasyon Tabloları sunan yeni bir oyuncu var:

https://zoomcharts.com/

Grafik örnekleri:

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

Bu kitaplık hakkında harika olan şey:

• Diğerleri dilim genişletilebilir
• Pie, hiyerarşik yapılar için ayrıntılı inceleme sunar (örneğe bakın)
• kendi veri kaynağı denetleyicinizi kolayca yazın veya basit bir json dosyası sağlayın
• yüksek çözünürlüklü görüntüleri kutudan dışa aktar
• tam dokunma desteği, iPad, iPhone, android vb. üzerinde sorunsuz çalışır.

Grafikler ticari olmayan kullanım için ücretsizdir , ticari lisanslar ve teknik destek de mevcuttur.

Ayrıca etkileşimli Zaman çizelgeleri ve Net Grafikler de kullanmanız için oradadır.

Grafikler, kapsamlı API ve Ayarlar ile birlikte gelir, böylece grafiklerin her yönünü kontrol edebilirsiniz.

Javascript için TeeChart'ı kontrol edin

• Reklam amaçlı olmayan kullanımlar için bedava.

• JQuery , Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript vb. İçin eklentiler içerir .

• Etkileşimli demolar burada ve burada .

• Bazı demoların bazı ekran görüntüleri: