Prezentációs diagramok formázása JavaScriptben

Miről szól ez az oldal

Ismerje meg a diagramok formázását az Aspose.Slides Node.js számára Java segítségével, és emelje előadását egyedi tengelyekkel, betűtípusokkal, számformátumokkal és lekerekített diagram szegélyekkel.

Áttekintés

Ez a cikk bemutatja, hogyan lehet diagramokat formázni PowerPoint‑prezentációkban az Aspose.Slides segítségével. Megmutatja, hogyan lehet testreszabni a diagram kulcsfontosságú elemeit, például a tengelyeket, rácsvonalakat, címeket, jelmagyarázatokat, a rajzterületet és a falak kitöltését, hogy javítsa a diagram adatok megjelenését és olvashatóságát.

Emellett bemutatja, hogyan állítható be a diagram szövegének betűtípus‑tulajdonságai, hogyan alkalmazhatók előre definiált számformátumok a diagram adataira, valamint hogyan engedélyezhetők a lekerekített sarkok a diagram területén. Ezek a példák együtt azt szemléltetik, hogyan irányítható a diagramok vizuális stílusa és az adatok megjelenítése egy prezentációban.

Diagram Elemeinek Formázása

Használja a Diagram elemet diagramcímek, tengelyek, rácsvonalak, jelmagyarázatok és rajzterület formázásához. Ez a példa egy vonaldiagramot hoz létre jelölőkkel és alapértelmezett adatokkal, majd külön szöveg‑ és vonalstílusokat alkalmaz az érték‑ és kategória‑tengelyeire. A betűméretet és a vonalvastagságot pontban adja meg; a kategória‑címkék 45 fokban vannak elforgatva.

Az értéktengely a setNumberFormat metódust használja a forráscelláktól függetlenül. Skálája -2‑től 15‑ig terjed, a fő osztás 2, a mellékosztás 0,5. A példa a százalékos formázást kombinálja a setDisplayUnit metódussal, amelyet ezrekre állít be, ezért ezeket a beállításokat az adatainak jelentéséhez és nagyságához igazítsa. A jelmagyarázat a rajzterület kívül marad, mivel a setOverlay metódus false‑ra van állítva. A hátfal és a talaj kitöltése a getBackWall és a getFloor metódusokkal konfigurálható, de ezek a felületek csak 3D diagramokban láthatóak.

