JavaScript Kullanarak Sunumlarda Grafik Veri Serilerini Yönetme

Genel Bakış

Bu makale, Aspose.Slides içinde ChartSeries öğesinin rolünü, verilerin sunumlarda nasıl yapılandırıldığını ve görselleştirildiğini odaklanarak açıklar. Bu nesneler, bir grafikteki bireysel veri noktası kümelerini, kategorileri ve görünüm parametrelerini tanımlayan temel unsurları sağlar. ChartSeries ile çalışarak, geliştiriciler veri kaynaklarını sorunsuz bir şekilde entegre edebilir ve bilgilerin nasıl görüntüleneceği üzerinde tam kontrol sağlayabilir; bu da içgörü ve analizleri net bir şekilde ileten dinamik, veri odaklı sunumlar oluşturur.

Bir seri, bir grafikte çizilen sayıların satırı veya sütunudur.

chart-series-powerpoint

Chart Serisi Örtüşmesini Ayarla

With the ChartSeries.getOverlap method, you can specify how much bars and columns should overlap on a 2D chart (range: -100 to 100). This property applies to all series of the parent series group: this is a projection of the appropriate group property. Therefore, this property is read-only.

Use the ParentSeriesGroup.getOverlap read/write property to set your preferred value for Overlap.

  1. Create an instance of the Presentation class.
  2. Add a clustered column chart on a slide.
  3. Access the first chart series.
  4. Access the chart series' ParentSeriesGroup and set your preferred overlap value for the series.
  5. Write the modified presentation to a PPTX file.

This JavaScript code shows you how to set the overlap for a chart series:

