Anpassa diagramaxlar i presentationer med JavaScript

Vad den här sidan handlar om

Upptäck hur du använder JavaScript med Aspose.Slides för Node.js via Java för att anpassa diagramaxlar i PowerPoint-presentationer för rapporter och visualiseringar.

Översikt

Det här artikeln förklarar hur du anpassar diagramaxlar med Aspose.Slides för Node.js via Java. Den täcker beräknade axelvärden, byte av diagramrader och -kolumner, axelns synlighet, kategori‑etikett‑ och tick‑intervall, datumkategorier och formatering, titelrotation, axelpositionering och visningsenheter.

Få maximivärdena på den vertikala axeln i diagram

Skapa en Presentation och lägg till ett områdesdiagram med standarddata. Anropa validateChartLayout innan du läser de beräknade axelvärdena så att diagramlayouten är uppdaterad.

Läs getActualMaxValue och getActualMinValue för axelgränserna, samt getActualMajorUnit och getActualMinorUnit för tick‑intervallen. getActualMajorUnitScale och getActualMinorUnitScale tillhandahåller tidsenhetsskalor, vilka är relevanta för datumaxlar. Exemplet lagrar dessa värden i lokala variabler och sparar diagrammet.

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

Byt data mellan axlarna

Använd switchRowColumn för att byta rollerna mellan serier och kategorier i diagramdata. Varje tidigare kategori blir en serie, och varje tidigare serie blir en kategori. Detta ändrar hur data grupperas; det byter inte horisontella och vertikala axlar. Exemplet använder setRange för att binda standarddata till Sheet1!A1:D5, inklusive rubrikraden och kategori‑kolumnen, innan rader och kolumner byts. Det sparar ett diagram med fyra serier och tre kategorier.

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

Inaktivera den vertikala axeln för linjediagram

Anropa setVisible med false på den vertikala axeln för att dölja den. Exemplet skapar ett linjediagram med standarddata och sparar det med den vertikala axeln dold.

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

Inaktivera den horisontella axeln för linjediagram

Anropa setVisible med false på den horisontella axeln för att dölja den. Exemplet skapar ett linjediagram med standarddata och sparar det med den horisontella axeln dold.

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

Ändra en kategori‑axel

Använd setCategoryAxisType för att välja en datum‑ eller text‑kategori‑axel. Detta exempel kräver ExistingChart.pptx, med ett diagram som den första formen på den första bilden och kategori‑celler som innehåller numeriska Excel‑datumvärden. Det ändrar den horisontella axeln till en datumaxel. Genom att anropa setAutomaticMajorUnit med false, setMajorUnit med 1 och setMajorUnitScale med TimeUnitType.Months placeras huvud‑tickar med ett‑månadintervall.

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

Styr intervaller för kategori‑axelns etiketter

När ett diagram har många kategorier, minska antalet synliga axel‑etiketter utan att ta bort kategorier eller datapunkter. Anropa setAutomaticTickLabelSpacing med false och skicka sedan önskat kategori‑intervall till setTickLabelSpacing. För textkategorier i deras normala ordning börjar räkningen vid den första kategorin:

Intervall	Etiketter som visas i exemplet
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

Ett intervall på 3 visar var tredje etikett och döljer två etiketter mellan de visade. Det tar inte bort motsvarande kolumner. Automatisk spacing väljer ett intervall baserat på tillgängligt utrymme; det visar inte nödvändigtvis varje etikett.

Tick‑markerna har separata kontroller. Anropa setAutomaticTickMarksSpacing med false och använd setTickMarksSpacing för att ange deras intervall. Till exempel behåller 1 en tick‑mark vid varje kategori‑intervall medan etiketter endast visas var tredje kategori. Använd setMajorTickMark med en synlig stil så att du kan se resultatet. Att anropa någon av de automatiska spacing‑inställarna med true igen låter diagrammet återigen välja det intervallet.

Följande självständiga exempel skapar 24 kategorier och en serie, och sparar sedan tre bilder i CategoryAxisIntervals.pptx: automatisk spacing, manuell etikett‑spacing med oberoende tick‑markeringar och återställd automatisk spacing. De två kopiorna behåller den ursprungliga diagramdatan. Ingen ingångspresentation krävs. Horisontell etiketttext gör skillnaden i densitet lätt att se.

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

    // Bild 2: visa var tredje etikett, men behåll en tick‑markering för varje kategori.
    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);

    // Bild 3: låt diagrammet välja båda intervallerna igen.
    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();
}

