Diagrammachsen in Präsentationen mit JavaScript anpassen

Worum es auf dieser Seite geht

Erfahren Sie, wie Sie JavaScript mit Aspose.Slides für Node.js via Java nutzen, um Diagrammachsen in PowerPoint‑Präsentationen für Berichte und Visualisierungen anzupassen.

Übersicht

Dieser Artikel erklärt, wie Diagrammachsen mit Aspose.Slides für Node.js über Java angepasst werden können. Er behandelt berechnete Achsenwerte, das Vertauschen von Diagrammzeilen und -spalten, Achsensichtbarkeit, Kategorienbeschriftungs‑ und Markierungsabstände, Datumskategorien und -formatierung, Titelrotation, Achsenpositionierung sowie Anzeigeeinheiten.

Maximale Werte auf der Vertikalachse bei Diagrammen ermitteln

Erstellen Sie eine Presentation und fügen Sie ein Flächendiagramm mit Standarddaten hinzu. Rufen Sie validateChartLayout auf, bevor Sie berechnete Achsenwerte auslesen, damit das Diagrammlayout aktuell ist.

Lesen Sie getActualMaxValue und getActualMinValue, um die Achsengrenzen zu erhalten, sowie getActualMajorUnit und getActualMinorUnit für die Tick‑Abstände. getActualMajorUnitScale und getActualMinorUnitScale stellen Zeiteinheiten‑Skalen bereit, die für Datumachsen relevant sind. Das Beispiel speichert diese Werte in lokalen Variablen und speichert das Diagramm.

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();
}

Daten zwischen Achsen austauschen

Verwenden Sie switchRowColumn, um die Rollen von Reihen und Kategorien in Diagrammdaten zu vertauschen. Jede ehemalige Kategorie wird zu einer Reihe und jede ehemalige Reihe zu einer Kategorie. Dies ändert die Gruppierung der Daten; die horizontalen und vertikalen Achsen werden nicht ausgetauscht. Das Beispiel verwendet setRange , um die Standarddaten an Sheet1!A1:D5 zu binden, einschließlich der Kopfzeile und der Kategoriespalte, bevor Zeilen und Spalten vertauscht werden. Es speichert ein Diagramm mit vier Reihen und drei Kategorien.

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();
}

Vertikale Achse für Liniendiagramme deaktivieren

Rufen Sie setVisible mit false für die vertikale Achse auf, um sie auszublenden. Das Beispiel erstellt ein Liniendiagramm mit Standarddaten und speichert es mit ausgeblendeter vertikaler Achse.

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();
}

Horizontale Achse für Liniendiagramme deaktivieren

Rufen Sie setVisible mit false für die horizontale Achse auf, um sie auszublenden. Das Beispiel erstellt ein Liniendiagramm mit Standarddaten und speichert es mit ausgeblendeter horizontaler Achse.

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();
}

Kategorienachse ändern

Verwenden Sie setCategoryAxisType, um eine Datums‑ oder Text‑Kategorienachse auszuwählen. Dieses Beispiel benötigt ExistingChart.pptx, wobei das Diagramm das erste Shape auf der ersten Folie ist und die Kategoriezellen numerische Excel‑Datumswerte enthalten. Es ändert die horizontale Achse zu einer Datumsachse. Durch Aufrufen von setAutomaticMajorUnit mit false, setMajorUnit mit 1 und setMajorUnitScale mit TimeUnitType.Months werden Hauptticks im Abstand von einem Monat gesetzt.

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();
}

Abstände für Kategorienachsen‑Beschriftungen steuern

Wenn ein Diagramm viele Kategorien hat, können Sie die Anzahl sichtbarer Achsenbeschriftungen reduzieren, ohne Kategorien oder Datenpunkte zu entfernen. Rufen Sie setAutomaticTickLabelSpacing mit false auf und übergeben Sie dann das gewünschte Kategorienintervall an setTickLabelSpacing. Für Textkategorien in ihrer normalen Reihenfolge beginnt die Zählung bei der ersten Kategorie:

Intervall	Im Beispiel angezeigte Beschriftungen
1	Kategorie 1, Kategorie 2, Kategorie 3, … Kategorie 24
2	Kategorie 1, Kategorie 3, Kategorie 5, … Kategorie 23
3	Kategorie 1, Kategorie 4, Kategorie 7, … Kategorie 22

Ein Intervall von 3 zeigt jede dritte Beschriftung an und lässt zwei Beschriftungen zwischen den angezeigten verborgen. Es werden nicht die entsprechenden Spalten entfernt. Das automatische Spacing wählt ein Intervall basierend auf dem verfügbaren Platz; es muss nicht jede Beschriftung anzeigen.

Markierungen haben separate Steuerungen. Rufen Sie setAutomaticTickMarksSpacing mit false auf und verwenden Sie setTickMarksSpacing, um ihr Intervall festzulegen. Beispielsweise sorgt 1 dafür, dass bei jedem Kategorienintervall eine Markierung bleibt, während Beschriftungen nur jede dritte Kategorie erscheinen. Verwenden Sie setMajorTickMark mit einem sichtbaren Stil, um das Ergebnis zu sehen. Wenn einer der automatischen Spacing‑Setter erneut mit true aufgerufen wird, lässt das Diagramm das Intervall wieder automatisch wählen.