const aspose = { slides: require("aspose.slides.via.java") };
const java = require("java");

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

    let chart = slide.getShapes().addChart(aspose.slides.ChartType.LineWithMarkers, 50, 50, 500, 400);

    chart.setTitle(true);
    chart.getChartTitle().addTextFrameForOverriding("");
    let chartTitle = chart.getChartTitle().getTextFrameForOverriding().getParagraphs().get_Item(0).getPortions().get_Item(0);
    chartTitle.setText("Sample Chart");
    chartTitle.getPortionFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
    chartTitle.getPortionFormat().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "GRAY"));
    chartTitle.getPortionFormat().setFontHeight(20);
    chartTitle.getPortionFormat().setFontBold(java.newByte(aspose.slides.NullableBool.True));
    chartTitle.getPortionFormat().setFontItalic(java.newByte(aspose.slides.NullableBool.True));

    chart.getAxes().getVerticalAxis().getMajorGridLinesFormat().getLine().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
    chart.getAxes().getVerticalAxis().getMajorGridLinesFormat().getLine().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "BLUE"));
    chart.getAxes().getVerticalAxis().getMajorGridLinesFormat().getLine().setWidth(5);
    chart.getAxes().getVerticalAxis().getMajorGridLinesFormat().getLine().setDashStyle(java.newByte(aspose.slides.LineDashStyle.DashDot));

    chart.getAxes().getVerticalAxis().getMinorGridLinesFormat().getLine().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
    chart.getAxes().getVerticalAxis().getMinorGridLinesFormat().getLine().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "RED"));
    chart.getAxes().getVerticalAxis().getMinorGridLinesFormat().getLine().setWidth(3);

    chart.getAxes().getVerticalAxis().setNumberFormatLinkedToSource(false);
    chart.getAxes().getVerticalAxis().setDisplayUnit(aspose.slides.DisplayUnitType.Thousands);
    chart.getAxes().getVerticalAxis().setNumberFormat("0.0%");

    chart.getAxes().getVerticalAxis().setAutomaticMajorUnit(false);
    chart.getAxes().getVerticalAxis().setAutomaticMaxValue(false);
    chart.getAxes().getVerticalAxis().setAutomaticMinorUnit(false);
    chart.getAxes().getVerticalAxis().setAutomaticMinValue(false);

    chart.getAxes().getVerticalAxis().setMaxValue(15);
    chart.getAxes().getVerticalAxis().setMinValue(-2);
    chart.getAxes().getVerticalAxis().setMinorUnit(0.5);
    chart.getAxes().getVerticalAxis().setMajorUnit(2.0);

    let valueAxisText = chart.getAxes().getVerticalAxis().getTextFormat().getPortionFormat();
    valueAxisText.setFontBold(java.newByte(aspose.slides.NullableBool.True));
    valueAxisText.setFontHeight(16);
    valueAxisText.setFontItalic(java.newByte(aspose.slides.NullableBool.True));
    valueAxisText.getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
    valueAxisText.getFillFormat().getSolidFillColor().setPresetColor(java.newByte(aspose.slides.PresetColor.DarkGreen));
    valueAxisText.setLatinFont(new aspose.slides.FontData("Times New Roman"));

    chart.getAxes().getVerticalAxis().setTitle(true);
    chart.getAxes().getVerticalAxis().getTitle().addTextFrameForOverriding("");
    let valueAxisTitle = chart.getAxes().getVerticalAxis().getTitle().getTextFrameForOverriding().getParagraphs().get_Item(0).getPortions().get_Item(0);
    valueAxisTitle.setText("Primary Axis");
    valueAxisTitle.getPortionFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
    valueAxisTitle.getPortionFormat().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "GRAY"));
    valueAxisTitle.getPortionFormat().setFontHeight(20);
    valueAxisTitle.getPortionFormat().setFontBold(java.newByte(aspose.slides.NullableBool.True));
    valueAxisTitle.getPortionFormat().setFontItalic(java.newByte(aspose.slides.NullableBool.True));

    chart.getAxes().getHorizontalAxis().getMajorGridLinesFormat().getLine().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
    chart.getAxes().getHorizontalAxis().getMajorGridLinesFormat().getLine().getFillFormat().getSolidFillColor().setColor(java.newInstanceSync("java.awt.Color", 0, 128, 0));
    chart.getAxes().getHorizontalAxis().getMajorGridLinesFormat().getLine().setWidth(5);

    chart.getAxes().getHorizontalAxis().getMinorGridLinesFormat().getLine().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
    chart.getAxes().getHorizontalAxis().getMinorGridLinesFormat().getLine().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "YELLOW"));
    chart.getAxes().getHorizontalAxis().getMinorGridLinesFormat().getLine().setWidth(3);

    let categoryAxisText = chart.getAxes().getHorizontalAxis().getTextFormat().getPortionFormat();
    categoryAxisText.setFontBold(java.newByte(aspose.slides.NullableBool.True));
    categoryAxisText.setFontHeight(16);
    categoryAxisText.setFontItalic(java.newByte(aspose.slides.NullableBool.True));
    categoryAxisText.getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
    categoryAxisText.getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "BLUE"));
    categoryAxisText.setLatinFont(new aspose.slides.FontData("Arial"));

    chart.getAxes().getHorizontalAxis().setTitle(true);
    chart.getAxes().getHorizontalAxis().getTitle().addTextFrameForOverriding("");

    let categoryAxisTitle = chart.getAxes().getHorizontalAxis().getTitle().getTextFrameForOverriding().getParagraphs().get_Item(0).getPortions().get_Item(0);
    categoryAxisTitle.setText("Sample Category");
    categoryAxisTitle.getPortionFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
    categoryAxisTitle.getPortionFormat().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "GRAY"));
    categoryAxisTitle.getPortionFormat().setFontHeight(20);
    categoryAxisTitle.getPortionFormat().setFontBold(java.newByte(aspose.slides.NullableBool.True));
    categoryAxisTitle.getPortionFormat().setFontItalic(java.newByte(aspose.slides.NullableBool.True));

    chart.getAxes().getHorizontalAxis().setTickLabelPosition(aspose.slides.TickLabelPositionType.Low);
    chart.getAxes().getHorizontalAxis().setTickLabelRotationAngle(45);

    let legendText = chart.getLegend().getTextFormat().getPortionFormat();
    legendText.setFontBold(java.newByte(aspose.slides.NullableBool.True));
    legendText.setFontHeight(16);
    legendText.setFontItalic(java.newByte(aspose.slides.NullableBool.True));
    legendText.getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
    legendText.getFillFormat().getSolidFillColor().setPresetColor(java.newByte(aspose.slides.PresetColor.DarkRed));

    chart.getLegend().setOverlay(false);

    chart.getBackWall().setThickness(1);
    chart.getBackWall().getFormat().getFill().setFillType(java.newByte(aspose.slides.FillType.Solid));
    chart.getBackWall().getFormat().getFill().getSolidFillColor().setColor(java.newInstanceSync("java.awt.Color", 255, 165, 0));

    chart.getFloor().getFormat().getFill().setFillType(java.newByte(aspose.slides.FillType.Solid));
    chart.getFloor().getFormat().getFill().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "RED"));

    chart.getPlotArea().getFormat().getFill().setFillType(java.newByte(aspose.slides.FillType.Solid));
    chart.getPlotArea().getFormat().getFill().getSolidFillColor().setPresetColor(java.newByte(aspose.slides.PresetColor.LightCyan));

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

