Přizpůsobení os grafu v prezentacích pomocí JavaScriptu

O čem je tato stránka

Objevte, jak pomocí JavaScriptu a Aspose.Slides pro Node.js přes Javu přizpůsobit osy grafu v prezentacích PowerPoint pro zprávy a vizualizace.

Přehled

Tento článek vysvětluje, jak přizpůsobit osy grafu pomocí Aspose.Slides pro Node.js přes Java. Pokrývá vypočtené hodnoty os, přepínání řádků a sloupců grafu, viditelnost os, intervaly štítků kategorií a značek, datumové kategorie a formátování, otočení názvu, umístění osy a zobrazovací jednotky.

Získání maximálních hodnot na svislé ose grafů

Vytvořte Prezentaci a přidejte plošný graf s výchozími daty. Zavolejte validateChartLayout před čtením vypočtených hodnot os, aby byl rozložení grafu aktuální.

Přečtěte getActualMaxValue a getActualMinValue pro limity os a getActualMajorUnit a getActualMinorUnit pro intervaly značek. getActualMajorUnitScale a getActualMinorUnitScale poskytují časové jednotky, které jsou relevantní pro datumové osy. Příklad ukládá tyto hodnoty do lokálních proměnných a ukládá graf.

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

Prohození dat mezi osami

Použijte switchRowColumn k výměně rolí řad a kategorií v datech grafu. Každá bývalá kategorie se stane řadou a každá bývalá řada se stane kategorií. Tím se změní způsob seskupení dat; neprohodí to vodorovnou a svislou osu. Příklad používá setRange k napojení výchozích dat na Sheet1!A1:D5, včetně řádku hlavičky a sloupce kategorií, před výměnou řádků a sloupců. Uloží graf se čtyřmi řadami a třemi kategoriemi.

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

Zakázání svislé osy u čárových grafů

Zavolejte setVisible s false na svislé ose, aby byla skryta. Příklad vytvoří čárový graf s výchozími daty a uloží jej se skrytou svislou osou.

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

Zakázání vodorovné osy u čárových grafů

Zavolejte setVisible s false na vodorovné ose, aby byla skryta. Příklad vytvoří čárový graf s výchozími daty a uloží jej se skrytou vodorovnou osou.

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

Změna osy kategorií

Použijte setCategoryAxisType k výběru datumové nebo textové osy kategorií. Tento příklad vyžaduje ExistingChart.pptx, kde je graf prvním tvarem na první snímku a buňky kategorií obsahují číselné datumové hodnoty Excelu. Změní vodorovnou osu na datumovou osu. Voláním setAutomaticMajorUnit s false, setMajorUnit s 1 a setMajorUnitScale s TimeUnitType.Months umístíte hlavní značky v měsíčních intervalech.

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

Řízení intervalů popisků osy kategorií

Když má graf mnoho kategorií, můžete snížit počet viditelných popisků osy, aniž byste odstraňovali kategorie nebo datové body. Zavolejte setAutomaticTickLabelSpacing s false a poté předávejte požadovaný interval kategorií metodě setTickLabelSpacing. Pro textové kategorie v jejich normálním pořadí se číslování začne od první kategorie:

Interval	Popisky zobrazené v příkladu
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

Interval 3 zobrazí každou třetí popisku a mezi zobrazenými popisky jsou skryty dvě další. Nepřidává to sloupce. Automatické rozestupy zvolí interval podle dostupného prostoru; nemusí zobrazit každou popisku.

Značky mají samostatná nastavení. Zavolejte setAutomaticTickMarksSpacing s false a použijte setTickMarksSpacing k nastavení jejich intervalu. Například 1 zachová značku na každém intervalu kategorie, zatímco popisky se objeví jen každou třetí kategorii. Použijte setMajorTickMark s viditelným stylem, abyste výsledek viděli. Opětovné nastavení automatického rozestupu na true umožní grafu znovu vybrat vhodný interval.

Následující samostatný příklad vytvoří 24 kategorií a jednu řadu, pak uloží tři snímky do CategoryAxisIntervals.pptx: automatické rozestupy, ruční rozestupy popisků s nezávislými značkami a obnovené automatické rozestupy. Obě kopie zachovávají původní data grafu. Vstupní prezentace není vyžadována. Vodorovný text popisků usnadňuje rozeznání hustoty.

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

    // Snímek 2: zobrazit každou třetí popisku, ale zachovat značku pro každou kategorii.
    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);

    // Snímek 3: nechat graf znovu zvolit oba intervaly.
    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();
}

