JavaScript Kullanarak Sunumlarda Grafik Eksenlerini Özelleştir

Bu sayfa ne hakkında

Java ile Node.js için Aspose.Slides kullanarak PowerPoint sunumlarında grafik eksenlerini raporlar ve görselleştirmeler için nasıl özelleştireceğinizi keşfedin.

Genel Bakış

Bu makale, Aspose.Slides for Node.js via Java ile grafik eksenlerini nasıl özelleştireceğinizi açıklar. Hesaplanan eksen değerleri, grafik satır ve sütunlarının değiştirilmesi, eksen görünürlüğü, kategori etiketi ve tik işareti aralıkları, tarih kategorileri ve biçimlendirme, başlık dönüşü, eksen konumlandırması ve görüntü birimleri ele alınır.

Grafiklerde Dikey Eksende Maksimum Değerleri Al

Bir Sunum oluşturun ve varsayılan verilerle bir alan grafik ekleyin. Hesaplanan eksen değerlerini okumadan önce grafik düzeninin güncel olmasını sağlamak için validateChartLayout çağırın.

Eksen sınırları için getActualMaxValue ve getActualMinValue okuyun, tik aralıkları için ise getActualMajorUnit ve getActualMinorUnit çağırın. Tarih eksenleriyle ilgili zaman birimi ölçeklerini sağlamak için getActualMajorUnitScale ve getActualMinorUnitScale kullanılır. Örnek bu değerleri yerel değişkenlerde saklar ve grafiği kaydeder.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.Area, 100, 100, 500, 350);
    chart.validateChartLayout();

    var maxValue = chart.getAxes().getVerticalAxis().getActualMaxValue();
    var minValue = chart.getAxes().getVerticalAxis().getActualMinValue();

    var majorUnit = chart.getAxes().getVerticalAxis().getActualMajorUnit();
    var minorUnit = chart.getAxes().getVerticalAxis().getActualMinorUnit();

    var majorUnitScale = chart.getAxes().getVerticalAxis().getActualMajorUnitScale();
    var minorUnitScale = chart.getAxes().getVerticalAxis().getActualMinorUnitScale();

    presentation.save("AxisValues_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Verileri Eksenler Arasında Değiştir

switchRowColumn kullanarak grafik verilerindeki seriler ve kategoriler arasındaki rolleri değiştirin. Her önceki kategori bir seri, her önceki seri ise bir kategori olur. Bu, verilerin nasıl gruplanacağını değiştirir; yatay ve dikey eksenleri değiştirmez. Örnek, varsayılan verileri Sheet1!A1:D5 adresine, başlık satırı ve kategori sütunu dahil olmak üzere bağlamak için setRange kullanır, ardından satır ve sütunları değiştirir. Dört seri ve üç kategori içeren bir grafik kaydeder.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 100, 100, 400, 300);
    chart.getChartData().setRange("Sheet1!A1:D5");
    chart.getChartData().switchRowColumn();

    presentation.save("SwitchChartRowColumns_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Çizgi Grafiklerde Dikey Ekseni Devre Dışı Bırak

Dikey eksende false ile setVisible çağırarak ekseni gizleyin. Örnek, varsayılan verilerle bir çizgi grafik oluşturur ve dikey ekseni gizlenmiş olarak kaydeder.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.Line, 100, 100, 400, 300);
    chart.getAxes().getVerticalAxis().setVisible(false);

    presentation.save("HiddenVerticalAxis.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Çizgi Grafiklerde Yatay Ekseni Devre Dışı Bırak

Yatay eksende false ile setVisible çağırarak ekseni gizleyin. Örnek, varsayılan verilerle bir çizgi grafik oluşturur ve yatay ekseni gizlenmiş olarak kaydeder.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.Line, 100, 100, 400, 300);
    chart.getAxes().getHorizontalAxis().setVisible(false);

    presentation.save("HiddenHorizontalAxis.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Bir Kategori Ekseni Değiştir

setCategoryAxisType kullanarak tarih veya metin kategori ekseni seçin. Bu örnek ExistingChart.pptx dosyasını gerektirir; ilk slayttaki ilk şekil bir grafiktir ve kategori hücreleri sayısal Excel tarih değerleri içerir. Yatay ekseni tarih ekseni olarak değiştirir. setAutomaticMajorUnit false, setMajorUnit 1 ve setMajorUnitScale TimeUnitType.Months ile ana tikler bir‑ay aralıklarla yer alır.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation("ExistingChart.pptx");
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().get_Item(0);
    chart.getAxes().getHorizontalAxis().setCategoryAxisType(aspose.slides.CategoryAxisType.Date);
    chart.getAxes().getHorizontalAxis().setAutomaticMajorUnit(false);
    chart.getAxes().getHorizontalAxis().setMajorUnit(1);
    chart.getAxes().getHorizontalAxis().setMajorUnitScale(aspose.slides.TimeUnitType.Months);

    presentation.save("ChangeChartCategoryAxis_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Kategori Ekseni Etiket Aralıklarını Kontrol Et

Grafikte çok sayıda kategori olduğunda, kategorileri veya veri noktalarını kaldırmadan görünür eksen etiketlerinin sayısını azaltın. setAutomaticTickLabelSpacing false olarak ayarlayın, ardından istenen kategori aralığını setTickLabelSpacing ile gönderin. Metin kategorileri normal sıralarında iken sayım ilk kategoriden başlar:

Aralık	Örnekte görüntülenen etiketler
1	Kategori 1, Kategori 2, Kategori 3, … Kategori 24
2	Kategori 1, Kategori 3, Kategori 5, … Kategori 23
3	Kategori 1, Kategori 4, Kategori 7, … Kategori 22

3 aralığı her üçüncü etiketi gösterir, gösterilen etiketler arasında iki etiket gizlenir. İlgili sütunlar kaldırılmaz. Otomatik aralık, mevcut boşluğa göre bir aralık seçer; her etiketi mutlaka göstermez.

Tik işaretleri ayrı bir kontrol sahibidir. setAutomaticTickMarksSpacing false yapın ve setTickMarksSpacing ile aralıklarını ayarlayın. Örneğin, 1 her kategori aralığında bir tik işareti bırakırken etiketler yalnızca her üçüncü kategoride görünür. Görünür bir stil ile setMajorTickMark kullanın, böylece sonucu görebilirsiniz. Otomatik‑aralık ayarlarından birini true yaparak grafiğin tekrar otomatik seçmesini sağlayabilirsiniz.

Aşağıdaki bağımsız örnek 24 kategori ve bir seri oluşturur, ardından CategoryAxisIntervals.pptx içinde üç slayt kaydeder: otomatik aralık, bağımsız tik işaretleriyle manuel etiket aralığı ve otomatik aralığın geri yüklenmesi. İki kopya orijinal grafik verilerini korur. Giriş sunumu gerekmez. Yatay etiket metni, yoğunluk farkını görmek için yardımcı olur.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 30, 40, 660, 320);

    chart.setLegend(false);
    chart.getChartData().getCategories().clear();
    chart.getChartData().getSeries().clear();

    var workbook = chart.getChartData().getChartDataWorkbook();
    workbook.clear(0);

    var series = chart.getChartData().getSeries().add(aspose.slides.ChartType.ClusteredColumn);
    for (var i = 0; i < 24; i++) {
        var categoryCell = workbook.getCell(0, i + 1, 0, "Category " + (i + 1));
        chart.getChartData().getCategories().add(categoryCell);
        var valueCell = workbook.getCell(0, i + 1, 1, 10 + i % 6 * 5);
        series.getDataPoints().addDataPointForBarSeries(valueCell);
    }

    var axis = chart.getAxes().getHorizontalAxis();
    axis.setCategoryAxisType(aspose.slides.CategoryAxisType.Text);
    axis.getTextFormat().getTextBlockFormat().setRotationAngle(0);
    axis.getTextFormat().getPortionFormat().setFontHeight(12);
    axis.setMajorTickMark(aspose.slides.TickMarkType.Outside);
    axis.setAutomaticTickLabelSpacing(true);
    axis.setAutomaticTickMarksSpacing(true);

    // Slayt 2: her üçüncü etiketi göster, ancak her kategori için bir tik işareti tut.
    var manualSlide = presentation.getSlides().addClone(slide);
    var manualChart = manualSlide.getShapes().get_Item(0);
    var manualAxis = manualChart.getAxes().getHorizontalAxis();
    manualAxis.setAutomaticTickLabelSpacing(false);
    manualAxis.setTickLabelSpacing(3);
    manualAxis.setAutomaticTickMarksSpacing(false);
    manualAxis.setTickMarksSpacing(1);

    // Slayt 3: grafiğin her iki aralığı da tekrar seçmesine izin ver.
    var restoredSlide = presentation.getSlides().addClone(manualSlide);
    var restoredChart = restoredSlide.getShapes().get_Item(0);
    restoredChart.getAxes().getHorizontalAxis().setAutomaticTickLabelSpacing(true);
    restoredChart.getAxes().getHorizontalAxis().setAutomaticTickMarksSpacing(true);

    presentation.save("CategoryAxisIntervals.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Otomatik aralık (slayt 1): Bu görüntüde her ikinci kategori etiketi gösterilir ve iki satıra bürünür. Otomatik sonuç grafik boyutu, yazı tipleri ve renderlayıcıya göre değişebilir.

Manuel aralık (slayt 2): Her üçüncü etiket tek satırda gösterilir, tik işaretleri ise her kategori aralığında kalır. Etiketsiz olanlar dahil tüm 24 sütun aynı değerlerle görünür. Slayt 3, yukarıdaki otomatik görünümü geri yükler.

Doğru Ekseni ve Aralığı Seçin

Bir sütun, çizgi, alan veya çubuk grafiğinin metin kategori ekseni için bu kategori‑sayısı aralığını kullanın. Sütun grafiğinde yatay eksen buna karşılık gelir. Yatay çubuk grafiğinde kategori ekseni düşeydir; bu ayarları getVerticalAxis tarafından döndürülen eksene uygulayın. Tik‑işareti aralığı, bir eksene sahip olan grafiklerde seri eksenine de uygulanabilir.

Değer ekseninin sayısal ölçeğini ayarlamak için kategori etiketi aralığını kullanmayın. Değer ekseninde setMajorUnit bir değer farkını belirler: örneğin 10 ana birim, eksen sıfırdan başladığında 0, 10, 20 … gibi tikler üretir. 3 kategori etiketi aralığı ise veri değerlerinden bağımsız olarak kategori konumlarını sayar. Saçılım ve balon grafikler değer eksenleri kullanır, metin kategori ekseni değildir. Tarih ekseni için, Change a Category Axis bölümünde açıklandığı gibi zaman temelli ana birimler ve ölçekler kullanın.

Kategori Ekseni Değerleri İçin Tarih Formatını Ayarla

Örnek, varsayılan grafik verilerini dört yıllık değerle değiştirir. Tarihler, ilk çalışma sayfasında (indeks 0) OLE Automation seri sayıları olarak saklanır; bu sayılar 30 Aralık 1899’dan itibaren geçen gün sayısını temsil eder. JavaScript hesabı UTC zaman damgalarını kullanır ve farkı günde 86 400 000 milisaniyeye bölerek elde eder. setCategoryAxisType CategoryAxisType.Date ile ayarlayın, setNumberFormatLinkedToSource false yapın ve setNumberFormat yyyy göndererek kategori etiketlerinin hücre biçiminden bağımsız olarak dört basamaklı yıl göstermesini sağlayın.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.Line, 50, 50, 450, 300);

    chart.getChartData().getCategories().clear();
    chart.getChartData().getSeries().clear();

    var workbook = chart.getChartData().getChartDataWorkbook();
    workbook.clear(0);

    var baseDate = Date.UTC(1899, 11, 30);

    var series = chart.getChartData().getSeries().add(aspose.slides.ChartType.Line);
    for (var i = 0; i < 4; i++) {
        var date = Date.UTC(2015 + i, 0, 1);
        var categoryCell = workbook.getCell(0, i + 1, 0, (date - baseDate) / 86400000);
        chart.getChartData().getCategories().add(categoryCell);

        var valueCell = workbook.getCell(0, i + 1, 1, i + 1);
        series.getDataPoints().addDataPointForLineSeries(valueCell);
    }

    chart.getAxes().getHorizontalAxis().setCategoryAxisType(aspose.slides.CategoryAxisType.Date);
    chart.getAxes().getHorizontalAxis().setNumberFormatLinkedToSource(false);
    chart.getAxes().getHorizontalAxis().setNumberFormat("yyyy");

    presentation.save("DateAxisFormat.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Bir Grafik Ekseni Başlığı İçin Döndürme Açısını Ayarla

Dikey eksende true ile setTitle çağırın, başlık metnini sağlayın ve setRotationAngle ile başlığı döndürün. Açı derece cinsindendir; bu örnek, değer ekseni başlığını 90 derece döndürerek bir sütun grafiği kaydeder.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 450, 300);
    chart.getAxes().getVerticalAxis().setTitle(true);
    chart.getAxes().getVerticalAxis().getTitle().addTextFrameForOverriding("Value");
    chart.getAxes().getVerticalAxis().getTitle().getTextFormat().getTextBlockFormat().setRotationAngle(90);

    presentation.save("RotatedAxisTitle.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Kategori veya Değer Ekseni Üzerinde Ekseni Konumlandır

setAxisBetweenCategories kullanarak değer ekseninin kategori eksenini kategoriler arasında mı yoksa kategori tik işaretlerinde mi kesiştireceğini kontrol edin. Bu ayar kategori eksenlerine uygulanır. Örnek, bir sütun grafiğinin yatay kategori ekseninde true olarak ayarlar ve sonucu kaydeder.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 450, 300);
    chart.getAxes().getHorizontalAxis().setAxisBetweenCategories(true);

    presentation.save("AxisBetweenCategories.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Bir Grafik Değer Ekseninde Görüntü Birimini Ayarla

setDisplayUnit kullanarak bir değer eksenindeki etiketleri temel veriyi değiştirmeden ölçeklendirin. DisplayUnitType Millions olarak ayarlandığında 60 000 000 değeri 60 olarak gösterilir. Örnek, bir sütun grafik oluşturur ve dikey eksenine milyon görüntü birimini uygular.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 450, 300);
    chart.getAxes().getVerticalAxis().setDisplayUnit(aspose.slides.DisplayUnitType.Millions);

    presentation.save("Result.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

SSS

Bir eksenin diğerini kestiği değeri (ekseni kesişme) nasıl ayarlarım?

setCrossType kullanarak kesişme davranışını seçin. Sayısal bir kesişme değeri belirtmek için setCrossAt kullanın. Bu ayarlar eksen kesişimini uygun bir temel çizgiye taşımanıza olanak tanır.

Tik etiketlerini eksene göre nasıl konumlandırabilirim?

setTickLabelPosition metodunu TickLabelPositionType Low, High, NextTo veya None değerleriyle çağırın. Tik işaretlerini kontrol etmek için setMajorTickMark veya setMinorTickMark kullanın; bunlar etiket konumlandırmadan ayrı olarak ayarlanır.