Diagram Betűtípus Tulajdonságainak Beállítása

Állítsa be a diagram szövegének alapértelmezett betűméretét a Chart.getTextFormat metódussal. A példa egy csoportosított oszlopdiagramot hoz létre 20 pontos betűmérettel, és az első sorozathoz a setShowValue metódussal engedélyezi az értékcímkéket. Az egyéni betűtípus‑beállításokkal rendelkező szövegelemek felülírhatják a diagram alapértelmezését.

const aspose = { slides: require("aspose.slides.via.java") };

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

    let chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 100, 100, 500, 400);
    chart.getTextFormat().getPortionFormat().setFontHeight(20);
    chart.getChartData().getSeries().get_Item(0).getLabels().getDefaultDataLabelFormat().setShowValue(true);

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

Számformátum Beállítása

Használja a ChartDataCell.setPresetNumberFormat metódust beépített számformátum alkalmazásához a diagram munkafüzetcelláin. Ez a példa egy csoportosított oszlopdiagramot hoz létre alapértelmezett, cella‑alapú adatokkal, és a 10‑es formátum indexet (0.00%) minden sorozat‑értékcellájára alkalmazza. Ez a megjelenítést módosítja a munkafüzetben anélkül, hogy az alapértékek változnának; például a 0,25 érték 25,00 %‑ként jelenik meg. A tengely‑ és adatcímke‑formátumok külön is beállíthatók.

const aspose = { slides: require("aspose.slides.via.java") };
const java = require("java");

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

    let chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 500, 400);
    let series = chart.getChartData().getSeries();

    for (let i = 0; i < series.size(); i++) {
        let chartSeries = series.get_Item(i);
        for (let j = 0; j < chartSeries.getDataPoints().size(); j++) {
            let dataPoint = chartSeries.getDataPoints().get_Item(j);
            dataPoint.getValue().getAsCell().setPresetNumberFormat(java.newByte(10)); // 0.00%
        }
    }

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

Az alábbi táblázat a beépített számformátum‑indexeket sorolja fel a megfelelő Excel‑formátumokkal az angol (Egyesült Államok) helyi beállításokhoz. A pontos formátum‑karakterláncok és megjelenítésük alkalmazásonként és helyi beállításonként változhat, különösen pénznemek és dátumok esetén. Néhány Excel‑formátum eltér az OOXML szabvány alapértelmezettjeitől, amint azt a Microsoft számformátum‑implementációs megjegyzéseiben leírják.