Automatické rozestupy (snímek 1): V tomto zobrazení je každá druhá popiska kategorie zobrazena a zalamována do dvou řádků. Automatický výsledek může záviset na velikosti grafu, písmech a vykreslovači.

Manuální rozestupy (snímek 2): Každá třetí popiska je zobrazena v jednom řádku, zatímco značky zůstávají na každém intervalu kategorie. Všechny 24 sloupců, včetně těch bez popisků, zůstávají viditelné se stejnými hodnotami. Snímek 3 obnoví automatický vzhled zobrazený výše.

Vyberte správnou osu a interval

Použijte tento interval počtu kategorií pro textovou osu kategorií, například pro osu kategorií sloupcového, čárového, plošného nebo pruhového grafu. Ve sloupcovém grafu je to vodorovná osa. Ve vodorovném pruhovém grafu je osa kategorií svislá, takže tato nastavení aplikujte na osu vrácenou metodou getVerticalAxis. Rozestupy značek platí také pro osu řad v grafech, které ji mají.

Na nastavení číselné stupnice hodnotové osy nepoužívejte rozestup popisků kategorií. Na hodnotové ose metoda setMajorUnit určuje rozdíl v hodnotách: například hlavní jednotka 10 vytvoří značky při 0, 10, 20 atd., pokud osa začíná od nuly. Interval popisků kategorií 3 však počítá pozice kategorií, bez ohledu na jejich hodnoty. Rozptýlené a bublinové grafy používají hodnotové osy místo textové osy kategorií. Pro datumovou osu používejte časové jednotky a stupnice, jak je popsáno v Change a Category Axis.

Nastavení formátu data pro hodnoty osy kategorií

Příklad nahradí výchozí data grafu čtyřmi ročními hodnotami. Data jsou uložena jako sériová čísla OLE Automation v prvním listu (index 0), vypočtená jako počet dní od 30. prosince 1899. Výpočet v JavaScriptu používá časové razítko UTC a dělí rozdíl 86 400 000 milisekundami za den. Použijte setCategoryAxisType s CategoryAxisType.Date, zavolejte setNumberFormatLinkedToSource s false a předávejte yyyy metodě setNumberFormat, aby popisky kategorií zobrazovaly čtyřciferné roky nezávisle na formátování buňky.

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

Nastavení úhlu otočení pro nadpis osy grafu

Zavolejte setTitle s true na svislé ose, zadejte text nadpisu a použijte setRotationAngle k otočení nadpisu. Úhel je měřen ve stupních; tento příklad uloží sloupcový graf s nadpisem hodnotové osy otočeným o 90 stupňů.

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

Nastavení pozice osy na ose kategorií nebo hodnot

Použijte setAxisBetweenCategories k určení, zda hodnotová osa protíná osu kategorií mezi kategoriemi nebo na značkách kategorií. Toto nastavení platí pro osy kategorií. Příklad nastaví tuto hodnotu na true na vodorovné ose kategorií sloupcového grafu a uloží výsledek.

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

Nastavení jednotky zobrazení na hodnotové ose grafu

Použijte setDisplayUnit k měřítku popisků na hodnotové ose bez změny podkladových dat. S DisplayUnitType nastaveným na Millions se hodnota 60 000 000 zobrazí jako 60. Příklad vytvoří sloupcový graf a použije jednotku zobrazení miliony na jeho svislé ose.

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

Často kladené otázky

Jak nastavit hodnotu, kde se jedna osa protíná s druhou (průsečík os)?

Použijte setCrossType k výběru chování průsečíku. Pro zadání číselné hodnoty průsečíku použijte setCrossAt. Tato nastavení vám umožní přesunout průsečík os na vhodnou základní úroveň.

Jak mohu umístit popisky značek vzhledem k ose?

Zavolejte setTickLabelPosition s použitím TickLabelPositionType: Low, High, NextTo nebo None. Pro řízení samotných značek použijte setMajorTickMark nebo setMinorTickMark; jsou oddělené od umístění popisků.