Tutorials

/

Donut Chart Elementi Nasıl Kullanılır?

Donut Chart, kategorik verilerin toplam içindeki yüzdesel payını göstermek için kullanılır; merkez etiketi kaldırılabilir ve veri etiketleri para birimi formatında gösterilebilir.

Verilerin toplam içindeki payını ve yüzdesel dağılımını görselleştirmenin en estetik yolu olan Donut Chart; pazar payı analizinden bütçe dağılımlarına kadar pek çok senaryoda iç kısmındaki boşluk sayesinde klasik pasta grafiklerine kıyasla çok daha modern ve okunabilir bir sunum sunar.

Başlamak için Tables alanından BudgetData adında bir tablo oluşturun ve ekrandaki gibi doldurun. Ardından örnek verileri ekleyen InsertBudgetData aksiyonunu oluşturun. Aksiyonu uygularken BudgetData kısmını silip yeniden yazarak Enter'a basın; bu adım, tablo adının önüne doğru şema adının eklenmesini sağlar. Uygulamayı test etmek için TEST butonuna basın. Aynı adımları, verileri sağlayan ve yüzdelik hesaplayan GetBudgetData aksiyonu için de tekrarlayın ve kaydedin. Sayfanın açılışında verilerin hazır olması için GetBudgetData aksiyonunu Initial Action olarak bağlayın.

UI Design modülünden sayfaya bir Label ve Donut Chart ekleyin. Label elementinin Value alanına "Category-Based Sales Distribution" yazın, Column'u ortalayın ve Text stilini Heading 2 olarak ayarlayın. Donut Chart'ın ortasındaki metni kaldırmak için ChartLabel'a tıklayıp Properties alanındaki Text alanını temizleyin; ardından Styling panelinden yüksekliği 500 px olarak ayarlayın. DataSource alanından GetBudgetData aksiyonunu ekleyerek Data Label, Tooltip Custom Content, Data Field ve Data Background Color alanlarını doldurun. ShowDataLabels seçeneğini açık konuma getirin ve DataLabelFormatter alanından Money-turkishlira formatını seçin.

Sağ üst köşedeki Preview butonuyla uygulamayı test ettiğinizde, kategorilere göre toplam satış tutarlarının Donut Chart üzerinde oransal dilimler hâlinde başarıyla görüntülendiğini göreceksiniz.