Index	Formátum
0	General
1	0
2	0.00
3	#,##0
4	#,##0.00
5	"$"#,##0_);("$"#,##0)
6	"$"#,##0_);[Red]("$"#,##0)
7	"$"#,##0.00_);("$"#,##0.00)
8	"$"#,##0.00_);[Red]("$"#,##0.00)
9	0%
10	0.00%
11	0.00E+00
12	# ?/?
13	# ??/??
14	m/d/yyyy
15	d-mmm-yy
16	d-mmm
17	mmm-yy
18	h:mm AM/PM
19	h:mm:ss AM/PM
20	h:mm
21	h:mm:ss
22	m/d/yyyy h:mm
37	#,##0_);(#,##0)
38	#,##0_);[Red](#,##0)
39	#,##0.00_);(#,##0.00)
40	#,##0.00_);[Red](#,##0.00)
41	_(* #,##0_);_(* (#,##0);_(* "-"_);_(@_)
42	_("$"* #,##0_);_("$"* (#,##0);_("$"* "-"_);_(@_)
43	_(* #,##0.00_);_(* (#,##0.00);_(* "-"??_);_(@_)
44	_("$"* #,##0.00_);_("$"* (#,##0.00);_("$"* "-"??_);_(@_)
45	mm:ss
46	[h]:mm:ss
47	mm:ss.0
48	##0.0E+0
49	@

Diagram Terület Lekerekített Szélek Beállítása

Hívja meg a Chart.setRoundedCorners metódust true‑val a diagram területének sarkainak lekerekítéséhez. A példa egy csoportosított oszlopdiagramot hoz létre, és a getLineFormat metódussal egy egyszínű szürke körvonalat és egysoros vonalstílust ad neki, mielőtt elmentené a prezentációt.

const aspose = { slides: require("aspose.slides.via.java") };
const java = require("java");

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

    let chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 100, 600, 400);
    chart.getLineFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
    chart.getLineFormat().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "GRAY"));
    chart.getLineFormat().setStyle(java.newByte(aspose.slides.LineStyle.Single));
    chart.setRoundedCorners(true);

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

Meglévő Diagram Megjegyzések Szerkesztése

Egy diagram tartalmazhat egyedi alakzatokat, például egy szöveges megjegyzést, amely a jelentés állapotát magyarázza. Ezeket az alakzatokat a Chart.getUserShapes metódussal érheti el. Az getShapes metódus által visszaadott gyűjtemény a diagramhoz tartozó alakzatokat tartalmazza.

Egy egyszerű szövegdoboz, amely egy diagram fölött helyezkedik el, a diára tartozik, még ha úgy is néz ki, mintha a diagram része lenne. A Slide.getShapes iterálásával megtalálhatók a diagram és a normál diaképek, de a diagramon belüli egyedi alakzatok nem szerepelnek. A diagramcímek és adatcímkék külön diagramelemek, nem egyedi megjegyzések ebben a gyűjteményben.

Töltse le a chart-annotations.pptx fájlt, és helyezze az alkalmazás munkakönyvtárába. Az első diája egy diagramot tartalmaz egy csoportosítatlan megjegyzéssel, amely a „Preliminary results” szöveget tartalmazza, egy diagramhoz tartozó vonallal és egy egyszerű diára helyezett szövegdobozzal, amely a „Slide overlay” feliratot mutatja. A példa megtalálja az első diagramot az adott dián, és a megjegyzést „Final results”‑ra módosítja, amikor a jelentés készen áll a közzétételre. Ellenőrzi, hogy a gyűjtemény ne legyen üres, és csak egy olyan AutoShape alakzatot szerkeszi, amelynek a getTextFrame metódusa nem null, és a várt szöveget tartalmazza.

const aspose = { slides: require("aspose.slides.via.java") };
const java = require("java");

let presentation = new aspose.slides.Presentation("chart-annotations.pptx");
try {
    let slide = presentation.getSlides().get_Item(0);

    let chart = null;
    for (let i = 0; i < slide.getShapes().size(); i++) {
        let shape = slide.getShapes().get_Item(i);
        if (java.instanceOf(shape, "com.aspose.slides.IChart")) {
            chart = shape;
            break;
        }
    }

    if (chart == null || chart.getUserShapes().getShapes().size() == 0) {
        console.log("No chart or chart-owned shapes found.");
    } else {
        let updated = false;
        for (let i = 0; i < chart.getUserShapes().getShapes().size(); i++) {
            let shape = chart.getUserShapes().getShapes().get_Item(i);
            if (java.instanceOf(shape, "com.aspose.slides.IAutoShape")) {
                let annotation = shape;
                if (annotation.getTextFrame() != null && annotation.getTextFrame().getText() === "Preliminary results") {
                    annotation.getTextFrame().setText("Final results");
                    updated = true;
                    break;
                }
            }
        }

        if (updated) {
            presentation.save("chart-annotations-updated.pptx", aspose.slides.SaveFormat.Pptx);
        } else {
            console.log("No matching text annotation found.");
        }
    }
} finally {
    presentation.dispose();
}

A vonal és a diára helyezett szövegdoboz változatlan marad. Az alábbi képek a bemeneti és a mentett, újra megnyitott eredményt mutatják:

Szerkesztés előtt	Szerkesztés után

Note

A példa csak a felső szintű, diagramhoz tartozó alakzatokat vizsgálja. Ha egy megjegyzés egy GroupShape‑ben található, akkor annak a csoportnak a getShapes gyűjteményét is vizsgálja. Ezt rekurzívan ismételje a belső csoportok esetén, ugyanazokat a szöveges ellenőrzéseket alkalmazva a gyermek alakzatokra. Maga a csoport egy konténer; ne kezelje szövegdobozként.

GYIK

Beállíthatok félig átlátszó kitöltést oszlopoknak/területeknek, miközben a keret átlátszatlan marad?

Igen. A kitöltés átlátszósága és a körvonal külön konfigurálható. Ez hasznos a rács és az adatok olvashatóságának javításához sűrű vizualizációk esetén.

Hogyan kezeljem az adatcímkéket, ha átfedik egymást?

Csökkentse a betűméretet, tiltsa le a nem lényeges címkeelemeket (például a kategóriákat), igazítsa a címke pozícióját, szükség esetén csak a kiválasztott pontokhoz mutassa a címkéket, vagy válasszon „érték + jelmagyarázat” formátumot.

Alkalmazhatok-e színátmenetes vagy mintás kitöltést sorozatokra?

Igen. A sorozatok támogatják az egyszínű, színátmenetes és mintás kitöltéseket. Gyakorlatban takarékosan használjon színátmeneteket, és kerülje az olyan kombinációkat, amelyek csökkentik a kontrasztot a rács és a szöveg között.