在 JavaScript 中格式化簡報圖表
Contents
[
Hide
]
概觀
本篇說明如何使用 Aspose.Slides 在 PowerPoint 簡報中格式化圖表。示範如何自訂軸線、格線、標題、圖例、繪圖區與牆面填色等關鍵圖表元素，以提升圖表資料的外觀與可讀性。
亦示範如何設定圖表文字的字型屬性、套用預設數值格式至圖表資料，並為圖表區域啟用圓角。這些範例共同展示了如何控制簡報中圖表的視覺樣式與資料呈現方式。
格式化圖表實體
使用圖表來格式化圖表標題、軸線、格線、圖例與繪圖區。此範例建立一個含標記且使用預設資料的折線圖，然後為其值軸與類別軸套用不同的文字與線條樣式。字型大小與線條寬度以點為單位；類別標籤旋轉 45 度。
值軸使用setNumberFormat與來源儲存格獨立。其刻度範圍從 -2 到 15，主要間隔為 2，次要間隔為 0.5。範例也結合百分比格式與setDisplayUnit 設為千位，請依據資料的意義與量級調整這些設定。圖例因呼叫setOverlay 並傳入 false 而保持在繪圖區外。背牆與地板的填色透過getBackWall 與getFloor 設定，但這些表面僅在 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();
}
為圖表設定字型屬性
透過Chart.getTextFormat設定圖表文字的預設字型大小。範例建立一個叢集柱狀圖，字型為 20 點，並透過setShowValue 為第一個系列啟用數值標籤。具備自行明確字型設定的文字元素會覆寫圖表的預設設定。
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();
}
設定數值格式
使用ChartDataCell.setPresetNumberFormat將內建數值格式套用至圖表工作簿儲存格。此範例建立一個使用預設、儲存格支援資料的叢集柱狀圖，並將格式索引 10（0.00%）套用至每個系列的值儲存格。此動作會改變工作簿中值的顯示方式，而不改變底層數字；例如 0.25 會顯示為 25.00%。軸線與資料標籤的格式亦可分別設定。
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();
}
以下表格列出內建數值格式索引及其在英文（美國）語系下的 Excel 範例格式。實際的格式字串與顯示方式可能因應用程式與語系而異，特別是貨幣與日期。某些 Excel 格式亦與 OOXML 標準的預設不同，詳情請參閱Microsoft 的數值格式實作說明。
| 索引 | 格式 |
|---|---|
| 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 | @ |
設定圖表區域圓角邊框
呼叫Chart.setRoundedCorners 並傳入 true，即可為圖表區域套用圓角。此範例建立一個叢集柱狀圖，使用getLineFormat 為其外框設定實心灰色與單線樣式，最後儲存簡報。
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();
}
編輯現有圖表註解
圖表可以包含自訂形狀，例如說明報告狀態的文字註解。透過Chart.getUserShapes存取這些形狀。由getShapes 回傳的集合包含圖表擁有的形狀。
放在圖表上方的普通文字方塊屬於投影片，即使看起來像是圖表的一部份。遍歷Slide.getShapes 會找到圖表與普通投影片形狀，但不會列舉圖表內部的個別形狀。圖表標題與資料標籤是獨立的圖表元素，並非此集合中的自訂註解。
下載chart-annotations.pptx 並放置於應用程式的工作目錄。其第一張投影片包含一個圖表，圖表內有未群組的註解「Preliminary results」、圖表擁有的線條，以及一個普通的投影片文字方塊「Slide overlay」。範例在該投影片上找到第一個圖表，並在報告準備發布時將註解改為「Final results」。程式會檢查集合是否為空，僅編輯由getTextFrame 回傳且文字框不為 null 的AutoShape，且文字符合預期。
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();
}
線條與投影片文字方塊保持不變。以下圖示顯示輸入與儲存後重新開啟的結果：
| 編輯前 | 編輯後 |
|---|---|
 |
 |
Note
此範例僅檢查頂層的圖表擁有形狀。如果註解位於GroupShape 內，亦需檢查該群組的getShapes 集合。對於巢狀群組，遞迴執行相同的文字檢查於其子形狀。群組本身只是容器，請勿將其視為文字方塊。常見問題
我可以為柱形/區域設定半透明填色，同時保持邊框不透明嗎？
可以。填色透明度與外框是分別設定的，這在密集視覺化中有助於提升格線與資料的可讀性。
當資料標籤重疊時該如何處理？
減少字型大小、停用非必要的標籤元件（例如類別）、調整標籤位置，必要時僅顯示選取點的標籤，或改用「值 + 圖例」的格式。
我可以為系列套用漸層或圖樣填色嗎？
可以。系列支援實心、漸層與圖樣填色。實務上建議節制使用漸層，並避免與格線與文字形成低對比的組合。