Správa datových sérií grafu v prezentacích pomocí JavaScriptu

O čem je tato stránka

Naučte se, jak spravovat série grafu, datové body, buňky sešitu, formátování, překrytí, šířku mezery a záporné hodnoty v prezentacích pomocí JavaScriptu.

Přehled

Graf ukládá svá vykreslená data do sešitu s daty grafu. ChartSeries představuje jednu sadu souvisejících hodnot a každý ChartDataPoint v sérii odkazuje na jednu nebo více buněk sešitu. Objekt ChartCategory poskytuje popisky nebo seskupovací hodnoty sdílené sérií. Název série, kategorie a hodnoty bodů jsou tedy napojeny na objekty ChartDataCell, nikoli uloženy jen jako zobrazovaný text.

Pro typický kategoriální graf výchozí sešit používá řádek 0 pro názvy sérií, sloupec 0 pro názvy kategorií a zbývající buňky pro hodnoty sérií. Indexy listu, řádku a sloupce předávané metodě ChartDataWorkbook.getCell jsou nulové (zero‑based). Toto uspořádání je užitečné, když vytváříte graf s výchozími daty, ale nepředpokládejte, že každý existující graf jej používá. Pro načtenou prezentaci si před změnou hodnot v sešitu prohlédněte buňky, na které odkazují série, kategorie a datové body.

Nastavení grafu má tři různé úrovně:

• Nastavení na úrovni série, například ChartSeries.getFormat, poskytuje výchozí vzhled pro všechny body v jedné sérii.
• Nastavení datového bodu, například ChartDataPoint.getFormat, přepíše vzhled série pro jeden bod.
• Skupinová nastavení se vztahují na kompatibilní série, které patří do stejné ChartSeriesGroup. Skupinu získáte pomocí ChartSeries.getParentSeriesGroup, pokud potřebujete nastavit například překrytí nebo šířku mezery.

Když není explicitně nastaveno vyplnění bodu ani série, určuje automatický vzhled styl a motiv grafu. Když jsou k dispozici jak formátování série, tak bodu, má přednost formátování bodu.

Nastavení překrytí sérií grafu

ChartSeries.getOverlap hlásí, jak moc se překrývají pruhy nebo sloupce ve 2D grafu, v rozmezí -100 až 100 procent. Jedná se o jen‑read‑only projekci nastavení v rodičovské skupině sérií. Použijte ChartSeriesGroup.setOverlap pro aktualizaci všech kompatibilních sérií v této skupině. Tato volba se vztahuje na typy grafů, které zobrazují seskupené pruhy nebo sloupce; neovlivní nesouvisející skupiny sérií v kombinovaném grafu.

Následující příklad nastaví překrytí pro skupinu, která obsahuje první sérii:

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

const firstSlideIndex = 0;
const firstSeriesIndex = 0;
const overlapPercent = java.newByte(30);

const presentation = new aspose.slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(firstSlideIndex);

    // Nový graf obsahuje vzorové série, kategorie a hodnoty.
    const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 200);

    const series = chart.getChartData().getSeries().get_Item(firstSeriesIndex);
    series.getParentSeriesGroup().setOverlap(overlapPercent);

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

Výsledek:

Změna barvy výplně série

Pomocí ChartSeries.getFormat nastavíte výchozí výplň pro celou sérii. Pokud má bod již explicitně nastavenou výplň, jeho nastavení ChartDataPoint.getFormat přepíše výplň série pro tento bod.

Následující příklad použije plnou modrou výplň na první sérii:

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

const firstSlideIndex = 0;
const firstSeriesIndex = 0;
const solidFillType = java.newByte(aspose.slides.FillType.Solid);
const blueColor = java.getStaticFieldValue("java.awt.Color", "BLUE");

const presentation = new aspose.slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(firstSlideIndex);

    const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 200);

    const series = chart.getChartData().getSeries().get_Item(firstSeriesIndex);
    series.getFormat().getFill().setFillType(solidFillType);
    series.getFormat().getFill().getSolidFillColor().setColor(blueColor);

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

Výsledek:

Změna názvu série

