İlk Etkileşimli JavaScript Grafiğinizi Oluşturma

b) Bundan sonra, verilerimizi dahil edelim:

var data = [{x: 'DVD player', y: 19},{x: 'Home theater system', y: 24},{x: 'Karaoke player', y: 30},{x: 'Projector', y: 34},{x: 'TV receiver', y: 42}];

c) Ardından, ilgili kurucu işlevini çağırarak ne tür bir grafik istediğimizi belirtiriz:

    var chart = anychart.bar();

d) Görüntüleyenler için işleri daha net hale getirmek için, grafiğe bir başlık vermek istiyorum:

    chart.title('Product Sales');

e) Şimdi bir dizi oluşturalım:

    chart.addSeries(data);// or we can specify a simple dataset within the method:chart.addSeries([19, 24, 30, 34, 42]);

f) Grafiğimiz bir konteynere konulmalı, bu yüzden yarattığımızı belirledik:

    chart.container('container');

g) Her şey iyi görünüyor, bu yüzden şimdi grafiğimizi çizebiliriz:

    chart.draw();

İşte sonuç şöyle görünüyor:

Aşağıdakiler sizin rahatınız için tüm kod:

Oldukça basit görünüyor değil mi? Ve şimdi toplam satışları kategoriye göre rahatlıkla karşılaştırabiliriz.

Çok Serili ve Yığılmış Çubuk Grafiklerinin Oluşturulması

Artık, JavaScript’le grafik çizmenin temellerini öğrendik, daha fazla bilgi veren biraz daha karmaşık bir grafik oluşturmaya devam edebiliriz. Daha önce de belirttiğim gibi, size çok-serili bir çubuk grafik ve daha sonra bir istiflenmiş olanı yapmanın kolay bir yolunu göstereceğim.

Temel olarak, prosedürler oldukça benzerdir. Her zaman olduğu gibi, her şey veri ile başlar.

Tablodan Veri

Yukarıdaki çubuk grafik bağlamında, bir değişken (ürün satış verileri serisi) ve çeşitli kategoriler (ürün türleri) vardı. Ayrıca, yığılmış çubuk grafiklerinin özü olan her değerin bileşimini görüntülemek için daha ayrıntılı verilere ihtiyacımız var.

Bunun için sayfada zaten görüntülenen verileri kullanabiliriz. Örneğin, zaten bir HTML tablonuz varsa, kolayca bir grafik oluşturabilirsiniz. Eğer AnyChart kullanıyorsan Veri Bağdaştırıcısı modülü İhtiyacınız olan tek şey bu tabloyu veri kaynağı olarak belirtmektir.

1) Veri adaptörünü edinin:

2) Verileri tablodan hazırlayın:

    var tableData = anychart.data.parseHtmlTable('#tableWithData');

3) Bir grafik oluşturun ve veri kaynağını belirtin:

    var chart = anychart.bar();chart.data(tableData);

Anında ortaya çıkan sonuç, örneğin, her bir ürünün performansını her bir kategoride hızlı bir şekilde karşılaştırmamızı sağlayan çok-serili bir çubuk grafiktir.

Seri Tipinin Değiştirilmesi

Veriler dahil olmak üzere tüm gerekli ayrıntılar önceden belirtilmiştir. Artık seri tipini değiştirebilir ve geleneksel çok-serili olandan bir yığın çubuk grafik alabiliriz. Değerlerin yığılması için tek bir kod satırına ihtiyacınız olduğu için hiç de zor değil:

    chart.yScale().stackMode('values');

İşte bu kadar!

Bu çoklu dizinin yapılandırmasını gerçekten değiştirmeden, yalnızca bir yığın çubuk grafik oluşturduk. Sonuç olarak, toplam satışları, makalenin en başından itibaren tek seri çubuk grafikle kategoriye göre karşılaştırmaya hazır değiliz, aynı zamanda, bir kategoriyi toplamından daha küçük veya daha büyük yapmaktan sorumlu olan ürünün hangisi olduğunu da belirleyebiliriz. .

