JQuery'de Detaya İnme FusionCharts Üzerine Bir Eğitim

Yayınlanan: 2022-03-11

Verileri Görselleştirmek Okumayı Kolaylaştırır

Veri analiziyle uğraşırken çoğu şirket MS Excel veya Google Sheets'e güvenir. Bunlar güçlü araçlar olsa da, eğilimleri fark etmek zordur, büyük elektronik tablo verisi satırlarından çok daha az anlam ifade eder. Bu şekilde sunulan verilerle uğraşmak çok ilginç değil, ancak bu verilere görselleştirme eklediğinizde, işlerin yönetilmesi daha kolay hale geliyor ve bugünün öğreticisinin konusu bu - jQuery kullanarak etkileşimli grafikler yapmak.

Elektronik tablo verileriyle uğraşmak sıkıcıdır.

E-tablo verisi satırlarından eğilimleri fark etmek zordur, ancak bir kez görselleştirme eklediğinizde...

Cıvıldamak

Bu proje için FusionCharts'ın JavaScript grafik kitaplığını kullanacağım çünkü 90'dan fazla grafikten oluşan geniş bir kitaplık sunuyor, her tarayıcıyla uyumlu ve çalışması oldukça kolay. Ayrıca, işimizi kolaylaştıracak jQuery için özel bir eklenti sunuyor.

FusionCharts'ın temel JavaScript kitaplığını ve onun jQuery çizelgeleri eklentisini kullanarak temel bir çizelge oluşturarak başlayacağım, ardından ona detaya inme yeteneğini ekleyeceğim. Detaya inme, bir veri grafiğine tıklayarak bir grafikten diğerine geçmenizi sağlar.

'Veri grafiği' terimi bağlamsaldır; sütun grafiğindeki bir sütuna, çizgi grafikteki çizgilere, pasta grafiğindeki pasta dilimlerine atıfta bulunur. Ana grafikten bir veri grafiğine tıklayarak, ilgili verileri bir seviye daha derin gösteren bir alt grafik sunulur.

Ana grafikte bir veri grafiğine tıklamak, bir alt grafik getirecektir.

FusionCharts'ı Anlama

Eğitime başlamadan önce, FusionCharts'ın temel anatomisini ele alalım. Her çizelge şu temel unsurlardan oluşur:

Başlık: Grafikteki başlık. Neyin çizildiğini açıklar.
Alt başlık: Ek grafik bilgilerini belirten başlığın altındaki metin, çoğu zaman verilerin toplandığı bir zaman dilimini belirtir.
Açıklama: Bu, grafikteki her veri grafiği için bir sembol görüntüler. Belirli bir çizim, ilgili gösterge simgesine tıklanarak etkinleştirilebilir veya devre dışı bırakılabilir.
Veri grafiği: Bunlar, grafikteki veri temsilleridir. Bir veri grafiği, bir sütun grafiğindeki bir sütun, bir çizgi grafiğindeki çizgiler veya bir pasta grafiğindeki pasta dilimleri olabilir.
Araç ipucu: Fareyle bir veri grafiğinin üzerine geldiğinizde görünen ve söz konusu veri grafiği hakkında ek bilgi iletmek için kullanılan metin.

Bir Detaya İnme Grafiği Oluşturma

Başlamadan önce, bu eğitimde yapacağımız grafiğin bir ekran görüntüsü. JSFiddle'ı burada görebilir veya projenin tam kaynak koduna GitHub depomdan erişebilirsiniz.

Bu öğreticinin son jquery projesinin bir önizlemesi.

Bir detaya inme çizelgesi oluşturma sürecini beş adıma böldüm, hadi başlayalım.

Adım 1: JavaScript Dosyalarını Dahil Etme ve Grafik Konteynerini Oluşturma

Öncelikle projemizin bağımlı olduğu tüm JS dosyalarını <script> etiketini kullanarak eklememiz gerekiyor. Sayfa zaten mevcut değilse, lütfen boş bir HTML belgesi oluşturun ve aşağıdaki dosyaları <head> bölümüne ekleyin. Şimdi aşağıdaki dört dosyaya ihtiyacımız var:

küçültülmüş jQuery
FusionCharts'ın ana JS kitaplığı (hem fusioncharts.js hem de fusioncharts.charts.js )
FusionCharts' jQuery eklentisi