Název série je uložen v sešitu s daty grafu a normálně se zobrazuje v legendě. Ve výchozím sešitu vytvořeném pro sloupcový graf s klastrováním je buňka B1 na řádku 0, sloupci 1 a obsahuje název první série. Pojmenované konstanty v následujícím příkladu tuto strukturu explicitně vymezují:

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

const firstSlideIndex = 0;
const worksheetIndex = 0;
const seriesNameRowIndex = 0;
const firstSeriesColumnIndex = 1;

const presentation = new aspose.slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(firstSlideIndex);

    const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 200);

    const workbook = chart.getChartData().getChartDataWorkbook();
    const seriesNameCell = workbook.getCell(worksheetIndex, seriesNameRowIndex, firstSeriesColumnIndex);
    seriesNameCell.setValue("Revenue");

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

Můžete také aktualizovat buňku, na kterou již odkazuje metoda ChartSeries.getName. Tento přístup se vyhýbá předpokladu konkrétního řádku a sloupce v existujícím grafu:

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

const firstSlideIndex = 0;
const firstSeriesIndex = 0;
const firstNameCellIndex = 0;

const presentation = new aspose.slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(firstSlideIndex);

    const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 200);

    const series = chart.getChartData().getSeries().get_Item(firstSeriesIndex);
    const seriesNameCell = series.getName().getAsCells().get_Item(firstNameCellIndex);
    seriesNameCell.setValue("Revenue");

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

Výsledek:

Získání automatické barvy výplně série

ChartSeries.getAutomaticSeriesColor vrací barvu vypočtenou z indexu série a stylu grafu. Jedná se o barvu použitou, když výplň série není explicitně definována. Volání metody pouze načte vypočtenou barvu; nenastaví novou výplň.

Následující příklad vypíše automatickou barvu každé výchozí série:

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

const firstSlideIndex = 0;

const presentation = new aspose.slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(firstSlideIndex);

    const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 200);

    const seriesCount = chart.getChartData().getSeries().size();
    for (let seriesIndex = 0; seriesIndex < seriesCount; seriesIndex++) {
        const series = chart.getChartData().getSeries().get_Item(seriesIndex);
        const automaticColor = series.getAutomaticSeriesColor();
        const automaticColorText = automaticColor.toString();
        console.log("Series " + seriesIndex + ": " + automaticColorText);
    }
} finally {
    presentation.dispose();
}

Ukázkový výstup pro výchozí styl grafu:

Series 0: java.awt.Color[r=79,g=129,b=189]
Series 1: java.awt.Color[r=192,g=80,b=77]
Series 2: java.awt.Color[r=155,g=187,b=89]

Přesné barvy závisí na stylu a motivu grafu.

Nastavení invertované barvy výplně pro sérii grafu

Pro sérii typu pruh, sloupec a bublina lze pomocí ChartSeries.setInvertIfNegative zobrazit záporné hodnoty jinou výplní. Nastavte běžnou výplň série na plnou, povolte inverzi a přiřaďte barvu záporných hodnot pomocí ChartSeries.getInvertedSolidFillColor. Záporná čísla zůstávají v sešitu beze změny; mění se pouze jejich barva při vykreslování.

Následující příklad nahradí výchozí data grafu jednou sérií. Řádek 0 listu obsahuje název série, sloupec 0 obsahuje názvy kategorií a sloupec 1 obsahuje hodnoty:

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

const firstSlideIndex = 0;
const worksheetIndex = 0;
const headerRowIndex = 0;
const categoryColumnIndex = 0;
const firstSeriesColumnIndex = 1;
const firstDataRowIndex = 1;
const solidFillType = java.newByte(aspose.slides.FillType.Solid);
const redColor = java.getStaticFieldValue("java.awt.Color", "RED");

const categoryNames = ["Category 1", "Category 2", "Category 3"];
const seriesValues = [-20, 50, -30];

