Tạo hoặc Cập nhật Biểu đồ PowerPoint trong JavaScript
Tổng quan
Bài viết này cung cấp hướng dẫn toàn diện về cách tạo và tùy chỉnh biểu đồ bằng Aspose.Slides cho Node.js qua Java. Bạn sẽ học cách thêm biểu đồ vào slide một cách lập trình, đưa dữ liệu vào và áp dụng các tùy chọn định dạng khác nhau để đáp ứng yêu cầu thiết kế cụ thể. Trong suốt bài viết, các ví dụ mã chi tiết minh họa từng bước, từ khởi tạo đối tượng Presentation và Chart đến cấu hình series, trục và legend. Khi theo dõi hướng dẫn này, bạn sẽ nắm vững cách tích hợp việc tạo biểu đồ động vào các ứng dụng Node.js của mình, giúp giảm bớt công sức tạo các bản trình bày dựa trên dữ liệu.
Tạo biểu đồ
Biểu đồ giúp mọi người nhanh chóng hình dung dữ liệu và thu được những hiểu biết mà có thể không ngay lập tức rõ ràng từ bảng hoặc bảng tính.
Tại sao nên tạo biểu đồ?
Sử dụng biểu đồ, bạn có thể:
- tổng hợp, rút gọn hoặc tóm tắt lượng lớn dữ liệu trên một slide trong bản trình bày;
- phô bày các mẫu và xu hướng trong dữ liệu;
- suy ra hướng và động lực của dữ liệu theo thời gian hoặc so với một đơn vị đo cụ thể;
- phát hiện các ngoại lệ, sai lệch, lỗi và dữ liệu vô nghĩa;
- truyền đạt hoặc trình bày dữ liệu phức tạp.
Trong PowerPoint, bạn có thể tạo biểu đồ thông qua chức năng Chèn, cho phép lựa chọn các mẫu để thiết kế nhiều loại biểu đồ. Sử dụng Aspose.Slides, bạn có thể tạo cả biểu đồ thông thường (dựa trên các loại biểu đồ phổ biến) và biểu đồ tùy chỉnh.
Note
Sử dụng enumeration ChartType trong module aspose.slides. Các giá trị trong enumeration này tương ứng với các loại biểu đồ khác nhau.Tạo biểu đồ Cột Nhóm
Ví dụ này sử dụng addChart để tạo một biểu đồ cột nhóm so sánh hai series trên ba danh mục. Các series sử dụng màu nền đỏ và xanh lá, và các nhãn riêng lẻ hiển thị tên danh mục, tên series và giá trị. Chỉ mục worksheet 0 ám chỉ sheet đầu tiên trong workbook biểu đồ được nhúng.
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, 20, 500, 300);
chart.getChartTitle().addTextFrameForOverriding("Sample Title");
chart.getChartTitle().getTextFrameForOverriding().getTextFrameFormat().setCenterText(java.newByte(aspose.slides.NullableBool.True));
chart.getChartTitle().setHeight(20);
chart.setTitle(true);
let workbook = chart.getChartData().getChartDataWorkbook();
let worksheetIndex = 0;
chart.getChartData().getSeries().clear();
chart.getChartData().getCategories().clear();
let seriesNameCell = workbook.getCell(worksheetIndex, 0, 1, "Series 1");
chart.getChartData().getSeries().add(seriesNameCell, chart.getType());
seriesNameCell = workbook.getCell(worksheetIndex, 0, 2, "Series 2");
chart.getChartData().getSeries().add(seriesNameCell, chart.getType());
let categoryCell = workbook.getCell(worksheetIndex, 1, 0, "Category 1");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(worksheetIndex, 2, 0, "Category 2");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(worksheetIndex, 3, 0, "Category 3");
chart.getChartData().getCategories().add(categoryCell);
let series = chart.getChartData().getSeries().get_Item(0);
let valueCell = workbook.getCell(worksheetIndex, 1, 1, 20);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, 2, 1, 50);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, 3, 1, 30);
series.getDataPoints().addDataPointForBarSeries(valueCell);
series.getFormat().getFill().setFillType(java.newByte(aspose.slides.FillType.Solid));
series.getFormat().getFill().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "RED"));
series = chart.getChartData().getSeries().get_Item(1);
valueCell = workbook.getCell(worksheetIndex, 1, 2, 30);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, 2, 2, 10);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, 3, 2, 60);
series.getDataPoints().addDataPointForBarSeries(valueCell);
series.getFormat().getFill().setFillType(java.newByte(aspose.slides.FillType.Solid));
series.getFormat().getFill().getSolidFillColor().setColor(java.newInstanceSync("java.awt.Color", 0, 128, 0));
let label = series.getDataPoints().get_Item(0).getLabel();
label.getDataLabelFormat().setShowCategoryName(true);
label = series.getDataPoints().get_Item(1).getLabel();
label.getDataLabelFormat().setShowSeriesName(true);
label = series.getDataPoints().get_Item(2).getLabel();
label.getDataLabelFormat().setShowValue(true);
label.getDataLabelFormat().setShowSeriesName(true);
label.getDataLabelFormat().setSeparator("/");
presentation.save("AsposeChart.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Kết quả:
Tạo biểu đồ Phân tán
Biểu đồ phân tán (còn gọi là biểu đồ scatter hoặc đồ thị x-y) thường được dùng để kiểm tra các mẫu hoặc chứng minh mối tương quan giữa hai biến.
Sử dụng biểu đồ phân tán khi:
- Bạn có dữ liệu số cặp đôi.
- Bạn có hai biến phù hợp với nhau.
- Bạn muốn xác định liệu hai biến có liên quan hay không.
- Bạn có một biến độc lập có nhiều giá trị cho một biến phụ thuộc.
Ví dụ này vẽ hai bộ giá trị x-y. Series đầu tiên sử dụng đường thẳng với dấu sao, trong khi series thứ hai sử dụng đường mượt với dấu vòng tròn; cả hai đều có kích thước dấu đánh dấu là 10, được cấu hình bằng setSize. Phương thức setSymbol điều khiển hình dạng dấu đánh dấu.
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.ScatterWithSmoothLines, 20, 20, 500, 300);
let workbook = chart.getChartData().getChartDataWorkbook();
let worksheetIndex = 0;
chart.getChartData().getSeries().clear();
let seriesNameCell = workbook.getCell(worksheetIndex, 1, 1, "Series 1");
chart.getChartData().getSeries().add(seriesNameCell, chart.getType());
seriesNameCell = workbook.getCell(worksheetIndex, 1, 3, "Series 2");
chart.getChartData().getSeries().add(seriesNameCell, chart.getType());
let series = chart.getChartData().getSeries().get_Item(0);
let xValueCell = workbook.getCell(worksheetIndex, 2, 1, 1);
let yValueCell = workbook.getCell(worksheetIndex, 2, 2, 3);
series.getDataPoints().addDataPointForScatterSeries(xValueCell, yValueCell);
xValueCell = workbook.getCell(worksheetIndex, 3, 1, 2);
yValueCell = workbook.getCell(worksheetIndex, 3, 2, 10);
series.getDataPoints().addDataPointForScatterSeries(xValueCell, yValueCell);
series.setType(aspose.slides.ChartType.ScatterWithStraightLinesAndMarkers);
series.getMarker().setSize(10);
series.getMarker().setSymbol(aspose.slides.MarkerStyleType.Star);
series = chart.getChartData().getSeries().get_Item(1);
xValueCell = workbook.getCell(worksheetIndex, 2, 3, 5);
yValueCell = workbook.getCell(worksheetIndex, 2, 4, 2);
series.getDataPoints().addDataPointForScatterSeries(xValueCell, yValueCell);
xValueCell = workbook.getCell(worksheetIndex, 3, 3, 3);
yValueCell = workbook.getCell(worksheetIndex, 3, 4, 1);
series.getDataPoints().addDataPointForScatterSeries(xValueCell, yValueCell);
xValueCell = workbook.getCell(worksheetIndex, 4, 3, 2);
yValueCell = workbook.getCell(worksheetIndex, 4, 4, 2);
series.getDataPoints().addDataPointForScatterSeries(xValueCell, yValueCell);
xValueCell = workbook.getCell(worksheetIndex, 5, 3, 5);
yValueCell = workbook.getCell(worksheetIndex, 5, 4, 1);
series.getDataPoints().addDataPointForScatterSeries(xValueCell, yValueCell);
series.getMarker().setSize(10);
series.getMarker().setSymbol(aspose.slides.MarkerStyleType.Circle);
presentation.save("AsposeChart.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Kết quả:
Tạo biểu đồ Tròn
Biểu đồ tròn thích hợp nhất để hiển thị mối quan hệ phần‑với‑toàn bộ trong dữ liệu, đặc biệt khi dữ liệu có các nhãn phân loại kèm giá trị số. Tuy nhiên, nếu dữ liệu của bạn có quá nhiều phần hoặc nhãn, bạn có thể cân nhắc sử dụng biểu đồ cột thay thế.
Ví dụ này tạo một biểu đồ tròn với ba giá trị theo quý. Mỗi lát có màu nền và viền tùy chỉnh, và các nhãn hiển thị các tổ hợp khác nhau của giá trị, phần trăm và thông tin series. Phương thức setFirstSliceAngle đặt lát đầu tiên bắt đầu ở 180 độ.
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.Pie, 20, 20, 500, 300);
chart.getChartTitle().addTextFrameForOverriding("Sample Title");
chart.getChartTitle().getTextFrameForOverriding().getTextFrameFormat().setCenterText(java.newByte(aspose.slides.NullableBool.True));
chart.getChartTitle().setHeight(20);
chart.setTitle(true);
chart.getChartData().getSeries().get_Item(0).getLabels().getDefaultDataLabelFormat().setShowValue(true);
let workbook = chart.getChartData().getChartDataWorkbook();
let worksheetIndex = 0;
chart.getChartData().getSeries().clear();
chart.getChartData().getCategories().clear();
let categoryCell = workbook.getCell(0, 1, 0, "1st Qtr");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, 2, 0, "2nd Qtr");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, 3, 0, "3rd Qtr");
chart.getChartData().getCategories().add(categoryCell);
let seriesNameCell = workbook.getCell(0, 0, 1, "Series 1");
let series = chart.getChartData().getSeries().add(seriesNameCell, chart.getType());
let valueCell = workbook.getCell(worksheetIndex, 1, 1, 20);
series.getDataPoints().addDataPointForPieSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, 2, 1, 50);
series.getDataPoints().addDataPointForPieSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, 3, 1, 30);
series.getDataPoints().addDataPointForPieSeries(valueCell);
chart.getChartData().getSeriesGroups().get_Item(0).setColorVaried(true);
let firstSlice = series.getDataPoints().get_Item(0);
firstSlice.getFormat().getFill().setFillType(java.newByte(aspose.slides.FillType.Solid));
firstSlice.getFormat().getFill().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "CYAN"));
firstSlice.getFormat().getLine().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
firstSlice.getFormat().getLine().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "GRAY"));
firstSlice.getFormat().getLine().setWidth(3.0);
firstSlice.getFormat().getLine().setStyle(java.newByte(aspose.slides.LineStyle.ThinThick));
firstSlice.getFormat().getLine().setDashStyle(java.newByte(aspose.slides.LineDashStyle.LargeDash));
let secondSlice = series.getDataPoints().get_Item(1);
secondSlice.getFormat().getFill().setFillType(java.newByte(aspose.slides.FillType.Solid));
secondSlice.getFormat().getFill().getSolidFillColor().setColor(java.newInstanceSync("java.awt.Color", 165, 42, 42));
secondSlice.getFormat().getLine().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
secondSlice.getFormat().getLine().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "BLUE"));
secondSlice.getFormat().getLine().setWidth(3.0);
secondSlice.getFormat().getLine().setStyle(java.newByte(aspose.slides.LineStyle.Single));
secondSlice.getFormat().getLine().setDashStyle(java.newByte(aspose.slides.LineDashStyle.LargeDashDot));
let thirdSlice = series.getDataPoints().get_Item(2);
thirdSlice.getFormat().getFill().setFillType(java.newByte(aspose.slides.FillType.Solid));
thirdSlice.getFormat().getFill().getSolidFillColor().setColor(java.newInstanceSync("java.awt.Color", 255, 127, 80));
thirdSlice.getFormat().getLine().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
thirdSlice.getFormat().getLine().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "RED"));
thirdSlice.getFormat().getLine().setWidth(2.0);
thirdSlice.getFormat().getLine().setStyle(java.newByte(aspose.slides.LineStyle.ThinThin));
thirdSlice.getFormat().getLine().setDashStyle(java.newByte(aspose.slides.LineDashStyle.LargeDashDotDot));
let firstLabel = series.getDataPoints().get_Item(0).getLabel();
firstLabel.getDataLabelFormat().setShowValue(true);
let secondLabel = series.getDataPoints().get_Item(1).getLabel();
secondLabel.getDataLabelFormat().setShowValue(true);
secondLabel.getDataLabelFormat().setShowLegendKey(true);
secondLabel.getDataLabelFormat().setShowPercentage(true);
let thirdLabel = series.getDataPoints().get_Item(2).getLabel();
thirdLabel.getDataLabelFormat().setShowSeriesName(true);
thirdLabel.getDataLabelFormat().setShowPercentage(true);
series.getLabels().getDefaultDataLabelFormat().setShowLeaderLines(true);
chart.getChartData().getSeriesGroups().get_Item(0).setFirstSliceAngle(180);
presentation.save("PieChart.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Kết quả:
Để cải thiện khả năng đọc các nhãn bên ngoài biểu đồ tròn, xem Định dạng đường dẫn để xem ví dụ về cách định vị nhãn và tùy chỉnh màu, độ rộng, độ trong suốt và kiểu gạch đứt của các đường.
Tạo biểu đồ Đường
Biểu đồ đường (còn gọi là line graph) thích hợp nhất trong các trường hợp bạn muốn thể hiện sự thay đổi giá trị theo thời gian. Sử dụng biểu đồ đường, bạn có thể so sánh một lượng lớn dữ liệu cùng lúc, theo dõi các thay đổi và xu hướng theo thời gian, làm nổi bật các bất thường trong series dữ liệu, và hơn thế nữa.
Ví dụ này sử dụng addChart để tạo một biểu đồ đường với series và danh mục mặc định, sau đó lưu bản trình bày dưới dạng PPTX.
const aspose = { slides: require("aspose.slides.via.java") };
let presentation = new aspose.slides.Presentation();
try
{
let slide = presentation.getSlides().get_Item(0);
let lineChart = slide.getShapes().addChart(aspose.slides.ChartType.Line, 20, 20, 500, 300);
presentation.save("lineChart.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Theo mặc định, các điểm trên biểu đồ đường được nối bằng các đường thẳng liên tục. Nếu bạn muốn các điểm được nối bằng dấu gạch nối, gọi setDashStyle với giá trị từ LineDashStyle:
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 lineChart = slide.getShapes().addChart(aspose.slides.ChartType.Line, 20, 20, 500, 300);
for (let i = 0; i < lineChart.getChartData().getSeries().size(); i++)
{
let series = lineChart.getChartData().getSeries().get_Item(i);
series.getFormat().getLine().setDashStyle(java.newByte(aspose.slides.LineDashStyle.Dash));
}
}
finally
{
presentation.dispose();
}
Kết quả:
Tạo biểu đồ Cây
Biểu đồ cây thích hợp nhất cho dữ liệu bán hàng khi bạn muốn hiển thị kích thước tương đối của các danh mục dữ liệu và nhanh chóng thu hút sự chú ý đến những mục đóng góp lớn trong mỗi danh mục.
Ví dụ này tạo một biểu đồ cây với tám lá được nhóm thành bốn nhánh và hai cành. Phương thức setGroupingItem gán các nhánh ở mức nhóm 1 và các cành ở mức 2. Giá trị xác định kích thước hình chữ nhật tương đối, trong khi nhãn danh mục và nhãn cha chồng chéo xác định thứ tự phân cấp.
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.Treemap, 20, 20, 500, 300);
chart.getChartData().getCategories().clear();
chart.getChartData().getSeries().clear();
let workbook = chart.getChartData().getChartDataWorkbook();
workbook.clear(0);
// Nhánh 1
let categoryCell = workbook.getCell(0, "C1", "Leaf1");
let leaf = chart.getChartData().getCategories().add(categoryCell);
leaf.getGroupingLevels().setGroupingItem(1, "Stem1");
leaf.getGroupingLevels().setGroupingItem(2, "Branch1");
categoryCell = workbook.getCell(0, "C2", "Leaf2");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, "C3", "Leaf3");
leaf = chart.getChartData().getCategories().add(categoryCell);
leaf.getGroupingLevels().setGroupingItem(1, "Stem2");
categoryCell = workbook.getCell(0, "C4", "Leaf4");
chart.getChartData().getCategories().add(categoryCell);
// Nhánh 2
categoryCell = workbook.getCell(0, "C5", "Leaf5");
leaf = chart.getChartData().getCategories().add(categoryCell);
leaf.getGroupingLevels().setGroupingItem(1, "Stem3");
leaf.getGroupingLevels().setGroupingItem(2, "Branch2");
categoryCell = workbook.getCell(0, "C6", "Leaf6");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, "C7", "Leaf7");
leaf = chart.getChartData().getCategories().add(categoryCell);
leaf.getGroupingLevels().setGroupingItem(1, "Stem4");
categoryCell = workbook.getCell(0, "C8", "Leaf8");
chart.getChartData().getCategories().add(categoryCell);
let series = chart.getChartData().getSeries().add(aspose.slides.ChartType.Treemap);
series.getLabels().getDefaultDataLabelFormat().setShowCategoryName(true);
let valueCell = workbook.getCell(0, "D1", 4);
series.getDataPoints().addDataPointForTreemapSeries(valueCell);
valueCell = workbook.getCell(0, "D2", 5);
series.getDataPoints().addDataPointForTreemapSeries(valueCell);
valueCell = workbook.getCell(0, "D3", 3);
series.getDataPoints().addDataPointForTreemapSeries(valueCell);
valueCell = workbook.getCell(0, "D4", 6);
series.getDataPoints().addDataPointForTreemapSeries(valueCell);
valueCell = workbook.getCell(0, "D5", 9);
series.getDataPoints().addDataPointForTreemapSeries(valueCell);
valueCell = workbook.getCell(0, "D6", 9);
series.getDataPoints().addDataPointForTreemapSeries(valueCell);
valueCell = workbook.getCell(0, "D7", 4);
series.getDataPoints().addDataPointForTreemapSeries(valueCell);
valueCell = workbook.getCell(0, "D8", 3);
series.getDataPoints().addDataPointForTreemapSeries(valueCell);
series.setParentLabelLayout(aspose.slides.ParentLabelLayoutType.Overlapping);
presentation.save("Treemap.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Kết quả:
Tạo biểu đồ Thác nước
Biểu đồ thác nước hiển thị cách các biến động dương và âm đóng góp vào giá trị cuối cùng. Ví dụ, một bản phân tích lợi nhuận có thể bắt đầu bằng doanh thu, trừ chi phí, và cộng thu nhập khác. Các cột biến đổi nổi giữa giá trị chạy trước và giá trị chạy mới, trong khi các cột tổng mở rộng từ 0 tới giá trị đã tích lũy.
Bảng dưới đây sử dụng các khoản tiền tính bằng nghìn đô la Mỹ:
| Danh mục | Giá trị trong Workbook | Loại cột |
|---|---|---|
| Doanh thu | 1000 | Tăng |
| Chi phí bán hàng | -400 | Giảm |
| Lợi nhuận gộp | 600 | Tổng trung gian |
| Chi phí vận hành | -200 | Giảm |
| Thu nhập khác | 50 | Tăng |
| Lợi nhuận ròng | 450 | Tổng cuối cùng |
Để đánh dấu một điểm là tổng trung gian hoặc tổng cuối cùng, gọi phương thức setSetAsTotal của nó với true. Cung cấp số tiền đã tích lũy thực tế trong ô workbook của điểm đó: 600 cho lợi nhuận gộp (1000 - 400) và 450 cho lợi nhuận ròng (600 - 200 + 50). Phương thức này chỉ đánh dấu cột là tổng; nó không tính toán hoặc điền giá trị ô. Không sử dụng 0 làm chỗ giữ chỗ hoặc cung cấp thay đổi khác cho một điểm tổng. Một cột tổng hiển thị giá trị đã tích lũy mà không cộng lại vào giá trị chạy.
Ví dụ JavaScript đầy đủ này tạo biểu đồ bằng thành viên Waterfall của ChartType, xóa dữ liệu mặc định và điền workbook được nhúng. Chỉ mục worksheet 0 chọn worksheet đầu tiên; cột A chứa tên danh mục và cột B chứa các giá trị. Mỗi ô giá trị được thêm bằng addDataPointForWaterfallSeries. Các chỉ mục điểm dựa trên zero 2 và 5 xác định tổng trung gian và tổng cuối cùng. Gọi setShowValue với true để hiển thị số tiền trên các cột. Không cần bản trình bày hoặc workbook đầu vào.
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.Waterfall, 20, 20, 680, 200);
chart.setTitle(true);
chart.getChartTitle().addTextFrameForOverriding("Profit breakdown (USD thousands)");
chart.getChartTitle().setOverlay(false);
chart.setLegend(false);
chart.getChartData().getSeries().clear();
chart.getChartData().getCategories().clear();
let workbook = chart.getChartData().getChartDataWorkbook();
let worksheetIndex = 0;
workbook.clear(worksheetIndex);
let seriesNameCell = workbook.getCell(worksheetIndex, 0, 1, "Profit");
let series = chart.getChartData().getSeries().add(seriesNameCell, aspose.slides.ChartType.Waterfall);
let categories = [ "Revenue", "Cost of sales", "Gross profit", "Operating expenses", "Other income", "Net profit" ];
let values = [ 1000, -400, 600, -200, 50, 450 ];
for (let i = 0; i < categories.length; i++)
{
let categoryCell = workbook.getCell(worksheetIndex, i + 1, 0, categories[i]);
chart.getChartData().getCategories().add(categoryCell);
let valueCell = workbook.getCell(worksheetIndex, i + 1, 1, values[i]);
series.getDataPoints().addDataPointForWaterfallSeries(valueCell);
}
// Các điểm thứ ba và thứ sáu biểu thị tổng, không phải các thay đổi bổ sung.
series.getDataPoints().get_Item(2).setSetAsTotal(true);
series.getDataPoints().get_Item(5).setSetAsTotal(true);
series.setShowConnectorLines(true);
series.getLabels().getDefaultDataLabelFormat().setShowValue(true);
presentation.save("WaterfallChart.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Gọi phương thức cấp series setShowConnectorLines với true để hiển thị các đường nối các cột liên tiếp và giúp theo dõi giá trị chạy dễ dàng hơn. Để ẩn các đường này, thay thế lời gọi phương thức trong ví dụ bằng series.setShowConnectorLines(false); trước khi lưu. Thay đổi này chỉ ảnh hưởng đến tính hiển thị của đường, không thay đổi dữ liệu hay các tổng.
Bản trình bày đã lưu hiển thị lợi nhuận gộp 600 và lợi nhuận ròng 450, với cả hai tổng được vẽ từ 0:
Tạo biểu đồ Cổ phiếu
Biểu đồ cổ phiếu được dùng để hiển thị dữ liệu tài chính như giá mở cửa, cao nhất, thấp nhất và đóng cửa, giúp phân tích xu hướng thị trường và biến động. Chúng cung cấp những hiểu biết quan trọng về hiệu suất cổ phiếu, hỗ trợ nhà đầu tư và phân tích viên đưa ra quyết định sáng suốt.
Ví dụ này tạo một biểu đồ Open‑High‑Low‑Close với bốn series theo thứ tự và ba danh mục. Phương thức setUpDownBars bật thanh lên/xuống, và getHiLowLinesFormat điều khiển các đường high‑low hiển thị dải giá, trong khi các đường series riêng lẻ và lưới ngang phụ được ẩn.
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.OpenHighLowClose, 20, 20, 500, 300, false);
let workbook = chart.getChartData().getChartDataWorkbook();
let categoryCell = workbook.getCell(0, 1, 0, "A");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, 2, 0, "B");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, 3, 0, "C");
chart.getChartData().getCategories().add(categoryCell);
let seriesNameCell = workbook.getCell(0, 0, 1, "Open");
chart.getChartData().getSeries().add(seriesNameCell, aspose.slides.ChartType.OpenHighLowClose);
seriesNameCell = workbook.getCell(0, 0, 2, "High");
chart.getChartData().getSeries().add(seriesNameCell, aspose.slides.ChartType.OpenHighLowClose);
seriesNameCell = workbook.getCell(0, 0, 3, "Low");
chart.getChartData().getSeries().add(seriesNameCell, aspose.slides.ChartType.OpenHighLowClose);
seriesNameCell = workbook.getCell(0, 0, 4, "Close");
chart.getChartData().getSeries().add(seriesNameCell, aspose.slides.ChartType.OpenHighLowClose);
let series = chart.getChartData().getSeries().get_Item(0);
let valueCell = workbook.getCell(0, 1, 1, 72);
series.getDataPoints().addDataPointForStockSeries(valueCell);
valueCell = workbook.getCell(0, 2, 1, 25);
series.getDataPoints().addDataPointForStockSeries(valueCell);
valueCell = workbook.getCell(0, 3, 1, 38);
series.getDataPoints().addDataPointForStockSeries(valueCell);
series = chart.getChartData().getSeries().get_Item(1);
valueCell = workbook.getCell(0, 1, 2, 172);
series.getDataPoints().addDataPointForStockSeries(valueCell);
valueCell = workbook.getCell(0, 2, 2, 57);
series.getDataPoints().addDataPointForStockSeries(valueCell);
valueCell = workbook.getCell(0, 3, 2, 57);
series.getDataPoints().addDataPointForStockSeries(valueCell);
series = chart.getChartData().getSeries().get_Item(2);
valueCell = workbook.getCell(0, 1, 3, 12);
series.getDataPoints().addDataPointForStockSeries(valueCell);
valueCell = workbook.getCell(0, 2, 3, 12);
series.getDataPoints().addDataPointForStockSeries(valueCell);
valueCell = workbook.getCell(0, 3, 3, 13);
series.getDataPoints().addDataPointForStockSeries(valueCell);
series = chart.getChartData().getSeries().get_Item(3);
valueCell = workbook.getCell(0, 1, 4, 25);
series.getDataPoints().addDataPointForStockSeries(valueCell);
valueCell = workbook.getCell(0, 2, 4, 38);
series.getDataPoints().addDataPointForStockSeries(valueCell);
valueCell = workbook.getCell(0, 3, 4, 50);
series.getDataPoints().addDataPointForStockSeries(valueCell);
chart.getChartData().getSeriesGroups().get_Item(0).getUpDownBars().setUpDownBars(true);
chart.getChartData().getSeriesGroups().get_Item(0).getHiLowLinesFormat().getLine().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
for (let i = 0; i < chart.getChartData().getSeries().size(); i++)
{
let stockSeries = chart.getChartData().getSeries().get_Item(i);
stockSeries.getFormat().getLine().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
}
chart.getAxes().getVerticalAxis().getMinorGridLinesFormat().getLine().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
presentation.save("Stock-chart.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Kết quả:
Tạo biểu đồ Hộp và Râu
Biểu đồ hộp và râu được dùng để hiển thị phân phối dữ liệu bằng cách tóm tắt các chỉ số thống kê chính, như trung vị, các phần tư và các điểm ngoại lệ tiềm năng. Chúng đặc biệt hữu ích trong phân tích dữ liệu khám phá và các nghiên cứu thống kê để nhanh chóng hiểu biến thiên dữ liệu và xác định bất thường.
Ví dụ này tạo một biểu đồ hộp và râu từ sáu giá trị. Phương thức setQuartileMethod chọn phương pháp tính phần tư độc quyền. Ví dụ còn bật các đường trung bình, dấu trung bình, các điểm nội và các điểm ngoại lệ.
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.BoxAndWhisker, 20, 20, 500, 300);
chart.getChartData().getCategories().clear();
chart.getChartData().getSeries().clear();
let workbook = chart.getChartData().getChartDataWorkbook();
workbook.clear(0);
let categoryCell = workbook.getCell(0, "A1", "Category 1");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, "A2", "Category 2");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, "A3", "Category 3");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, "A4", "Category 4");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, "A5", "Category 5");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, "A6", "Category 6");
chart.getChartData().getCategories().add(categoryCell);
let series = chart.getChartData().getSeries().add(aspose.slides.ChartType.BoxAndWhisker);
series.setQuartileMethod(aspose.slides.QuartileMethodType.Exclusive);
series.setShowMeanLine(true);
series.setShowMeanMarkers(true);
series.setShowInnerPoints(true);
series.setShowOutlierPoints(true);
let valueCell = workbook.getCell(0, "B1", 15);
series.getDataPoints().addDataPointForBoxAndWhiskerSeries(valueCell);
valueCell = workbook.getCell(0, "B2", 41);
series.getDataPoints().addDataPointForBoxAndWhiskerSeries(valueCell);
valueCell = workbook.getCell(0, "B3", 16);
series.getDataPoints().addDataPointForBoxAndWhiskerSeries(valueCell);
valueCell = workbook.getCell(0, "B4", 10);
series.getDataPoints().addDataPointForBoxAndWhiskerSeries(valueCell);
valueCell = workbook.getCell(0, "B5", 23);
series.getDataPoints().addDataPointForBoxAndWhiskerSeries(valueCell);
valueCell = workbook.getCell(0, "B6", 16);
series.getDataPoints().addDataPointForBoxAndWhiskerSeries(valueCell);
presentation.save("BoxAndWhisker.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Tạo biểu đồ Phễu
Biểu đồ phễu được dùng để hình dung các quy trình có các giai đoạn tuần tự, trong đó khối lượng dữ liệu giảm dần khi tiến từ bước này sang bước tiếp theo. Chúng đặc biệt hữu ích cho việc phân tích tỷ lệ chuyển đổi, xác định các nút thắt và theo dõi hiệu quả của quy trình bán hàng hoặc tiếp thị.
Ví dụ này sử dụng addChart để thêm một biểu đồ phễu vào slide đầu tiên của một bản trình bày hiện có. Nó thay thế dữ liệu mặc định bằng sáu danh mục và các giá trị từ 50 đến 500, sau đó lưu bản trình bày đã cập nhật. Bản trình bày đầu vào phải chứa ít nhất một slide.
const aspose = { slides: require("aspose.slides.via.java") };
let presentation = new aspose.slides.Presentation("test.pptx");
try
{
let slide = presentation.getSlides().get_Item(0);
let chart = slide.getShapes().addChart(aspose.slides.ChartType.Funnel, 50, 50, 500, 400);
chart.getChartData().getCategories().clear();
chart.getChartData().getSeries().clear();
let workbook = chart.getChartData().getChartDataWorkbook();
workbook.clear(0);
let categoryCell = workbook.getCell(0, "A1", "Category 1");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, "A2", "Category 2");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, "A3", "Category 3");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, "A4", "Category 4");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, "A5", "Category 5");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, "A6", "Category 6");
chart.getChartData().getCategories().add(categoryCell);
let series = chart.getChartData().getSeries().add(aspose.slides.ChartType.Funnel);
let valueCell = workbook.getCell(0, "B1", 50);
series.getDataPoints().addDataPointForFunnelSeries(valueCell);
valueCell = workbook.getCell(0, "B2", 100);
series.getDataPoints().addDataPointForFunnelSeries(valueCell);
valueCell = workbook.getCell(0, "B3", 200);
series.getDataPoints().addDataPointForFunnelSeries(valueCell);
valueCell = workbook.getCell(0, "B4", 300);
series.getDataPoints().addDataPointForFunnelSeries(valueCell);
valueCell = workbook.getCell(0, "B5", 400);
series.getDataPoints().addDataPointForFunnelSeries(valueCell);
valueCell = workbook.getCell(0, "B6", 500);
series.getDataPoints().addDataPointForFunnelSeries(valueCell);
presentation.save("Funnel.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Kết quả:
Tạo biểu đồ Sunburst
Biểu đồ Sunburst được dùng để hình dung dữ liệu phân cấp, hiển thị các mức dưới dạng các vòng đồng tâm. Chúng giúp minh họa các quan hệ phần‑với‑toàn bộ và lý tưởng cho việc biểu diễn các danh mục và danh mục con lồng nhau một cách rõ ràng, gọn gàng.
Ví dụ này tạo một biểu đồ Sunburst với tám lá được nhóm thành bốn nhánh và hai cành. Phương thức setGroupingItem gán các nhánh ở mức nhóm 1 và các cành ở mức 2. Nhãn danh mục xác định các phân đoạn, và các giá trị quyết định kích thước tương đối của chúng.
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.Sunburst, 20, 20, 500, 300);
chart.getChartData().getCategories().clear();
chart.getChartData().getSeries().clear();
let workbook = chart.getChartData().getChartDataWorkbook();
workbook.clear(0);
// Nhánh 1
let categoryCell = workbook.getCell(0, "C1", "Leaf1");
let leaf = chart.getChartData().getCategories().add(categoryCell);
leaf.getGroupingLevels().setGroupingItem(1, "Stem1");
leaf.getGroupingLevels().setGroupingItem(2, "Branch1");
categoryCell = workbook.getCell(0, "C2", "Leaf2");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, "C3", "Leaf3");
leaf = chart.getChartData().getCategories().add(categoryCell);
leaf.getGroupingLevels().setGroupingItem(1, "Stem2");
categoryCell = workbook.getCell(0, "C4", "Leaf4");
chart.getChartData().getCategories().add(categoryCell);
// Nhánh 2
categoryCell = workbook.getCell(0, "C5", "Leaf5");
leaf = chart.getChartData().getCategories().add(categoryCell);
leaf.getGroupingLevels().setGroupingItem(1, "Stem3");
leaf.getGroupingLevels().setGroupingItem(2, "Branch2");
categoryCell = workbook.getCell(0, "C6", "Leaf6");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, "C7", "Leaf7");
leaf = chart.getChartData().getCategories().add(categoryCell);
leaf.getGroupingLevels().setGroupingItem(1, "Stem4");
categoryCell = workbook.getCell(0, "C8", "Leaf8");
chart.getChartData().getCategories().add(categoryCell);
let series = chart.getChartData().getSeries().add(aspose.slides.ChartType.Sunburst);
series.getLabels().getDefaultDataLabelFormat().setShowCategoryName(true);
let valueCell = workbook.getCell(0, "D1", 4);
series.getDataPoints().addDataPointForSunburstSeries(valueCell);
valueCell = workbook.getCell(0, "D2", 5);
series.getDataPoints().addDataPointForSunburstSeries(valueCell);
valueCell = workbook.getCell(0, "D3", 3);
series.getDataPoints().addDataPointForSunburstSeries(valueCell);
valueCell = workbook.getCell(0, "D4", 6);
series.getDataPoints().addDataPointForSunburstSeries(valueCell);
valueCell = workbook.getCell(0, "D5", 9);
series.getDataPoints().addDataPointForSunburstSeries(valueCell);
valueCell = workbook.getCell(0, "D6", 9);
series.getDataPoints().addDataPointForSunburstSeries(valueCell);
valueCell = workbook.getCell(0, "D7", 4);
series.getDataPoints().addDataPointForSunburstSeries(valueCell);
valueCell = workbook.getCell(0, "D8", 3);
series.getDataPoints().addDataPointForSunburstSeries(valueCell);
presentation.save("Sunburst.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Kết quả:
Tạo biểu đồ Histogram
Biểu đồ histogram cho thấy cách các giá trị số được phân phối qua các khoảng (bins). Đối với các báo cáo hàng tháng về thời gian xử lý đơn hàng, hãy sử dụng cùng một độ rộng bin và ngưỡng để giữ các khoảng nhất quán và làm cho các phân phối dễ so sánh hơn.
Gọi setAggregationType trên trục ngang với chế độ từ AxisAggregationType. setBinWidth chỉ áp dụng cho ByBinWidth; setNumberOfBins chỉ áp dụng cho ByNumberOfBins. Sử dụng Automatic để cho phép biểu đồ tự chọn các bin.
Sử dụng Độ rộng Bin cố định
Ví dụ này nhóm thời gian xử lý vào các khoảng 10 phút, với các bin riêng cho thời gian ≤ 10 phút và > 40 phút. Bật các bin này bằng setUnderflowBin và setOverflowBin. Khi cung cấp các ngưỡng cụ thể thông qua setUnderflowBin và setOverflowBin, gọi setAutomaticUnderflowBin và setAutomaticOverflowBin với false.
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.Histogram, 20, 20, 680, 200);
chart.setLegend(false);
chart.setTitle(false);
chart.getChartData().getCategories().clear();
chart.getChartData().getSeries().clear();
let workbook = chart.getChartData().getChartDataWorkbook();
workbook.clear(0);
let series = chart.getChartData().getSeries().add(aspose.slides.ChartType.Histogram);
let values = [ 5, 10, 10, 11, 15, 20, 20, 21, 25, 30, 30, 31, 35, 40, 40, 41, 50 ];
for (let i = 0; i < values.length; i++)
{
let valueCell = workbook.getCell(0, i, 0, values[i]);
series.getDataPoints().addDataPointForHistogramSeries(valueCell);
}
let axis = chart.getAxes().getHorizontalAxis();
axis.setAggregationType(aspose.slides.AxisAggregationType.ByBinWidth);
axis.setBinWidth(10);
axis.setUnderflowBin(true);
axis.setAutomaticUnderflowBin(false);
axis.setUnderflowBin(10);
axis.setOverflowBin(true);
axis.setAutomaticOverflowBin(false);
axis.setOverflowBin(40);
presentation.save("Histogram-bin-width.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Bản trình bày hiển thị trong PowerPoint cho thấy số lượng bin là 3, 4, 4, 4, và 2. Bin dưới bao gồm 5, 10, 10, vì vậy ngưỡng của nó là bao hàm. Bin trên bao gồm chỉ 41, 50, nên ngưỡng của nó là loại trừ; cả hai giá trị bằng 40 vẫn nằm trong khoảng trước. Các bin nội chứa các giá trị lớn hơn ranh giới dưới và nhỏ hơn hoặc bằng ranh giới trên.
Xác định Số lượng Bin
Đối với mức chi tiết cố định thay vì các khoảng cố định, yêu cầu năm bin cho cùng dữ liệu. Ví dụ này để bin dưới và bin trên bị tắt. Biểu đồ xác định độ rộng từ phạm vi dữ liệu, vì vậy các ranh giới có thể thay đổi giữa các báo cáo.
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.Histogram, 20, 20, 680, 200);
chart.setLegend(false);
chart.setTitle(false);
chart.getChartData().getCategories().clear();
chart.getChartData().getSeries().clear();
let workbook = chart.getChartData().getChartDataWorkbook();
workbook.clear(0);
let series = chart.getChartData().getSeries().add(aspose.slides.ChartType.Histogram);
let values = [ 5, 10, 10, 11, 15, 20, 20, 21, 25, 30, 30, 31, 35, 40, 40, 41, 50 ];
for (let i = 0; i < values.length; i++)
{
let valueCell = workbook.getCell(0, i, 0, values[i]);
series.getDataPoints().addDataPointForHistogramSeries(valueCell);
}
let axis = chart.getAxes().getHorizontalAxis();
axis.setAggregationType(aspose.slides.AxisAggregationType.ByNumberOfBins);
axis.setNumberOfBins(5);
presentation.save("Histogram-bin-count.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Năm bin có số lượng 4, 4, 4, 4, và 1. So sánh phân phối này với kết quả độ rộng cố định ở trên: các giá trị đầu vào giống nhau, nhưng các ranh giới khác nhau.
Tạo biểu đồ Radar
Biểu đồ radar được dùng để hiển thị dữ liệu đa biến trong một định dạng hai chiều, cho phép so sánh dễ dàng nhiều biến cùng lúc. Chúng đặc biệt hữu ích để xác định các mẫu, điểm mạnh và điểm yếu trên nhiều chỉ số hiệu suất hoặc thuộc tính.
Ví dụ này sử dụng addChart để tạo một biểu đồ radar với series và danh mục mặc định, sau đó lưu bản trình bày dưới dạng PPTX.
const aspose = { slides: require("aspose.slides.via.java") };
let presentation = new aspose.slides.Presentation();
try
{
let slide = presentation.getSlides().get_Item(0);
slide.getShapes().addChart(aspose.slides.ChartType.Radar, 20, 20, 500, 300);
presentation.save("Radar-chart.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Kết quả:
Tạo biểu đồ Đa danh mục
Biểu đồ đa danh mục được dùng để hiển thị dữ liệu có hơn một nhóm danh mục, cho phép bạn so sánh giá trị qua nhiều chiều cùng lúc. Chúng đặc biệt hữu ích khi bạn cần phân tích xu hướng và mối quan hệ trong các bộ dữ liệu phức tạp, đa lớp.
Ví dụ này tạo một biểu đồ cột nhóm với tám danh mục được sắp xếp thành bốn cặp. Phương thức setGroupingItem cung cấp cho mỗi cặp một nhãn chung ở mức nhóm 1, tạo ra một trục danh mục với cả nhãn riêng lẻ và nhóm.
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, 20, 20, 500, 300);
chart.getChartData().getSeries().clear();
chart.getChartData().getCategories().clear();
let workbook = chart.getChartData().getChartDataWorkbook();
workbook.clear(0);
let worksheetIndex = 0;
let categoryCell = workbook.getCell(0, "c2", "A");
let category = chart.getChartData().getCategories().add(categoryCell);
category.getGroupingLevels().setGroupingItem(1, "Group1");
categoryCell = workbook.getCell(0, "c3", "B");
category = chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, "c4", "C");
category = chart.getChartData().getCategories().add(categoryCell);
category.getGroupingLevels().setGroupingItem(1, "Group2");
categoryCell = workbook.getCell(0, "c5", "D");
category = chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, "c6", "E");
category = chart.getChartData().getCategories().add(categoryCell);
category.getGroupingLevels().setGroupingItem(1, "Group3");
categoryCell = workbook.getCell(0, "c7", "F");
category = chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(0, "c8", "G");
category = chart.getChartData().getCategories().add(categoryCell);
category.getGroupingLevels().setGroupingItem(1, "Group4");
categoryCell = workbook.getCell(0, "c9", "H");
category = chart.getChartData().getCategories().add(categoryCell);
let seriesNameCell = workbook.getCell(0, "D1", "Series 1");
let series = chart.getChartData().getSeries().add(seriesNameCell, aspose.slides.ChartType.ClusteredColumn);
let valueCell = workbook.getCell(worksheetIndex, "D2", 10);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, "D3", 20);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, "D4", 30);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, "D5", 40);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, "D6", 50);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, "D7", 60);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, "D8", 70);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, "D9", 80);
series.getDataPoints().addDataPointForBarSeries(valueCell);
presentation.save("AsposeChart.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Kết quả:
Tạo biểu đồ Bản đồ
Biểu đồ bản đồ được dùng để hình dung dữ liệu địa lý bằng cách gán thông tin vào các vị trí cụ thể như quốc gia, bang hoặc thành phố. Chúng rất hữu ích để phân tích xu hướng khu vực, dữ liệu nhân khẩu học và phân bố không gian một cách rõ ràng, hấp dẫn.
Ví dụ này sử dụng addChart để tạo một biểu đồ bản đồ với dữ liệu địa lý mặc định và lưu để xem trong PowerPoint.
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.Map, 20, 20, 500, 300);
presentation.save("mapChart.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Kết quả:
Note
Hình ảnh trên cho thấy bản trình bày đã lưu mở trong PowerPoint. Aspose.Slides ghi biểu đồ bản đồ và dữ liệu của nó đúng, nhưng nó không tự vẽ biểu đồ bản đồ: khi một slide chứa biểu đồ này được render thành ảnh hoặc chuyển đổi sang PDF hoặc SVG, khu vực biểu đồ sẽ trắng. Các hình khác trên cùng slide không bị ảnh hưởng.Tạo biểu đồ Kết hợp
Biểu đồ kết hợp (hoặc combo chart) kết hợp hai hoặc nhiều loại biểu đồ trong một đồ thị. Biểu đồ này cho phép bạn làm nổi bật, so sánh hoặc kiểm tra sự khác biệt giữa hai hoặc nhiều tập dữ liệu, giúp xác định mối quan hệ giữa chúng.
Ví dụ này kết hợp hai series cột nhóm với một series đường qua bốn danh mục. Các cột sử dụng trục dọc chính, trong khi setPlotOnSecondAxis đặt đường trên trục dọc phụ ở bên phải. Các hàm trợ giúp cấu hình tiêu đề, legend, nhãn trục và lưới.
const aspose = { slides: require("aspose.slides.via.java") };
const java = require("java");
function createComboChart()
{
let presentation = new aspose.slides.Presentation();
try
{
let chart = createChartWithFirstSeries(presentation.getSlides().get_Item(0));
addSecondSeriesToChart(chart);
addThirdSeriesToChart(chart);
setPrimaryAxesFormat(chart);
setSecondaryAxesFormat(chart);
presentation.save("combo-chart.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
}
function createChartWithFirstSeries(slide)
{
let chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 600, 400);
chart.setTitle(true);
chart.getChartTitle().addTextFrameForOverriding("Chart Title");
chart.getChartTitle().setOverlay(false);
let portionFormat = chart.getChartTitle().getTextFrameForOverriding().getParagraphs().get_Item(0).getParagraphFormat().getDefaultPortionFormat();
portionFormat.setFontBold(java.newByte(aspose.slides.NullableBool.False));
portionFormat.setFontHeight(18);
chart.getLegend().setPosition(aspose.slides.LegendPositionType.Bottom);
chart.getLegend().getTextFormat().getPortionFormat().setFontHeight(12);
chart.getChartData().getSeries().clear();
chart.getChartData().getCategories().clear();
let workbook = chart.getChartData().getChartDataWorkbook();
let worksheetIndex = 0;
let categoryCell = workbook.getCell(worksheetIndex, 1, 0, "Category 1");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(worksheetIndex, 2, 0, "Category 2");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(worksheetIndex, 3, 0, "Category 3");
chart.getChartData().getCategories().add(categoryCell);
categoryCell = workbook.getCell(worksheetIndex, 4, 0, "Category 4");
chart.getChartData().getCategories().add(categoryCell);
let seriesNameCell = workbook.getCell(worksheetIndex, 0, 1, "Series 1");
let series = chart.getChartData().getSeries().add(seriesNameCell, chart.getType());
series.getParentSeriesGroup().setOverlap(java.newByte(-25));
series.getParentSeriesGroup().setGapWidth(220);
let valueCell = workbook.getCell(worksheetIndex, 1, 1, 4.3);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, 2, 1, 2.5);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, 3, 1, 3.5);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, 4, 1, 4.5);
series.getDataPoints().addDataPointForBarSeries(valueCell);
return chart;
}
function addSecondSeriesToChart(chart)
{
let workbook = chart.getChartData().getChartDataWorkbook();
let worksheetIndex = 0;
let seriesNameCell = workbook.getCell(worksheetIndex, 0, 2, "Series 2");
let series = chart.getChartData().getSeries().add(seriesNameCell, aspose.slides.ChartType.ClusteredColumn);
series.getParentSeriesGroup().setOverlap(java.newByte(-25));
series.getParentSeriesGroup().setGapWidth(220);
let valueCell = workbook.getCell(worksheetIndex, 1, 2, 2.4);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, 2, 2, 4.4);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, 3, 2, 1.8);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, 4, 2, 2.8);
series.getDataPoints().addDataPointForBarSeries(valueCell);
}
function addThirdSeriesToChart(chart)
{
let workbook = chart.getChartData().getChartDataWorkbook();
let worksheetIndex = 0;
let seriesNameCell = workbook.getCell(worksheetIndex, 0, 3, "Series 3");
let series = chart.getChartData().getSeries().add(seriesNameCell, aspose.slides.ChartType.Line);
let valueCell = workbook.getCell(worksheetIndex, 1, 3, 2.0);
series.getDataPoints().addDataPointForLineSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, 2, 3, 2.0);
series.getDataPoints().addDataPointForLineSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, 3, 3, 3.0);
series.getDataPoints().addDataPointForLineSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, 4, 3, 5.0);
series.getDataPoints().addDataPointForLineSeries(valueCell);
series.setPlotOnSecondAxis(true);
}
function setPrimaryAxesFormat(chart)
{
let horizontalAxis = chart.getAxes().getHorizontalAxis();
horizontalAxis.getTextFormat().getPortionFormat().setFontHeight(12);
horizontalAxis.getFormat().getLine().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
setAxisTitle(horizontalAxis, "X Axis");
let verticalAxis = chart.getAxes().getVerticalAxis();
verticalAxis.getTextFormat().getPortionFormat().setFontHeight(12);
verticalAxis.getFormat().getLine().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
setAxisTitle(verticalAxis, "Y Axis 1");
let majorGridLinesFormat = verticalAxis.getMajorGridLinesFormat().getLine().getFillFormat();
majorGridLinesFormat.setFillType(java.newByte(aspose.slides.FillType.Solid));
majorGridLinesFormat.getSolidFillColor().setColor(java.newInstanceSync("java.awt.Color", 217, 217, 217));
}
function setSecondaryAxesFormat(chart)
{
let secondaryHorizontalAxis = chart.getAxes().getSecondaryHorizontalAxis();
secondaryHorizontalAxis.setPosition(aspose.slides.AxisPositionType.Bottom);
secondaryHorizontalAxis.setCrossType(aspose.slides.CrossesType.Maximum);
secondaryHorizontalAxis.setVisible(false);
secondaryHorizontalAxis.getMajorGridLinesFormat().getLine().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
secondaryHorizontalAxis.getMinorGridLinesFormat().getLine().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
let secondaryVerticalAxis = chart.getAxes().getSecondaryVerticalAxis();
secondaryVerticalAxis.setPosition(aspose.slides.AxisPositionType.Right);
secondaryVerticalAxis.getTextFormat().getPortionFormat().setFontHeight(12);
secondaryVerticalAxis.getFormat().getLine().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
secondaryVerticalAxis.getMajorGridLinesFormat().getLine().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
secondaryVerticalAxis.getMinorGridLinesFormat().getLine().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
setAxisTitle(secondaryVerticalAxis, "Y Axis 2");
}
function setAxisTitle(axis, axisTitle)
{
axis.setTitle(true);
axis.getTitle().setOverlay(false);
let titlePortionFormat = axis.getTitle().addTextFrameForOverriding(axisTitle).getParagraphs().get_Item(0).getParagraphFormat().getDefaultPortionFormat();
titlePortionFormat.setFontBold(java.newByte(aspose.slides.NullableBool.False));
titlePortionFormat.setFontHeight(12);
}
createComboChart();
Cập nhật Biểu đồ
Aspose.Slides cho Node.js qua Java cho phép bạn cập nhật các biểu đồ PowerPoint bằng cách sửa đổi dữ liệu biểu đồ, định dạng và kiểu dáng. Tính năng này đơn giản hoá quá trình giữ cho bản trình bày luôn cập nhật với nội dung động và đảm bảo các biểu đồ phản ánh chính xác dữ liệu hiện tại và tiêu chuẩn hình ảnh.
Ví dụ này cập nhật biểu đồ có tên “My chart” trên slide đầu tiên của một bản trình bày hiện có. Nó yêu cầu hai series cột với ba điểm dữ liệu mỗi series, với nhãn danh mục ở cột A và tên series ở hàng đầu tiên của worksheet đầu tiên. Ví dụ sử dụng getCell để thay đổi các ô workbook, cập nhật giá trị series, thêm một series thứ ba, và chuyển biểu đồ sang dạng clustered cylinders qua setType.
const aspose = { slides: require("aspose.slides.via.java") };
const java = require("java");
let chartName = "My chart";
let presentation = new aspose.slides.Presentation("ExistingChart.pptx");
try
{
let slide = presentation.getSlides().get_Item(0);
for (let i = 0; i < slide.getShapes().size(); i++)
{
let shape = slide.getShapes().get_Item(i);
if (java.instanceOf(shape, "com.aspose.slides.IChart") && chartName === shape.getName())
{
let chart = shape;
let worksheetIndex = 0;
let workbook = chart.getChartData().getChartDataWorkbook();
workbook.getCell(worksheetIndex, 1, 0, "Modified Category 1");
workbook.getCell(worksheetIndex, 2, 0, "Modified Category 2");
let series = chart.getChartData().getSeries().get_Item(0);
workbook.getCell(worksheetIndex, 0, 1, "New_Series 1");
series.getDataPoints().get_Item(0).getValue().setData(90);
series.getDataPoints().get_Item(1).getValue().setData(123);
series.getDataPoints().get_Item(2).getValue().setData(44);
series = chart.getChartData().getSeries().get_Item(1);
workbook.getCell(worksheetIndex, 0, 2, "New_Series 2");
series.getDataPoints().get_Item(0).getValue().setData(23);
series.getDataPoints().get_Item(1).getValue().setData(67);
series.getDataPoints().get_Item(2).getValue().setData(99);
let seriesNameCell = workbook.getCell(worksheetIndex, 0, 3, "Series 3");
series = chart.getChartData().getSeries().add(seriesNameCell, chart.getType());
let valueCell = workbook.getCell(worksheetIndex, 1, 3, 20);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, 2, 3, 50);
series.getDataPoints().addDataPointForBarSeries(valueCell);
valueCell = workbook.getCell(worksheetIndex, 3, 3, 30);
series.getDataPoints().addDataPointForBarSeries(valueCell);
chart.setType(aspose.slides.ChartType.ClusteredCylinder);
}
}
presentation.save("AsposeChartModified.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Đặt phạm vi Dữ liệu cho Biểu đồ
Để kiểm tra phạm vi đã được biểu đồ hiện có sử dụng, xem Retrieve a Chart’s Data Range.
Aspose.Slides cho Node.js qua Java cung cấp tính linh hoạt để xác định một phạm vi dữ liệu cụ thể từ worksheet làm nguồn cho dữ liệu biểu đồ của bạn. Điều này cho phép bạn ánh xạ trực tiếp một phần của worksheet vào biểu đồ, giúp kiểm soát các ô nào đóng góp vào series và danh mục của biểu đồ. Nhờ đó, bạn có thể dễ dàng cập nhật và đồng bộ biểu đồ với các thay đổi dữ liệu mới nhất trong worksheet, đảm bảo các bản trình bày PowerPoint của bạn phản ánh thông tin hiện tại và chính xác.
Ví dụ này sử dụng setRange để đặt nguồn dữ liệu của biểu đồ có tên “My chart” trên slide đầu tiên của một bản trình bày hiện có thành Sheet1!A1:B4. Workbook của biểu đồ phải chứa worksheet đó và một phạm vi đã được điền với tiêu đề series ở hàng đầu, nhãn danh mục ở cột A và ba giá trị ở cột B.
const aspose = { slides: require("aspose.slides.via.java") };
const java = require("java");
let chartName = "My chart";
let presentation = new aspose.slides.Presentation("ExistingChart.pptx");
try
{
let slide = presentation.getSlides().get_Item(0);
for (let i = 0; i < slide.getShapes().size(); i++)
{
let shape = slide.getShapes().get_Item(i);
if (java.instanceOf(shape, "com.aspose.slides.IChart") && chartName === shape.getName())
{
let chart = shape;
chart.getChartData().setRange("Sheet1!A1:B4");
}
}
presentation.save("SetDataRange.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Sử dụng Các Đánh dấu Mặc định trong Biểu đồ
Khi bạn sử dụng các đánh dấu mặc định trong biểu đồ, mỗi series biểu đồ sẽ tự động nhận một ký hiệu đánh dấu mặc định khác nhau.
Ví dụ này sử dụng addChart để tạo một biểu đồ với hai series đường và một legend. Các cài đặt đánh dấu truy cập thông qua getMarker giữ lại các ký hiệu đánh dấu được tự động gán. Series đầu tiên bao gồm một giá trị âm và một giá trị thiếu, được biểu diễn bằng null, trong khi series thứ hai có giá trị cho mọi danh mục.
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.LineWithMarkers, 10, 10, 400, 400);
chart.getChartData().getSeries().clear();
chart.getChartData().getCategories().clear();
let workbook = chart.getChartData().getChartDataWorkbook();
let seriesNameCell = workbook.getCell(0, 0, 1, "Series 1");
let series = chart.getChartData().getSeries().add(seriesNameCell, chart.getType());
let categoryCell = workbook.getCell(0, 1, 0, "C1");
chart.getChartData().getCategories().add(categoryCell);
let valueCell = workbook.getCell(0, 1, 1, 24);
series.getDataPoints().addDataPointForLineSeries(valueCell);
categoryCell = workbook.getCell(0, 2, 0, "C2");
chart.getChartData().getCategories().add(categoryCell);
valueCell = workbook.getCell(0, 2, 1, 23);
series.getDataPoints().addDataPointForLineSeries(valueCell);
categoryCell = workbook.getCell(0, 3, 0, "C3");
chart.getChartData().getCategories().add(categoryCell);
valueCell = workbook.getCell(0, 3, 1, -10);
series.getDataPoints().addDataPointForLineSeries(valueCell);
categoryCell = workbook.getCell(0, 4, 0, "C4");
chart.getChartData().getCategories().add(categoryCell);
valueCell = workbook.getCell(0, 4, 1, null);
series.getDataPoints().addDataPointForLineSeries(valueCell);
seriesNameCell = workbook.getCell(0, 0, 2, "Series 2");
let secondSeries = chart.getChartData().getSeries().add(seriesNameCell, chart.getType());
valueCell = workbook.getCell(0, 1, 2, 30);
secondSeries.getDataPoints().addDataPointForLineSeries(valueCell);
valueCell = workbook.getCell(0, 2, 2, 10);
secondSeries.getDataPoints().addDataPointForLineSeries(valueCell);
valueCell = workbook.getCell(0, 3, 2, 60);
secondSeries.getDataPoints().addDataPointForLineSeries(valueCell);
valueCell = workbook.getCell(0, 4, 2, 40);
secondSeries.getDataPoints().addDataPointForLineSeries(valueCell);
chart.setLegend(true);
chart.getLegend().setOverlay(false);
presentation.save("DefaultMarkersInChart.pptx", aspose.slides.SaveFormat.Pptx);
}
finally
{
presentation.dispose();
}
Câu hỏi thường gặp
Các loại biểu đồ nào được hỗ trợ bởi Aspose.Slides cho Node.js qua Java?
Aspose.Slides cho Node.js qua Java hỗ trợ một loạt các loại biểu đồ, bao gồm bar, line, pie, area, scatter, histogram, radar và nhiều loại khác. Sự linh hoạt này cho phép bạn chọn loại biểu đồ phù hợp nhất cho nhu cầu trực quan hóa dữ liệu của mình.
Làm thế nào để thêm một biểu đồ mới vào slide?
Để thêm một biểu đồ, trước tiên bạn tạo một thể hiện của lớp Presentation, lấy slide mong muốn bằng chỉ mục của nó, sau đó gọi phương thức để thêm biểu đồ, chỉ định loại biểu đồ và dữ liệu ban đầu. Quy trình này tích hợp biểu đồ trực tiếp vào bản trình bày của bạn.
Làm thế nào để cập nhật dữ liệu hiển thị trong biểu đồ?
Bạn có thể cập nhật dữ liệu của biểu đồ bằng cách truy cập workbook dữ liệu của nó (ChartDataWorkbook), xóa bất kỳ series và danh mục mặc định nào, sau đó thêm dữ liệu tùy chỉnh của bạn. Điều này cho phép bạn làm mới biểu đồ một cách lập trình để phản ánh dữ liệu mới nhất.
Có thể tùy chỉnh giao diện của biểu đồ không?
Có, Aspose.Slides cho Node.js qua Java cung cấp các tùy chọn tùy chỉnh phong phú. Bạn có thể thay đổi màu sắc, phông chữ, nhãn, legend và các yếu tố định dạng khác để điều chỉnh giao diện biểu đồ cho phù hợp với yêu cầu thiết kế cụ thể của mình.