Format des graphiques de présentation en JavaScript
Vue d’ensemble
Cet article explique comment mettre en forme les graphiques dans les présentations PowerPoint en utilisant Aspose.Slides. Il montre comment personnaliser les éléments clés d’un graphique tels que les axes, les lignes de grille, les titres, les légendes, la zone de traçage et les remplissages des parois afin d’améliorer l’apparence et la lisibilité des données du graphique.
Il montre également comment définir les propriétés de police pour le texte du graphique, appliquer des formats numériques prédéfinis aux données du graphique et activer les coins arrondis de la zone du graphique. Ensemble, ces exemples illustrent comment contrôler à la fois le style visuel et la présentation des données des graphiques dans une présentation.
Mettre en forme les entités du graphique
Utilisez Graphique pour mettre en forme les titres, les axes, les lignes de grille, les légendes et la zone de traçage du graphique. Cet exemple crée un graphique en courbes avec des marqueurs et des données par défaut, puis applique des styles de texte et de trait séparés à ses axes de valeurs et de catégories. Les tailles de police et les épaisseurs de trait sont spécifiées en points ; les libellés de catégorie sont tournés de 45 degrés.
L’axe de valeurs utilise setNumberFormat de manière indépendante des cellules source. Son étendue va de -2 à 15, avec des intervalles majeurs de 2 et des intervalles mineurs de 0,5. L’exemple combine également le formatage en pourcentage avec setDisplayUnit réglé sur les milliers, adaptez ces paramètres à la signification et à l’ampleur de vos données. La légende reste à l’extérieur de la zone de traçage parce que setOverlay est appelé avec false. Les remplissages du mur arrière et du plancher sont configurés via getBackWall et getFloor, mais ces surfaces ne sont visibles que dans les graphiques 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();
}
Définir les propriétés de police d’un graphique
Définissez la taille de police par défaut du texte du graphique via Chart.getTextFormat. L’exemple crée un graphique à colonnes groupées avec une police de 20 points et active les libellés de valeur pour la première série via setShowValue. Les éléments de texte avec leurs propres réglages de police explicites peuvent remplacer la valeur par défaut du graphique.
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();
}
Définir le format numérique
Utilisez ChartDataCell.setPresetNumberFormat pour appliquer un format numérique intégré aux cellules du classeur du graphique. Cet exemple crée un graphique à colonnes groupées avec des données par défaut basées sur les cellules et applique l’index de format 10 (0.00%) à chaque cellule de valeur de série. Cela modifie la façon dont les valeurs sont affichées dans le classeur sans changer les nombres sous-jacents ; par exemple, 0.25 s’affiche comme 25,00 %. Les formats des axes et des libellés de données peuvent être configurés séparément.
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();
}
Le tableau suivant répertorie les index de formats numériques intégrés avec des formats Excel représentatifs pour la langue anglaise (États‑Unis). Le format exact et son affichage peuvent varier selon l’application et la localisation, notamment pour les devises et les dates. Certains formats Excel diffèrent également des valeurs par défaut de la norme OOXML, comme indiqué dans les notes d’implémentation du format numérique de Microsoft.
| Index | Format |
|---|---|
| 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 | @ |
Définir les bordures arrondies de la zone du graphique
Appelez Chart.setRoundedCorners avec true pour arrondir les coins de la zone du graphique. L’exemple crée un graphique à colonnes groupées et utilise getLineFormat pour donner à son contour une couleur grise unie et un style de ligne simple avant d’enregistrer la présentation.
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();
}
Modifier les annotations de graphique existantes
Un graphique peut contenir des formes personnalisées, comme une annotation de texte expliquant l’état d’un rapport. Accédez à ces formes via Chart.getUserShapes. La collection renvoyée par getShapes contient les formes appartenant au graphique.
Une zone de texte ordinaire placée au-dessus d’un graphique appartient à la diapositive, même si elle semble faire partie du graphique. Parcourir Slide.getShapes trouve le graphique et les formes ordinaires de la diapositive, mais n’énumère pas les formes individuelles à l’intérieur du graphique. Les titres de graphique et les libellés de données sont des éléments de graphique distincts, pas des annotations personnalisées dans cette collection.
Téléchargez chart-annotations.pptx et placez‑le dans le répertoire de travail de l’application. Sa première diapositive contient un graphique avec une annotation dégrouppée indiquant « Preliminary results », une ligne appartenant au graphique, et une zone de texte ordinaire de la diapositive indiquant « Slide overlay ». L’exemple trouve le premier graphique de cette diapositive et modifie l’annotation en « Final results » lorsque le rapport est prêt à être publié. Il vérifie si la collection est vide et ne modifie qu’un AutoShape avec un cadre de texte non nul renvoyé par getTextFrame et le texte attendu.
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 ligne et la zone de texte de la diapositive restent inchangées. Les images suivantes montrent l’entrée et le résultat enregistré, puis rouvert :
| Before editing | After editing |
|---|---|
 |
 |
Note
L’exemple n’examine que les formes appartenant au graphique au niveau supérieur. Si une annotation se trouve à l’intérieur d’un GroupShape, inspectez également la collection getShapes de ce groupe. Répétez cela de façon récursive pour les groupes imbriqués, en appliquant les mêmes vérifications de texte à leurs formes enfant. Un groupe est lui‑même un conteneur ; ne le considérez pas comme une zone de texte.FAQ
Puis-je définir des remplissages semi‑transparents pour les colonnes/zones tout en conservant la bordure opaque ?
Oui. La transparence du remplissage et le contour sont configurés séparément. Cela est utile pour améliorer la lisibilité de la grille et des données dans des visualisations denses.
Comment gérer les libellés de données lorsqu’ils se chevauchent ?
Réduisez la taille de la police, désactivez les composants de libellé non essentiels (par exemple, les catégories), ajustez la position du libellé, affichez les libellés uniquement pour les points sélectionnés si nécessaire, ou passez au format « valeur + légende ».
Puis-je appliquer des remplissages en dégradé ou à motifs aux séries ?
Oui. Les séries prennent en charge les remplissages unis, en dégradé et à motifs. En pratique, utilisez les dégradés avec parcimonie et évitez les combinaisons qui réduisent le contraste avec la grille et le texte.