const presentation = new aspose.slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(firstSlideIndex);

    const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 200);
    const chartData = chart.getChartData();
    const workbook = chartData.getChartDataWorkbook();

    chartData.getSeries().clear();
    chartData.getCategories().clear();

    const seriesNameCell = workbook.getCell(worksheetIndex, headerRowIndex, firstSeriesColumnIndex, "Series 1");
    const chartType = chart.getType();
    const series = chartData.getSeries().add(seriesNameCell, chartType);

    for (let categoryIndex = 0; categoryIndex < categoryNames.length; categoryIndex++) {
        const dataRowIndex = firstDataRowIndex + categoryIndex;
        const categoryName = categoryNames[categoryIndex];
        const seriesValue = seriesValues[categoryIndex];

        const categoryCell = workbook.getCell(worksheetIndex, dataRowIndex, categoryColumnIndex, categoryName);
        chartData.getCategories().add(categoryCell);

        const valueCell = workbook.getCell(worksheetIndex, dataRowIndex, firstSeriesColumnIndex, seriesValue);
        series.getDataPoints().addDataPointForBarSeries(valueCell);
    }

    const automaticSeriesColor = series.getAutomaticSeriesColor();
    series.getFormat().getFill().setFillType(solidFillType);
    series.getFormat().getFill().getSolidFillColor().setColor(automaticSeriesColor);
    series.setInvertIfNegative(true);
    series.getInvertedSolidFillColor().setColor(redColor);

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

Výsledek:

Inverzi můžete povolit pro jediný bod pomocí ChartDataPoint.setInvertIfNegative. V následujícím příkladu je inverze zakázána pro celou sérii a povolena jen pro vybraný bod. Bod je také nastaven na zápornou hodnotu, aby byl efekt viditelný:

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

const firstSlideIndex = 0;
const firstSeriesIndex = 0;
const targetDataPointIndex = 2;
const negativeValue = -30;
const solidFillType = java.newByte(aspose.slides.FillType.Solid);
const redColor = java.getStaticFieldValue("java.awt.Color", "RED");

const presentation = new aspose.slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(firstSlideIndex);

    const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 200);

    const series = chart.getChartData().getSeries().get_Item(firstSeriesIndex);
    const automaticSeriesColor = series.getAutomaticSeriesColor();
    series.getFormat().getFill().setFillType(solidFillType);
    series.getFormat().getFill().getSolidFillColor().setColor(automaticSeriesColor);
    series.getInvertedSolidFillColor().setColor(redColor);
    series.setInvertIfNegative(false);

    const dataPoint = series.getDataPoints().get_Item(targetDataPointIndex);
    dataPoint.getValue().getAsCell().setValue(negativeValue);
    dataPoint.setInvertIfNegative(true);

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

Vymazání konkrétní hodnoty datového bodu

Chcete‑li udělat jeden bod prázdný, aniž byste odstranili ostatní body, nastavte příslušnou buňku v sešitu na null. Pro sloupcový graf je vykreslená hodnota dostupná pomocí ChartDataPoint.getValue. Datový bod zůstane ve stejné pozici kategorie, ale graf bude jeho hodnotu považovat za prázdnou podle nastavení zobrazení prázdných hodnot grafu.

Následující příklad vymaže pouze druhý bod v první sérii:

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

const firstSlideIndex = 0;
const firstSeriesIndex = 0;
const targetDataPointIndex = 1;

const presentation = new aspose.slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(firstSlideIndex);

    const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 200);

    const series = chart.getChartData().getSeries().get_Item(firstSeriesIndex);
    const dataPoint = series.getDataPoints().get_Item(targetDataPointIndex);
    dataPoint.getValue().getAsCell().setValue(null);

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

Bodové grafy používají samostatné buňky X a Y a bublinové grafy také buňku velikosti. Vymažte jen buňku, která představuje hodnotu, kterou chcete odstranit. Nevolajte metodu ChartDataPointCollection.clear, pokud chcete zachovat ostatní body, protože tato metoda odstraní všechny datové body ze sbírky.

Nastavení šířky mezery mezi sériemi

Šířka mezery je prostor mezi sousedními shluky pruhů nebo sloupců, vyjádřený v procentech šířky pruhu nebo sloupce. Stejně jako překrytí patří do rodičovské skupiny sérií, nikoli k jedné sérii. Zavolejte ChartSeriesGroup.setGapWidth jednou pro danou skupinu. Větší hodnota vytvoří více prostoru mezi skupinami; menší hodnota je učiní hustšími.

Následující příklad změní šířku mezery a uloží jen výslednou prezentaci:

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

