Personalizzare gli assi dei grafici nelle presentazioni usando JavaScript

Di cosa tratta questa pagina

Scopri come usare JavaScript con Aspose.Slides per Node.js via Java per personalizzare gli assi dei grafici nelle presentazioni PowerPoint per report e visualizzazioni.

Panoramica

Questo articolo spiega come personalizzare gli assi dei grafici con Aspose.Slides per Node.js tramite Java. Include valori dell’asse calcolati, scambio di righe e colonne del grafico, visibilità dell’asse, intervalli delle etichette di categoria e dei segni di spunta, categorie data e formattazione, rotazione del titolo, posizionamento dell’asse e unità di visualizzazione.

Ottenere i valori massimi sull’asse verticale nei grafici

Crea una Presentazione e aggiungi un grafico ad area con dati predefiniti. Chiama validateChartLayout prima di leggere i valori dell’asse calcolati in modo che il layout del grafico sia aggiornato.

Leggi getActualMaxValue e getActualMinValue per i limiti dell’asse, e getActualMajorUnit e getActualMinorUnit per gli intervalli dei segni di spunta. getActualMajorUnitScale e getActualMinorUnitScale forniscono le scale di unità temporali, rilevanti per gli assi data. L’esempio memorizza questi valori in variabili locali e salva il grafico.

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

Scambiare i dati tra gli assi

Usa switchRowColumn per scambiare i ruoli di serie e categorie nei dati del grafico. Ogni precedente categoria diventa una serie, e ogni precedente serie diventa una categoria. Questo modifica il modo in cui i dati sono raggruppati; non scambia gli assi orizzontale e verticale. L’esempio utilizza setRange per collegare i dati predefiniti a Sheet1!A1:D5, includendo la riga di intestazione e la colonna delle categorie, prima di scambiare righe e colonne. Salva un grafico con quattro serie e tre categorie.

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

Disabilitare l’asse verticale per i grafici a linee

Chiama setVisible con false sull’asse verticale per nasconderlo. L’esempio crea un grafico a linee con dati predefiniti e lo salva con l’asse verticale nascosto.

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

Disabilitare l’asse orizzontale per i grafici a linee

Chiama setVisible con false sull’asse orizzontale per nasconderlo. L’esempio crea un grafico a linee con dati predefiniti e lo salva con l’asse orizzontale nascosto.

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

Modificare un asse di categoria

Usa setCategoryAxisType per scegliere un asse di categoria data o testo. Questo esempio richiede ExistingChart.pptx, con un grafico come prima forma nella prima diapositiva e celle di categoria contenenti valori data Excel numerici. Cambia l’asse orizzontale in un asse data. Chiamando setAutomaticMajorUnit con false, setMajorUnit con 1 e setMajorUnitScale con TimeUnitType.Months posiziona i segni principali a intervalli di un mese.

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

Controllare gli intervalli delle etichette dell’asse di categoria

Quando un grafico ha molte categorie, riduci il numero di etichette dell’asse visibili senza rimuovere categorie o punti dati. Chiama setAutomaticTickLabelSpacing con false, poi passa l’intervallo di categoria desiderato a setTickLabelSpacing. Per le categorie di testo nel loro ordine normale, il conteggio inizia dalla prima categoria:

Intervallo	Etichette visualizzate nell’esempio
1	Categoria 1, Categoria 2, Categoria 3, … Categoria 24
2	Categoria 1, Categoria 3, Categoria 5, … Categoria 23
3	Categoria 1, Categoria 4, Categoria 7, … Categoria 22

Un intervallo di 3 mostra ogni terza etichetta, lasciando due etichette nascoste tra quelle visualizzate. Non rimuove le colonne corrispondenti. La spaziatura automatica sceglie un intervallo in base allo spazio disponibile; non mostra necessariamente tutte le etichette.

I ticche hanno controlli separati. Chiama setAutomaticTickMarksSpacing con false e usa setTickMarksSpacing per impostare il loro intervallo. Per esempio, 1 mantiene un ticche a ogni intervallo di categoria mentre le etichette appaiono solo ogni terza categoria. Usa setMajorTickMark con uno stile visibile così da poter vedere il risultato. Impostando nuovamente i setter di spaziatura automatica su true il grafico sceglie nuovamente quell’intervallo.