var pres = new aspose.slides.Presentation();
try {
    // Grafiği ekler
    var chart = pres.getSlides().get_Item(0).getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 600, 400, true);
    var series = chart.getChartData().getSeries();
    if (series.get_Item(0).getOverlap() == 0) {
        // Seri örtüşmesini ayarlar
        series.get_Item(0).getParentSeriesGroup().setOverlap(-30);
    }
    // Sunum dosyasını diske yazar
    pres.save("SetChartSeriesOverlap_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Seri Rengini Değiştir

Aspose.Slides for Node.js via Java allows you to change a series' color this way:

  1. Create an instance of the Presentation class.
  2. Add chart on the slide.
  3. Access the series whose color you want to change.
  4. Set your preferred fill type and fill color.
  5. Save the modified presentation.

This JavaScript code shows you how to change a series' color:

var pres = new aspose.slides.Presentation("test.pptx");
try {
    var chart = pres.getSlides().get_Item(0).getShapes().addChart(aspose.slides.ChartType.Pie, 50, 50, 600, 400);
    var point = chart.getChartData().getSeries().get_Item(0).getDataPoints().get_Item(1);
    point.setExplosion(30);
    point.getFormat().getFill().setFillType(java.newByte(aspose.slides.FillType.Solid));
    point.getFormat().getFill().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "BLUE"));
    pres.save("output.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Seri Kategorisinin Rengini Değiştir

Aspose.Slides for Node.js via Java allows you to change a series category’s color this way:

  1. Create an instance of the Presentation class.
  2. Add chart on the slide.
  3. Access the series category whose color you want to change.
  4. Set your preferred fill type and fill color.
  5. Save the modified presentation.

This code in JavaScript shows you how to change a series category’s color:

var pres = new aspose.slides.Presentation();
try {
    var chart = pres.getSlides().get_Item(0).getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 600, 400);
    var point = chart.getChartData().getSeries().get_Item(0).getDataPoints().get_Item(0);
    point.getFormat().getFill().setFillType(java.newByte(aspose.slides.FillType.Solid));
    point.getFormat().getFill().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "BLUE"));
    pres.save("output.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Seri Adını Değiştir

Varsayılan olarak, bir grafiğin lejand adları, her sütun veya satırın üzerindeki hücrelerin içeriğidir.

In our example (sample image),

  • the columns are Series 1, Series 2, and Series 3;
  • the rows are Category 1, Category 2, Category 3, and Category 4.

Aspose.Slides for Node.js via Java allows you to update or change a series name in its chart data and legend.

This JavaScript code shows you how to change a series' name in its chart data ChartDataWorkbook:

var pres = new aspose.slides.Presentation();
try {
    var chart = pres.getSlides().get_Item(0).getShapes().addChart(aspose.slides.ChartType.Column3D, 50, 50, 600, 400, true);
    var seriesCell = chart.getChartData().getChartDataWorkbook().getCell(0, 0, 1);
    seriesCell.setValue("New name");
    pres.save("pres.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

This JavaScript code shows you how to change a series name in its legend through Series:

var pres = new aspose.slides.Presentation();
try {
    var chart = pres.getSlides().get_Item(0).getShapes().addChart(aspose.slides.ChartType.Column3D, 50, 50, 600, 400, true);
    var series = chart.getChartData().getSeries().get_Item(0);
    var name = series.getName();
    name.getAsCells().get_Item(0).setValue("New name");
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Grafik Serisi Dolgu Rengini Ayarla

Aspose.Slides for Node.js via Java allows you to set the automatic fill color for chart series inside a plot area this way:

  1. Create an instance of the Presentation class.
  2. Obtain a slide’s reference by its index.
  3. Add a chart with default data based on your preferred type (in the example below, we used ChartType.ClusteredColumn).
  4. Access the chart series and set the fill color to Automatic.
  5. Save the presentation to a PPTX file.

This JavaScript code shows you how to set the automatic fill color for a chart series:

var pres = new aspose.slides.Presentation();
try {
    // Kümelenmiş sütun grafiği oluşturur
    var chart = pres.getSlides().get_Item(0).getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 100, 50, 600, 400);
    // Seri dolgu biçimini otomatik olarak ayarlar
    for (var i = 0; i < chart.getChartData().getSeries().size(); i++) {
        chart.getChartData().getSeries().get_Item(i).getAutomaticSeriesColor();
    }
    // Sunum dosyasını diske yazar
    pres.save("AutoFillSeries_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Grafik Serisi Ters Dolgu Renklerini Ayarla

Aspose.Slides allows you to set the invert fill color for chart series inside a plot area this way:

  1. Create an instance of the Presentation class.
  2. Obtain a slide’s reference by its index.
  3. Add a chart with default data based on your preferred type (in the example below, we used ChartType.ClusteredColumn).
  4. Access the chart series and set the fill color to invert.
  5. Save the presentation to a PPTX file.

This JavaScript code demonstrates the operation:

var inverColor = java.getStaticFieldValue("java.awt.Color", "RED");
var pres = new aspose.slides.Presentation();
try {
    var chart = pres.getSlides().get_Item(0).getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 100, 100, 400, 300);
    var workBook = chart.getChartData().getChartDataWorkbook();
    chart.getChartData().getSeries().clear();
    chart.getChartData().getCategories().clear();
    // Yeni serileri ve kategorileri ekler
    chart.getChartData().getSeries().add(workBook.getCell(0, 0, 1, "Series 1"), chart.getType());
    chart.getChartData().getCategories().add(workBook.getCell(0, 1, 0, "Category 1"));
    chart.getChartData().getCategories().add(workBook.getCell(0, 2, 0, "Category 2"));
    chart.getChartData().getCategories().add(workBook.getCell(0, 3, 0, "Category 3"));
    // İlk grafik serisini alır ve seri verilerini doldurur.
    var series = chart.getChartData().getSeries().get_Item(0);
    series.getDataPoints().addDataPointForBarSeries(workBook.getCell(0, 1, 1, -20));
    series.getDataPoints().addDataPointForBarSeries(workBook.getCell(0, 2, 1, 50));
    series.getDataPoints().addDataPointForBarSeries(workBook.getCell(0, 3, 1, -30));
    var seriesColor = series.getAutomaticSeriesColor();
    series.setInvertIfNegative(true);
    series.getFormat().getFill().setFillType(java.newByte(aspose.slides.FillType.Solid));
    series.getFormat().getFill().getSolidFillColor().setColor(seriesColor);
    series.getInvertedSolidFillColor().setColor(inverColor);
    pres.save("SetInvertFillColorChart_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Değer Negatif Olduğunda Seriyi Ters Çevir

Aspose.Slides allows you to set inverts through theChartDataPoint.setInvertIfNegative method. When an invert is set using the properties, the data point inverts its colors when it gets a negative value.

This JavaScript code demonstrates the operation:

var pres = new aspose.slides.Presentation();
try {
    var chart = pres.getSlides().get_Item(0).getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 600, 400, true);
    var series = chart.getChartData().getSeries();
    chart.getChartData().getSeries().clear();
    var chartSeries = series.add(chart.getChartData().getChartDataWorkbook().getCell(0, "B1"), chart.getType());
    chartSeries.getDataPoints().addDataPointForBarSeries(chart.getChartData().getChartDataWorkbook().getCell(0, "B2", -5));
    chartSeries.getDataPoints().addDataPointForBarSeries(chart.getChartData().getChartDataWorkbook().getCell(0, "B3", 3));
    chartSeries.getDataPoints().addDataPointForBarSeries(chart.getChartData().getChartDataWorkbook().getCell(0, "B4", -2));
    chartSeries.getDataPoints().addDataPointForBarSeries(chart.getChartData().getChartDataWorkbook().getCell(0, "B5", 1));
    chartSeries.setInvertIfNegative(false);
    chartSeries.getDataPoints().get_Item(2).setInvertIfNegative(true);
    pres.save("out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Belirli Veri Noktalarının Verisini Temizle

Aspose.Slides for Node.js via Java allows you to clear the DataPoints data for a specific chart series this way:

  1. Create an instance of the Presentation class.
  2. Obtain the reference of a slide through its index.
  3. Obtain the reference of a chart through its index.
  4. Iterate through all the chart DataPoints and set XValue and YValue to null.
  5. Clear all DataPoints for specific chart series.
  6. Write the modified presentation to a PPTX file.

This JavaScript code demonstrates the operation:

var pres = new aspose.slides.Presentation("TestChart.pptx");
try {
    var sl = pres.getSlides().get_Item(0);
    var chart = sl.getShapes().get_Item(0);
    for (let i = 0; i < chart.getChartData().getSeries().get_Item(0).getDataPoints().size(); i++) {
        let dataPoint = chart.getChartData().getSeries().get_Item(0).getDataPoints().get_Item(i);
        dataPoint.getXValue().getAsCell().setValue(null);
        dataPoint.getYValue().getAsCell().setValue(null);
    }
    chart.getChartData().getSeries().get_Item(0).getDataPoints().clear();
    pres.save("ClearSpecificChartSeriesDataPointsData.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Seri Boşluk Genişliğini Ayarla

Aspose.Slides for Node.js via Java allows you to set a series' Gap Width through the GapWidth property this way:

  1. Create an instance of the Presentation class.
  2. Access first slide.
  3. Add chart with default data.
  4. Access any chart series.
  5. Set the GapWidth property.
  6. Write the modified presentation to a PPTX file.

This code in JavaScript shows you how to set a series' Gap Width:

// Boş bir sunum oluşturur
var pres = new aspose.slides.Presentation();
try {
    // Sunumun ilk slaytına erişir
    var slide = pres.getSlides().get_Item(0);
    // Varsayılan verilerle bir grafik ekler
    var chart = slide.getShapes().addChart(aspose.slides.ChartType.StackedColumn, 0, 0, 500, 500);
    // Grafik veri sayfasının indeksini ayarlar
    var defaultWorksheetIndex = 0;
    // Grafik veri çalışma sayfasını alır
    var fact = chart.getChartData().getChartDataWorkbook();
    // Serileri ekler
    chart.getChartData().getSeries().add(fact.getCell(defaultWorksheetIndex, 0, 1, "Series 1"), chart.getType());
    chart.getChartData().getSeries().add(fact.getCell(defaultWorksheetIndex, 0, 2, "Series 2"), chart.getType());
    // Kategorileri ekler
    chart.getChartData().getCategories().add(fact.getCell(defaultWorksheetIndex, 1, 0, "Caetegoty 1"));
    chart.getChartData().getCategories().add(fact.getCell(defaultWorksheetIndex, 2, 0, "Caetegoty 2"));
    chart.getChartData().getCategories().add(fact.getCell(defaultWorksheetIndex, 3, 0, "Caetegoty 3"));
    // İkinci grafik serisini alır
    var series = chart.getChartData().getSeries().get_Item(1);
    // Seri verilerini doldurur
    series.getDataPoints().addDataPointForBarSeries(fact.getCell(defaultWorksheetIndex, 1, 1, 20));
    series.getDataPoints().addDataPointForBarSeries(fact.getCell(defaultWorksheetIndex, 2, 1, 50));
    series.getDataPoints().addDataPointForBarSeries(fact.getCell(defaultWorksheetIndex, 3, 1, 30));
    series.getDataPoints().addDataPointForBarSeries(fact.getCell(defaultWorksheetIndex, 1, 2, 30));
    series.getDataPoints().addDataPointForBarSeries(fact.getCell(defaultWorksheetIndex, 2, 2, 10));
    series.getDataPoints().addDataPointForBarSeries(fact.getCell(defaultWorksheetIndex, 3, 2, 60));
    // GapWidth değerini ayarlar
    series.getParentSeriesGroup().setGapWidth(50);
    // Sunumu diske kaydeder
    pres.save("GapWidth_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

FAQ

Tek bir grafiğin içerebileceği seri sayısında bir sınırlama var mı?

Aspose.Slides, eklediğiniz seri sayısı için sabit bir üst sınır koymaz. Uygulamanızın belleği ve grafiğin okunabilirliği pratik sınırı belirler.

Kümelenmiş sütunlar çok yakın veya çok uzak olduğunda ne yapmalı?

O serinin (veya üst seri grubunun) Gap Width ayarını değiştirin. Değeri artırmak sütunlar arasındaki boşluğu genişletirken, azaltmak onları birbirine yaklaştırır.