Automatisk spacing (bild 1): I den här rendering‑visningen visas varje andra kategori‑etikett och radbryts till två rader. Det automatiska resultatet kan variera med diagramstorlek, teckensnitt och renderaren.

Manuell spacing (bild 2): Var tredje etikett visas på en rad, medan tick‑markeringar förblir vid varje kategori‑intervall. Alla 24 kolumner, även de utan etiketter, förblir synliga med samma värden. Bild 3 återställer den automatiska utformningen som visas ovan.

Välj rätt axel och intervall

Använd detta kategori‑räkningsintervall för en text‑kategori‑axel, t.ex. kategori‑axeln i ett stapel-, linje-, områdes- eller stapeldiagram. I ett stapeldiagram är den horisontell. I ett horisontellt stapeldiagram är kategori‑axeln vertikal, så tillämpa dessa inställningar på den axel som returneras av getVerticalAxis. Tick‑mark‑spacing gäller även för en serie‑axel i diagram som har en.

Använd inte kategori‑etikett‑spacing för att ställa in den numeriska skalan på en värdeaxel. På en värdeaxel anger setMajorUnit ett värdesskillnad: exempelvis ger en huvud‑enhet på 10 tick‑markeringar vid 0, 10, 20 osv när axeln startar vid noll. Ett kategori‑etikett‑intervall på 3 räknar istället kategori‑positioner, oavsett deras datavärden. Spridnings‑ och bubbeldiagram använder värdeaxlar snarare än en text‑kategori‑axel. För en datumaxel, använd tidsbaserade huvud‑enheter och skalor som beskrivs i Change a Category Axis.

Ställ in datumformatet för kategori‑axelvärden

Exemplet ersätter standarddata i diagrammet med fyra årliga värden. Datum lagras som OLE Automation‑serienummer i det första arbetsbladet (index 0), beräknade som antalet dagar sedan 30 december 1899 för dessa datum. JavaScript‑beräkningen använder UTC‑tidsstämplar och dividerar skillnaden med 86 400 000 millisekunder per dag. Använd setCategoryAxisType med CategoryAxisType.Date, anropa setNumberFormatLinkedToSource med false och skicka yyyy till setNumberFormat så att kategori‑etiketterna visar fyrsiffriga år oberoende av cellformateringen.

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

Ställ in en rotationsvinkel för diagramaxelns titel

Anropa setTitle med true på den vertikala axeln, ange titeltext och använd setRotationAngle för att rotera titeln. Vinkeln mäts i grader; detta exempel sparar ett stapeldiagram med dess värde‑axel‑titel roterad 90 grader.

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

Ställ in axelpositionen på en kategori‑ eller värdeaxel

Använd setAxisBetweenCategories för att styra om värdeaxeln korsar kategori‑axeln mellan kategorier eller vid kategori‑tick‑markeringar. Denna inställning gäller kategori‑axlar. Exemplet sätter den till true på den horisontella kategori‑axeln i ett stapeldiagram och sparar resultatet.

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

Ställ in visningsenheten på en diagramvärdeaxel

Använd setDisplayUnit för att skala etiketter på en värdeaxel utan att ändra underliggande data. Med DisplayUnitType satt till Millions visas ett värde på 60 000 000 som 60. Exemplet skapar ett stapeldiagram och tillämpar miljon‑visningsenheten på dess vertikala axel.

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

Hur anger jag värdet där en axel korsar den andra (axelkorsning)?

Använd setCrossType för att välja korsningsbeteende. För att ange ett numeriskt korsningsvärde, använd setCrossAt. Dessa inställningar låter dig flytta axelkorsningen till en lämplig nollnivå.

Hur kan jag placera tick‑etiketter relativt till axeln?

Anropa setTickLabelPosition med TickLabelPositionType: Low, High, NextTo eller None. För att kontrollera tick‑markeringarna själva, använd setMajorTickMark eller setMinorTickMark; dessa är separata från etikett‑positionering.