Das folgende eigenständige Beispiel erstellt 24 Kategorien und eine Reihe und speichert dann drei Folien in CategoryAxisIntervals.pptx: automatisches Spacing, manuelles Beschriftungs‑Spacing mit unabhängigen Markierungen und wiederhergestelltes automatisches Spacing. Die beiden Kopien behalten die ursprünglichen Diagrammdaten bei. Keine Eingabepräsentation ist erforderlich. Der horizontale Beschriftungstext macht den Unterschied in der Dichte leicht erkennbar.

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);

    // Folie 2: jede dritte Beschriftung anzeigen, aber für jede Kategorie eine Markierung beibehalten.
    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);

    // Folie 3: das Diagramm die beiden Intervalle erneut wählen lassen.
    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();
}

Automatisches Spacing (Folie 1): In dieser Darstellung wird jede zweite Kategorienbeschriftung angezeigt und umbricht in zwei Zeilen. Das automatische Ergebnis kann je nach Diagrammgröße, Schriftarten und Renderer variieren.

Manuelles Spacing (Folie 2): Jede dritte Beschriftung wird in einer Zeile angezeigt, während Markierungen bei jedem Kategorienintervall bleiben. Alle 24 Spalten, einschließlich der ohne Beschriftungen, bleiben sichtbar mit denselben Werten. Folie 3 stellt das oben gezeigte automatische Aussehen wieder her.

Den richtigen Achsen‑ und Intervalltyp wählen

Verwenden Sie dieses Kategorien‑Zähl‑Intervall für eine Text‑Kategorienachse, z. B. die Kategorienachse eines Säulen‑, Linien‑, Flächen‑ oder Balkendiagramms. In einem Säulendiagramm ist sie die horizontale Achse. In einem horizontalen Balkendiagramm ist die Kategorienachse vertikal, sodass Sie diese Einstellungen auf die von getVerticalAxis zurückgegebene Achse anwenden. Das Markierungs‑Spacing gilt ebenfalls für eine Reihen‑Achse in Diagrammen, die eine solche besitzen.

Verwenden Sie das Kategorien‑Beschriftungs‑Spacing nicht, um die numerische Skala einer Werteachse festzulegen. Auf einer Werteachse bestimmt setMajorUnit welcher Werteunterschied verwendet wird: Beispielsweise erzeugt ein Hauptintervall von 10 Tick‑Markierungen bei 0, 10, 20 usw., wenn die Achse bei Null beginnt. Ein Kategorien‑Beschriftungs‑Intervall von 3 zählt stattdessen die Positionen der Kategorien, unabhängig von deren Datenwerten. Streu‑ und Blasendiagramme verwenden Werteachsen anstelle einer Text‑Kategorienachse. Für eine Datumsachse verwenden Sie zeitbasierte Haupteinheiten und Skalen, wie in Change a Category Axis beschrieben.

Datumsformat für Kategorienachsen‑Werte festlegen

Das Beispiel ersetzt die Standarddiagrammdaten durch vier Jahreswerte. Daten werden als OLE‑Automation‑Seriennummern im ersten Arbeitsblatt (Index 0) gespeichert, berechnet als Anzahl der Tage seit dem 30. Dezember 1899 für diese Daten. Die JavaScript‑Berechnung verwendet UTC‑Zeitstempel und teilt die Differenz durch 86 400 000 Millisekunden pro Tag. Verwenden Sie setCategoryAxisType mit CategoryAxisType.Date, rufen Sie setNumberFormatLinkedToSource mit false auf und übergeben Sie yyyy an setNumberFormat, sodass die Kategorienbeschriftungen vierstellige Jahreszahlen unabhängig von der Zellformatierung anzeigen.

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();
}

Drehwinkel für Diagrammachsentitel festlegen

Rufen Sie setTitle mit true für die vertikale Achse auf, geben Sie den Titeltext an und verwenden Sie setRotationAngle, um den Titel zu drehen. Der Winkel wird in Grad gemessen; dieses Beispiel speichert ein Säulendiagramm mit um 90 Grad gedrehtem Werteachsentitel.

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();
}

Achsenposition auf einer Kategorien‑ oder Werteachse festlegen

Verwenden Sie setAxisBetweenCategories, um zu steuern, ob die Werteachse die Kategorienachse zwischen Kategorien oder an den Kategorien‑Markierungen schneidet. Diese Einstellung gilt für Kategorienachsen. Das Beispiel setzt sie auf true für die horizontale Kategorienachse eines Säulendiagramms und speichert das Ergebnis.

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();
}

Anzeigeeinheit auf einer Diagramm‑Werteachse festlegen

Verwenden Sie setDisplayUnit, um die Beschriftungen einer Werteachse zu skalieren, ohne die zugrunde liegenden Daten zu ändern. Mit DisplayUnitType auf Millions eingestellt wird ein Wert von 60 000 000 als 60 angezeigt. Das Beispiel erstellt ein Säulendiagramm und wendet die Millionen‑Anzeigeeinheit auf dessen vertikale Achse an.

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();
}

FAQ

Wie lege ich den Wert fest, an dem eine Achse die andere schneidet (Achsenkreuzung)?

Verwenden Sie setCrossType, um das Kreuzungs‑Verhalten auszuwählen. Um einen numerischen Kreuzungswert festzulegen, verwenden Sie setCrossAt. Diese Einstellungen ermöglichen es, die Achsenkreuzung auf eine geeignete Basislinie zu verschieben.

Wie kann ich Tick‑Beschriftungen relativ zur Achse positionieren?

Rufen Sie setTickLabelPosition mit TickLabelPositionType: Low, High, NextTo oder None auf. Um die Markierungen selbst zu steuern, verwenden Sie setMajorTickMark oder setMinorTickMark; diese sind von der Beschriftungspositionierung getrennt.