<head> bölümümüz şimdi şöyle görünecek:

 <!-- jQuery --> <script type="text/javascript" src="jquery.min.js"></script> <!-- FusionCharts JS file --> <script type="text/javascript" src="js/fusioncharts.js"></script> <script type="text/javascript" src="js/fusioncharts.charts.js"></script> <!-- jQuery charts plugin --> <script type="text/javascript" src="js/jquery-plugin.js"></script> <!-- custom theme file (optional) --> <script type="text/javascript" src="js/toptal.js"></script>

Artık tüm bağımlılıkları dahil ettiğimize göre, grafik için <div> kapsayıcısını oluşturmanın ve aşağıdaki HTML koduyla sayfamıza yerleştirmenin zamanı geldi:

 <div>drill-down chart will load here</div>

Şimdi, kodun içindeki jQuery'nin $ seçicisini kullanarak onu seçebiliriz:

 $("#drill-down-chart")

Not: Sayfanızda birden fazla grafiğiniz varsa, benzersiz bir id sahip her grafik için ayrı bir kapsayıcıya ihtiyacınız olacaktır.

Verileri görselleştirmek okumayı kolaylaştırır.

2. Adım: Verileri Alma ve Yapılandırma

FusionCharts, hem JSON hem de XML biçimindeki verileri kabul eder, ancak web uygulamaları arasında veri alışverişi için standart biçim haline geldiğinden JSON'u kullanmayı seçtim. Temel bir grafik için JSON veri dizisi, her veri grafiği için bir nesne içerir ve her veri çizim nesnesinin içinde ilgili etiketini ve değerini tanımlarız. Bu yapı şuna benziyor:

 "data": [{ "label": "Q1", "value": "850000", }, { "label": "Q2", "value": "2070000", },... // more data objects ]

Detaya inme grafiğimizi çizdikçe, JSON'u daha karmaşık hale geliyor. Üst ve alt çizelgeler arasındaki bağlantı, veri dizisinin her nesnesi içinde bir key - value çifti daha gerektirir. Yeni anahtar (şaşırtıcı olmayan bir şekilde link olarak adlandırılır), ana veri grafiğine tıklandığında alacağınız alt grafiğin kimliğini içerecektir. Alt grafik id tanımlama biçimi, newchart-dataFormat-childId . JSON kullandığımız için, bağladığımız her şeyin newchart-json-childId gibi görüneceğini biliyoruz. Grafiğimiz için bunu şu şekilde tanımlıyoruz:

 "data": [{ "label": "Q1", "value": "850000", "link": "newchart-json-q1" }, { "label": "Q2", "value": "2070000", "link": "newchart-json-q2" }, ... // more data objects]

Adım 3: Grafik Verilerini Ekleme

Verileri hazır hale getirdikten sonra, jQuery eklentisi tarafından sağlanan insertFusionCharts yöntemini kullanarak grafiği sayfanıza eklemenin zamanı geldi:

 $("#drill-down-chart").insertFusionCharts({ type: 'column2d', id: "mychart", width: '100%', height: '450', dataFormat: 'json', dataSource: { "chart": { "caption": "Quarterly Revenue for 2015", "paletteColors": "#9EA5FC", "xAxisName": "Quarter (Click to drill down)", "yAxisName": "Revenue (In USD)", // more chart configuration options }, "data": [ // see step-2 for explanation ], "linkedData": [ // explained in step-4 ] } })

Yukarıdaki kod parçacığını parçalayalım:

type , çizdiğimiz ana grafiğin türünü tanımlar. Bu durumda, column2d . FusionCharts kitaplığındaki her grafiğin benzersiz bir takma adı vardır. Çizmek istediğiniz grafiğin diğer adını FusionCharts'ın çizelge listesi sayfasında bulabilirsiniz.
id , grafiğimizi içeren <div> öğesinin kimliğiyle karıştırılmaması için grafiğin benzersiz kimliğini ayarlar. Bir grafiğin id , olay işleyicileri uygulamak ve yöntemleri çağırmak için bir grafik seçmek için kullanılır. Bunu Adım 5'te kullanacağız.
width ve height , grafiğin boyutunu piksel veya yüzde olarak ayarlar. %100 genişlik, grafiğe tam kap genişliğini işgal etmesini söyler.
dataFormat niteliğini kullanarak veri formatını tanımlarız. Örneğimiz için JSON kullanıyoruz, ancak XML URL'si gibi kabul edilebilir başka veri biçimleri de var. Veri biçimleri hakkında daha fazla bilgi edinmek için FusionCharts'ın resmi dokümantasyon sayfasına bakın.
dataSource , grafiğin gerçek içeriğini içerir ve içindeki chart nesnesi, resim yazısı ve alt resim yazısı gibi grafiğin yapılandırma seçeneklerini içerir. data dizisi, Adım 2'de yaptığımızdan beri tanıdık görünmelidir (çizilecek verileri içerir) ve linkedData alt grafiğin içeriğini içerir (üst grafikte bir veri grafiğini tıkladıktan sonra aldığınız grafik).

İlgili: Serbest çalışan Büyük Veri mimarlarının ilk %3'ünü işe alın.

Adım 4: Alt Grafikler için Bağlantılı Veri Dizisi Oluşturma

Artık ana grafiği tanımladığımıza göre, ana grafiği oluşturmaya çok benzer bir süreç olan her veri grafiği için bir alt grafik oluşturma zamanı. ' linkedData ' yönteminde oluşturulan bağlantılıData dizisi, her alt grafik için ayrı bir nesne tanımlayacaktır. İlk alt grafik için veriler şöyle görünür:

 "linkeddata": [{ "id": "q1", "linkedchart": { "chart": { "caption": "Monthly Revenue", "subcaption": "First Quarter", "paletteColors": "#EEDA54, #A2A5FC, #41CBE3", "labelFontSize": "16", // more configuration options }, "data": [{ "label": "Jan", "value": "255000" }, { "label": "Feb", "value": "467500" }, //more data] } }, //content for more child charts

id , Adım 2'de tanımladığımız bireysel alt grafiğin kimliğidir. linkedChart , o grafiğin gerçek içeriğini içermesi bakımından Adım 3'teki dataSource benzer. Daha sonraki “Tasarımın Grafik Nitelikleriyle Geliştirilmesi” bölümünde ayrıntılı olarak ele alacağım, grafik nesnesinin içine giren çok sayıda başka nitelik vardır.

Adım 5: Özel Detaya Git Yapılandırması

Çeşitli Grafik Türleri

Şimdiye kadar, örnek kodumuz aynı grafik türünü paylaşan hem üst hem de alt grafiklere sahiptir. Farklı bir grafik türünün detayına inmek istiyorsanız (örneğin, sütundan pastaya), bunu fusionchartsrendered olayını bağlayarak yaparsınız.

 $('#drill-down-chart').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", overlayButton: { message: 'BACK', // Set the button to show diff message bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

Yukarıdaki kodda, fusionchartsrendered olayı, tüm alt çizelgelerin türünü ve herhangi bir bindirme düğmesi seçeneklerini tanımlayan configureLink yöntemini çağıracaktır. Ayrıca her alt grafik için ayrı grafik türleri belirleyebilirsiniz. configureLink yönteminde birçok seçenek mevcuttur, bu nedenle FusionCharts'tan API referans belgelerini incelemeyi faydalı bulabilirsiniz.

Farklı Div'lerde Grafik Oluşturma

Yapabileceğiniz bir başka harika şey de, alt grafiği, ebeveyniyle aynı olandan ziyade farklı bir kapta oluşturmaktır. Bunun için, ana grafik kapsayıcısından sonra ayrı bir HTML <div> kapsayıcı tanımlayın ve kimliğini aşağıda gösterildiği gibi renderAt özniteliğine iletin:

 $('#chart-container').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", renderAt:"chart-container2", overlayButton: { message: 'BACK', // Set the button to show diff messafe bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

renderAt özniteliğine verilen değer, alt grafiğin oluşturulacağı <div> kimliğini belirtir ( chart-container2 ).

Grafik Özellikleriyle Tasarımı İyileştirme

Bu öğreticiyi izleyerek işlevsel bir çizelge elde edeceksiniz, ancak bunu böyle bırakırsanız biraz çirkin olacaktır. Daha çekici bir sunum için kozmetik "grafik özniteliklerinden" yararlanmanız gerekir. Grafik öznitelikleri, chart nesnesi içinde tanımlanır ve işleme seçeneklerini özelleştirmek için kullanılır. Bu temel yapılandırılabilir öznitelikleri gözden geçirirken FusionCharts açıklayıcı grafiğine başvurmayı yararlı bulabilirsiniz:

paletteColors , veri çizimlerinin rengini tanımlar. Burada tek bir renk verirseniz tüm sütunlar o renk olur. Birden çok renk verirseniz, ilk sütun ilk değeri, ikinci sütun ikinci değeri alır vb.
plotSpacePercent , sütunlar arasındaki boşluğu kontrol eder. Bunun için varsayılan değer 20'dir (değer bir int'dir, ancak birim bir yüzdedir) ve izin verilen aralık 0-80'dir. Sıfır değeri, sütunların toplanıp birbirine yapışmasını sağlar.
baseFont , grafiğin yazı tipi ailesini tanımlar. İstediğiniz yazı tipini kullanabilirsiniz; Grafiğimde Google'ın Open Sans'ını kullandım. Grafiğinizde kullanmak için harici yazı tipi dosyasını HTML sayfanıza eklemeniz yeterlidir.
plotToolText araç ipuçlarını özelleştirmenize izin verir. $label ve * $dataValue gibi makroları kullanarak, belirli bir veri grafiğindeki belirli bilgileri bir <div> içinden gösterebilir, ardından satır içi CSS kullanarak <div> stilini oluşturabilirsiniz. Örneğimizde yaptığım şey:

 "plotToolText": "<div>$label: $dataValue</div>"

theme , grafik nesnenizi çok sayıda grafik özelliğiyle karıştırmak yerine, grafik niteliklerinizi farklı bir dosyada tanımlamanıza ve bunları bir kez burada uygulamanıza olanak tanır. Bu eğitim için tema dosyasını - toptal.js - projenin GitHub deposunun JS klasöründe bulabilirsiniz.

Anlatacaklarım bu kadar, ancak bir çizelge için yüzden fazla öznitelik var, bu yüzden daha fazlasını keşfetmek istiyorsanız, lütfen FusionCharts'ın çizelge öznitelikleri sayfasını ziyaret edin ve kendi özel çizelge türünüzü arayın.

Daha Fazla FusionChart ve jQuery Kaynağı

jQuery kullanarak bir detaya inme grafiği oluşturmanın en önemli unsurlarını ele almama rağmen, bunu kendi başınıza yapmaya çalıştığınızda biraz yardıma ihtiyacınız olma ihtimali yüksek. O an için, işte bazı ek kaynaklar:

jQuery çizelgeleri eklentisi: İlham almak için, bazı canlı örnekleri görmek için resmi jQuery çizelgeleri eklenti sayfasını ziyaret edin.
Belgeleme: Bir şeyi çözemiyorsanız, bakmanız gereken ilk yer belgelerdir. Burada, jQuery eklentisi ve detaylandırma tablosu (bağlantılı çizelgeler olarak da bilinir) için kullanışlı bağlantılar bulunmaktadır.
Demolar: Her grafik kitaplığı, yeteneklerini sergilemek için canlı örnekler sunar ve FusionCharts da farklı değildir. Bazı fikirlere ihtiyacınız varsa, tam kaynak koduyla 800'den fazla canlı örnekten oluşan demo galerisine gidin. Yapmaya çalıştığınız şeyin zaten mevcut olması için iyi bir şans var. Sıfırdan başlamanıza gerek yok; sadece kemanı çatalla ve oradan devam et!
Daha fazla uzantı: Vanilla JavaScript veya jQuery kullanmıyorsanız, bu sayfada FusionCharts tarafından sunulan diğer eklentileri ve sarmalayıcıları keşfedebilirsiniz. Angular, React, Java, ASP.NET vb. gibi çeşitli kitaplıklar ve çerçeveler için özel eklentileri vardır.

Not: Aşağıdaki yorumlar bölümünde takılacağım, bu yüzden makalem hakkında olabilecek tüm sorularınızı göndermekten çekinmeyin. Yardım etmekten mutluluk duyarım!

İlgili: Tahmine Dayalı Sosyal Ağ Analizi için Veri Madenciliği