Son hedefimizin% 100 yığılmış bir çubuk grafik olduğu konusunda önceden kararlaştırdığımızdan, bunu elde etmek için yalnızca modu değiştirelim:

    chart.yScale().stackMode('percent');

Kısmen bütün ilişkileri vurgulamanıza ve her bir ürünün toplam kategorisine olan katkısını değerlendirmenize izin veren% 100 yığılmış çubuk grafiktir.

Tasarım Özelleştirme

Tasarım, web görselleştirme, dikkat çekmek, netliği artırmak ve görsel bütünlüğünüzü web projenizde korumak için çok önemlidir. Bu grafik kütüphanesi ile yardımcı olarak, kişiselleştirme oldukça basit.

Metin Ekleme

Daha fazla netlik için, görselleştirmenizi ek metinlerle sağlayabilirsiniz. Örneğin dikey eksene bir başlık vereceğim ve geçici olarak bir grafik etiketi ekleyeceğim:

    chart.xAxis().title('Products');chart.label({text: 'Classified!'});

Renk ayarları

Bir paletle ( chart.palette () ) renk ekleyebilir ve arka plan ayarlarını ( chart.background () ) başka şeylerin arasında değiştirebilirsiniz. Ya da bir tema kullanabilirsiniz:

Sonra grafik ayarlarında belirtmemiz gerekiyor:

    anychart.theme(anychart.themes.wines);

Grafik Etkileşimi

JavaScript grafiğini en az biraz etkileşimli yapmak çok da önemli değil.

Muhtemelen en temel yaklaşım, vurgulu durumun veri noktaları üzerinde etkinleştirilmesi, renklerin değiştirilmesi ve işaretleyicilerin eklenmesi veya değiştirilmesidir. Seçme durumu, her noktanın tıklandıktan sonra nasıl göründüğünü belirler.

Bazı basit vurgulu ve seçime dayalı etkileşimlilik varsayılan olarak şu anda dahil edilmiştir, şu anda yukarıdaki örneğe hiçbir şey eklemeyeceğiz. İsterseniz, temel etkileşimi keşfetmek için lütfen ona dönün.

Bir nokta üzerinde durulduğunda yüzebilen araç ipucu öğesi hakkında konuşmaya değer. Her zaman bir noktaya ait hangi seriler, hangi değeri temsil ettikleri vb. Hakkında bazı yararlı bilgiler göstererek araç ipuçlarını iyi kullanmaya çalışıyorum. Herhangi bir şey göstermek için araç ipuçlarınızı kolayca ayarlayabilirsiniz. Araç ipucunu tanıtıyoruz ve içinde neler gösterileceğini belirliyoruz:

    var tooltip = chart.tooltip();tooltip.displayMode('union');tooltip.textFormatter('{%SeriesName}: {%Value} ({%YPercentOfCategory}%)');

İşte sonuç:

Bu, ayrıntılara girebilmek için özelleştirme seçeneklerine kısa bir bakışta başlı başına bir makale olacaktır. Şimdilik okumanı tavsiye ederim. etkileşim bölümü Daha fazla bilgi için dokümantasyon.

Sonuç

Gördüğünüz gibi, JavaScript ile etkileşimli grafikler oluşturmak zor değil. Üstelik tüm örnekleri öğreticimde bulabilirsiniz. CodePen koleksiyonunda ve bunları işinizde kolayca kullanın. Sadece kodu kopyalayın, verilerimi kendinize göre değiştirin ve projenizi çok hızlı bir şekilde hazırlayın.

Lütfen, kullandığınız kitaplığın demolarına dikkat ederek dokümantasyonu ve / veya API referansını kontrol etmeyi unutmayın. bu AnyChart galerisi . Genellikle, ihtiyacınız olan şeylere yakın bir şey olup olmadığını görmek, en iyi uyan bir örnek bulmak, bazı basit değişiklikler yapmak ve daha sonra ihtiyacınız olan şekilde kullanmak karmaşık değildir.