const firstSlideIndex = 0;
const firstSeriesIndex = 0;
const gapWidthPercent = 30;

const presentation = new aspose.slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(firstSlideIndex);

    const chart = slide.getShapes().addChart(aspose.slides.ChartType.StackedColumn, 20, 20, 500, 200);

    const series = chart.getChartData().getSeries().get_Item(firstSeriesIndex);
    series.getParentSeriesGroup().setGapWidth(gapWidthPercent);

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

Výsledek:

Často kladené dotazy

Které typy grafů podporují datové série?

Všechny typy grafů reprezentované výčtem ChartType používají data grafu, ale jejich série nemají všechny stejnou strukturu hodnot ani nastavení. Například kategoriální grafy používají kategorie a hodnoty, bodové grafy používají X a Y hodnoty a bublinové grafy přidávají velikosti bublin. Použijte metodu pro vytvoření datového bodu, která odpovídá typu série. Volby jako překrytí a šířka mezery platí jen pro kompatibilní skupiny pruhů nebo sloupců.

Co je skupina sérií grafu?

ChartSeriesGroup obsahuje kompatibilní série, které sdílejí nastavení na úrovni skupiny. Kombinovaný graf může obsahovat více než jednu skupinu, takže změna skupiny dosažené přes jednu sérii nemusí nutně změnit všechny série v grafu.

Obsahuje nově vytvořený graf výchozí data?

Ano. Ve výchozím nastavení metoda ShapeCollection.addChart vytvoří ukázkové série, kategorie a hodnoty. Tyto buňky můžete upravit nebo smazat jak série, tak i sbírky kategorií před přidáním zcela vlastního datového souboru. Přetížená metoda může také vytvořit graf bez výchozích dat.

Jak jsou objekty grafu napojeny na buňky sešitu?

Názvy sérií, popisky kategorií a hodnoty datových bodů odkazují na buňky v ChartDataWorkbook. Změna odkazované buňky aktualizuje odpovídající prvek grafu. Při vytváření vlastních dat udržujte řádky kategorií a řádky hodnot sérií zarovnané, aby každý bod byl vykreslen pod zamýšlenou kategorií.

Jak vymazat jeden bod místo celé série?

Nastavte příslušnou buňku s hodnotou na null, aby se zachovala pozice kategorie bodu jako prázdný bod. Použijte ChartDataPointCollection.clear jen tehdy, když chcete odstranit všechny body ze série, protože tato metoda odstraní všechny body ze sbírky.

Jak se zobrazují prázdné body?

Výsledek závisí na typu grafu a na hodnotě nastavené metodou Chart.setDisplayBlanksAs. Podporované grafy mohou prázdná místa zobrazovat jako mezery, jako nuly nebo propojením sousedních bodů. Vyberte nastavení, které odpovídá významu chybějících dat ve vaší prezentaci.

Jak jsou formátovány záporné hodnoty?

U podporovaných sérií typu pruh, sloupec a bublina zavolejte ChartSeries.setInvertIfNegative a nastavte barvu vrácenou metodou ChartSeries.getInvertedSolidFillColor. Chování můžete přepsat pro jednotlivý bod metodou ChartDataPoint.setInvertIfNegative. Tyto metody ovlivňují formátování, ne uložené číselné hodnoty.

Které formátování má přednost, když je formátována i série i bod?

Explicitní formátování datového bodu má přednost pro tento bod. Ostatní body nadále používají explicitní formát série nebo, pokud není formát série definován, automatický styl a motiv grafu. Skupinová nastavení, jako jsou překrytí a šířka mezery, řídí rozložení a nejsou přepisovány na úrovni bodu.

Existuje limit počtu sérií, které může graf obsahovat?

Aspose.Slides neukládá samostatný pevný limit počtu sérií. V praxi určují omezení souboru prezentace, dostupná paměť, výpočetní čas a čitelnost grafu praktický limit.

Co změnit, když jsou sloupce příliš blízko nebo příliš daleko od sebe?

Zavolejte ChartSeriesGroup.setGapWidth na příslušné rodičovské skupině sérií. Zvyšte hodnotu pro zvětšení prostoru mezi shluky nebo ji snižte, aby se shluky přiblížily.