L’esempio autoconservato crea 24 categorie e una serie, poi salva tre diapositive in CategoryAxisIntervals.pptx: spaziatura automatica, spaziatura manuale delle etichette con ticche indipendenti e ripristino della spaziatura automatica. Le due copie mantengono i dati originali del grafico. Non è necessaria alcuna presentazione di input. Il testo dell’etichetta orizzontale rende evidente la differenza di densità.

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

    // Diapositiva 2: mostra ogni terza etichetta, ma mantieni un segno di spunta per ogni categoria.
    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);

    // Diapositiva 3: lascia che il grafico scelga nuovamente entrambi gli intervalli.
    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();
}

Spaziatura automatica (diapositiva 1): In questa resa, ogni seconda etichetta di categoria è visualizzata e avvolta su due righe. Il risultato automatico può variare con dimensioni del grafico, caratteri e motore di rendering.

Spaziatura manuale (diapositiva 2): Ogni terza etichetta è visualizzata su una linea, mentre i ticche rimangono a ogni intervallo di categoria. Tutte le 24 colonne, incluse quelle senza etichette, rimangono visibili con gli stessi valori. La diapositiva 3 ripristina l’aspetto automatico mostrato sopra.

Scegliere l’asse e l’intervallo corretti

Usa questo intervallo conteggio-categorie per un asse di categoria di tipo testo, come l’asse di categoria di un grafico a colonne, linee, area o barre. In un grafico a colonne è l’asse orizzontale. In un grafico a barre orizzontali, l’asse di categoria è verticale, quindi applica queste impostazioni all’asse restituito da getVerticalAxis. La spaziatura dei segni di spunta si applica anche a un asse di serie nei grafici che ne hanno uno.

Non utilizzare la spaziatura delle etichette di categoria per impostare la scala numerica di un asse di valore. Su un asse di valore, setMajorUnit specifica una differenza di valori: per esempio, un’unità maggiore di 10 produce ticche a 0, 10, 20, ecc. quando l’asse parte da zero. Un intervallo di etichetta di categoria di 3 conta invece le posizioni di categoria, indipendentemente dai loro valori. I grafici a dispersione e a bolle usano assi di valore anziché un asse di categoria testo. Per un asse data, usa unità e scale basate sul tempo come descritto in Modificare un asse di categoria.

Impostare il formato data per i valori dell’asse di categoria

L’esempio sostituisce i dati predefiniti del grafico con quattro valori annuali. Le date sono memorizzate come numeri seriali OLE Automation nel primo foglio di lavoro (indice 0), calcolati come numero di giorni dal 30 dicembre 1899 per queste date. Il calcolo JavaScript utilizza timestamp UTC e divide la differenza per 86 400 000 millisecondi al giorno. Usa setCategoryAxisType con CategoryAxisType.Date, chiama setNumberFormatLinkedToSource con false e passa yyyy a setNumberFormat affinché le etichette di categoria mostrino anni a quattro cifre indipendentemente dalla formattazione della cella.

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

Impostare un angolo di rotazione per il titolo dell’asse del grafico

Chiama setTitle con true sull’asse verticale, fornisci il testo del titolo e usa setRotationAngle per ruotare il titolo. L’angolo è misurato in gradi; questo esempio salva un grafico a colonne con il titolo dell’asse di valore ruotato di 90 gradi.

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

Impostare la posizione dell’asse su un asse di categoria o di valore

Usa setAxisBetweenCategories per controllare se l’asse di valore attraversa l’asse di categoria tra le categorie o sui segni di categoria. Questa impostazione si applica agli assi di categoria. L’esempio lo imposta su true sull’asse di categoria orizzontale di un grafico a colonne e salva il risultato.

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

Impostare l’unità di visualizzazione su un asse di valori del grafico

Usa setDisplayUnit per scalare le etichette su un asse di valore senza modificare i dati sottostanti. Con DisplayUnitType impostato su Millions, un valore di 60 000 000 viene visualizzato come 60. L’esempio crea un grafico a colonne e applica l’unità di visualizzazione milioni al suo asse verticale.

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

Come impostare il valore in cui un asse incrocia l’altro (incrocio degli assi)?

Usa setCrossType per selezionare il comportamento di incrocio. Per specificare un valore numerico di incrocio, utilizza setCrossAt. Queste impostazioni ti consentono di spostare l’incrocio dell’asse a una linea di base appropriata.

Come posso posizionare le etichette dei segni rispetto all’asse?

Chiama setTickLabelPosition usando TickLabelPositionType: Low, High, NextTo o None. Per controllare i segni di spunta stessi, usa setMajorTickMark o setMinorTickMark; questi sono separati dal posizionamento delle etichette.