Formattare i grafici delle presentazioni in JavaScript
Panoramica
Questo articolo spiega come formattare i grafici nelle presentazioni PowerPoint utilizzando Aspose.Slides. Mostra come personalizzare gli elementi chiave del grafico, come assi, linee della griglia, titoli, legende, area del grafico e riempimenti delle pareti, per migliorare l’aspetto e la leggibilità dei dati del grafico.
Dimostra inoltre come impostare le proprietà del carattere per il testo del grafico, applicare formati numerici predefiniti ai dati del grafico e abilitare gli angoli arrotondati per l’area del grafico. Insieme, questi esempi mostrano come controllare sia lo stile visivo sia la presentazione dei dati nei grafici di una presentazione.
Formattare le entità del grafico
Utilizza Chart per formattare titoli, assi, linee della griglia, legende e l’area del grafico. Questo esempio crea un grafico a linee con marcatori e dati predefiniti, quindi applica stili di testo e di linea separati ai suoi assi dei valori e delle categorie. Le dimensioni dei caratteri e le larghezze delle linee sono specificate in punti; le etichette delle categorie sono ruotate di 45 gradi.
L’asse dei valori utilizza setNumberFormat indipendentemente dalle celle di origine. La sua scala va da -2 a 15, con intervalli maggiori di 2 e intervalli minori di 0,5. L’esempio combina anche la formattazione percentuale con setDisplayUnit impostata su migliaia, quindi adatta queste impostazioni al significato e alla magnitudine dei tuoi dati. La leggenda rimane fuori dall’area del grafico perché setOverlay è chiamato con false. I riempimenti della parete posteriore e del pavimento sono configurati tramite getBackWall e getFloor, ma queste superfici sono visibili solo nei grafici 3D.
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();
}
Impostare le proprietà del carattere per un grafico
Imposta la dimensione predefinita del carattere per il testo del grafico tramite Chart.getTextFormat. L’esempio crea un grafico a colonne raggruppate con un carattere da 20 punti e abilita le etichette dei valori per la prima serie tramite setShowValue. Gli elementi di testo con impostazioni di carattere esplicite possono sovrascrivere il valore predefinito del grafico.
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();
}
Impostare il formato numerico
Usa ChartDataCell.setPresetNumberFormat per applicare un formato numerico integrato alle celle del foglio dati del grafico. Questo esempio crea un grafico a colonne raggruppate con dati predefiniti basati su celle e applica l’indice di formato 10 (0.00%) a ciascuna cella di valore della serie. Ciò modifica il modo in cui i valori vengono visualizzati nel foglio di lavoro senza alterare i numeri sottostanti; ad esempio, 0,25 viene mostrato come 25,00 %. I formati degli assi e delle etichette dei dati possono essere configurati separatamente.
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();
}
La tabella seguente elenca gli indici dei formati numerici integrati con i formati Excel rappresentativi per la locale English (United States). Le stringhe di formato esatte e la loro visualizzazione possono variare a seconda dell’applicazione e della locale, in particolare per valute e date. Alcuni formati Excel differiscono anche dai valori predefiniti nello standard OOXML, come descritto nelle note di implementazione del formato numerico di Microsoft.
| Indice | Formato |
|---|---|
| 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 | @ |
Impostare i bordi arrotondati dell’area del grafico
Chiama Chart.setRoundedCorners con true per arrotondare gli angoli dell’area del grafico. L’esempio crea un grafico a colonne raggruppate e utilizza getLineFormat per dare al suo contorno un colore grigio solido e uno stile a linea singola prima di salvare la presentazione.
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();
}
Modificare le annotazioni esistenti del grafico
Un grafico può contenere forme personalizzate, come un’annotazione testuale che spiega lo stato di un report. Accedi a queste forme tramite Chart.getUserShapes. La collezione restituita da getShapes contiene le forme di proprietà del grafico.
Una casella di testo ordinaria posizionata sopra un grafico appartiene alla diapositiva, anche se sembra parte del grafico. Iterare su Slide.getShapes individua il grafico e le forme ordinarie della diapositiva, ma non elenca le singole forme all’interno del grafico. Titoli del grafico ed etichette dei dati sono elementi separati del grafico, non annotazioni personalizzate in questa collezione.
Scarica chart-annotations.pptx e posizionalo nella directory di lavoro dell’applicazione. La sua prima diapositiva contiene un grafico con un’annotazione non raggruppata che recita “Preliminary results”, una linea di proprietà del grafico e una casella di testo della diapositiva che recita “Slide overlay”. L’esempio trova il primo grafico su quella diapositiva e cambia l’annotazione in “Final results” quando il report è pronto per la pubblicazione. Verifica se la collezione è vuota e modifica solo un AutoShape con un frame di testo non nullo restituito da getTextFrame e con il testo previsto.
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();
}
La linea e la casella di testo della diapositiva rimangono invariate. Le immagini seguenti mostrano l’input e il risultato salvato e riaperto:
| Prima della modifica | Dopo la modifica |
|---|---|
 |
 |
Nota
L’esempio ispeziona solo le forme di proprietà del grafico di livello superiore. Se un’annotazione è all’interno di un GroupShape, ispeziona anche la collezione getShapes di quel gruppo. Ripeti ricorsivamente per i gruppi nidificati, applicando gli stessi controlli di testo alle forme figlie. Un gruppo è un contenitore; non trattarlo come una casella di testo.FAQ
Posso impostare riempimenti semitrasparenti per colonne/aree mantenendo il bordo opaco?
Sì. Trasparenza del riempimento e contorno sono configurati separatamente. Questo è utile per migliorare la leggibilità della griglia e dei dati in visualizzazioni dense.
Come posso gestire le etichette dei dati quando si sovrappongono?
Riduci la dimensione del carattere, disabilita componenti di etichetta non essenziali (ad esempio le categorie), regola la posizione dell’etichetta, mostra le etichette solo per i punti selezionati se necessario, oppure passa al formato “valore + legenda”.
Posso applicare riempimenti a gradiente o a motivo alle serie?
Sì. Le serie supportano riempimenti solidi, a gradiente e a motivo. In pratica, usa i gradienti con parsimonia ed evita combinazioni che riducono il contrasto con la griglia e il testo.