Treemap ve Sunburst Grafiklerde Veri Noktalarını JavaScript ile Özelleştirme

Giriş

Diğer PowerPoint grafik türlerinin yanı sıra iki “hiyerarşik” tür vardır - Treemap ve Sunburst grafik (aynı zamanda Sunburst Grafiği, Sunburst Diyagramı, Radial Grafik, Radial Çizim ya da Çok Katmanlı Pasta Grafiği olarak da bilinir). Bu grafikler, yapraklardan dalın tepesine kadar bir ağaç şeklinde düzenlenmiş hiyerarşik verileri gösterir. Yapraklar, seri veri noktalarıyla tanımlanır ve her bir sonraki iç içe grup seviyesi ilgili kategoriyle tanımlanır. Aspose.Slides for Node.js via Java, Sunburst Chart ve Treemap’in veri noktalarını JavaScript’te biçimlendirmeye olanak tanır.

İşte bir Sunburst grafiği, Series1 sütunundaki veriler yaprak düğümleri tanımlarken, diğer sütunlar hiyerarşik veri noktalarını tanımlar:

todo:image_alt_text

Yeni bir Sunburst grafiği sunuma eklemeye başlayalım:

var pres = new aspose.slides.Presentation();
try {
    var chart = pres.getSlides().get_Item(0).getShapes().addChart(aspose.slides.ChartType.Sunburst, 100, 100, 450, 400);
    // ...
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Ayrıca bakınız

PowerPoint Sunum Grafiklerini JavaScript’te Oluşturma veya Güncelleme

Grafiğin veri noktalarını biçimlendirmeye ihtiyaç duyulursa, aşağıdakileri kullanmalıyız:

ChartDataPointLevelsManager, ChartDataPointLevel sınıfları ve ChartDataPoint.getDataPointLevels metodu Treemap ve Sunburst grafiklerinin veri noktalarını biçimlendirmeye erişim sağlar. ChartDataPointLevelsManager çok seviyeli kategorilere erişim için kullanılır - bu, ChartDataPointLevel nesnelerinin kapsayıcısını temsil eder. Temelde bu, veri noktalarına özgü eklenmiş özelliklere sahip ChartCategoryLevelsManager için bir sarmalayıcıdır. ChartDataPointLevel sınıfının iki yöntemi vardır: getFormat ve getDataLabel ve ilgili ayarlara erişim sağlar.

Veri Noktası Değerini Göster

“Leaf 4” veri noktasının değerini göster:

var dataPoints = chart.getChartData().getSeries().get_Item(0).getDataPoints();
dataPoints.get_Item(3).getDataPointLevels().get_Item(0).getLabel().getDataLabelFormat().setShowValue(true);

todo:image_alt_text

Veri Noktası Etiketini ve Rengini Ayarla

“Branch 1” veri etiketini kategori adı yerine seri adı (“Series1”) gösterecek şekilde ayarlayın. Ardından metin rengini sarıya ayarlayın:

var branch1Label = dataPoints.get_Item(0).getDataPointLevels().get_Item(0).getLabel();
branch1Label.getDataLabelFormat().setShowCategoryName(false);
branch1Label.getDataLabelFormat().setShowSeriesName(true);
branch1Label.getDataLabelFormat().getTextFormat().getPortionFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
branch1Label.getDataLabelFormat().getTextFormat().getPortionFormat().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "YELLOW"));

todo:image_alt_text

Veri Noktası Dal Rengini Ayarla

“Steam 4” dalının rengini değiştir:

var pres = new aspose.slides.Presentation();
try {
    var chart = pres.getSlides().get_Item(0).getShapes().addChart(aspose.slides.ChartType.Sunburst, 100, 100, 450, 400);
    var dataPoints = chart.getChartData().getSeries().get_Item(0).getDataPoints();
    var stem4branch = dataPoints.get_Item(9).getDataPointLevels().get_Item(1);
    stem4branch.getFormat().getFill().setFillType(java.newByte(aspose.slides.FillType.Solid));
    stem4branch.getFormat().getFill().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "RED"));
    pres.save("pres.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

todo:image_alt_text

SSS

Sunburst/Treemap’teki segmentlerin sırasını (sıralamasını) değiştirebilir miyim?

Hayır. PowerPoint segmentleri otomatik olarak sıralar (genellikle azalan değerlere göre, saat yönünde). Aspose.Slides bu davranışı yansıtır: sıralamayı doğrudan değiştiremezsiniz; bunu verileri ön işlemden geçirerek elde edersiniz.

Sunum teması segmentlerin ve etiketlerin renklerini nasıl etkiler?

Grafik renkleri, doldurmaları/yazı tiplerini açıkça ayarlamadığınız sürece sunumun tema/renk paleti öğesinden devralınır. Tutarlı sonuçlar için, gerekli seviyelerde katı dolgu ve metin biçimlendirmesini sabitleyin.

PDF/PNG’ye dışa aktarma, özel dal renklerini ve etiket ayarlarını korur mu?

Evet. Sunumu dışa aktarırken, grafik ayarları (dolgu, etiketler) çıkış formatlarında korunur çünkü Aspose.Slides grafik biçimlendirmesi uygulanmış olarak render eder.

Grafiğin üzerine özel kaplama yerleştirmek için bir etiketin/elemanın gerçek koordinatlarını hesaplayabilir miyim?

Evet. Grafik düzeni doğrulandıktan sonra, öğeler için gerçek X ve gerçek Y değerleri (örneğin bir DataLabel) mevcuttur; bu, kaplamaların hassas konumlandırılmasına yardımcı olur.

JavaScript Kullanarak Sunumlarda Pasta Grafikleri Özelleştirme