Tùy chỉnh Trục Biểu Đồ trong Bài Trình Bày bằng JavaScript

Trang này nói về điều gì

Khám phá cách sử dụng JavaScript với Aspose.Slides cho Node.js qua Java để tùy chỉnh trục biểu đồ trong các bài trình bày PowerPoint cho báo cáo và trực quan hoá.

Tổng quan

Bài viết này giải thích cách tùy chỉnh trục biểu đồ với Aspose.Slides cho Node.js thông qua Java. Nó bao gồm các giá trị trục được tính toán, việc hoán đổi hàng và cột của biểu đồ, hiển thị trục, khoảng cách nhãn danh mục và đánh dấu tick, danh mục ngày và định dạng, xoay tiêu đề, vị trí trục và đơn vị hiển thị.

Lấy các giá trị tối đa trên trục dọc trong biểu đồ

Tạo một Bản trình bày và thêm một biểu đồ vùng với dữ liệu mặc định. Gọi validateChartLayout trước khi đọc các giá trị trục đã tính để bố cục biểu đồ được cập nhật.

Đọc getActualMaxValue và getActualMinValue cho giới hạn trục, và getActualMajorUnit và getActualMinorUnit cho khoảng cách tick. getActualMajorUnitScale và getActualMinorUnitScale cung cấp các thang thời gian, liên quan đến trục ngày. Ví dụ lưu các giá trị này vào các biến cục bộ và lưu biểu đồ.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.Area, 100, 100, 500, 350);
    chart.validateChartLayout();

    var maxValue = chart.getAxes().getVerticalAxis().getActualMaxValue();
    var minValue = chart.getAxes().getVerticalAxis().getActualMinValue();

    var majorUnit = chart.getAxes().getVerticalAxis().getActualMajorUnit();
    var minorUnit = chart.getAxes().getVerticalAxis().getActualMinorUnit();

    var majorUnitScale = chart.getAxes().getVerticalAxis().getActualMajorUnitScale();
    var minorUnitScale = chart.getAxes().getVerticalAxis().getActualMinorUnitScale();

    presentation.save("AxisValues_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Hoán đổi Dữ liệu giữa các Trục

Use switchRowColumn để hoán đổi vai trò của series và category trong dữ liệu biểu đồ. Mỗi category cũ trở thành một series, và mỗi series cũ trở thành một category. Điều này thay đổi cách nhóm dữ liệu; nó không hoán đổi các trục ngang và dọc. Ví dụ sử dụng setRange để liên kết dữ liệu mặc định tới Sheet1!A1:D5, bao gồm hàng tiêu đề và cột category, trước khi hoán đổi hàng và cột. Nó lưu một biểu đồ với bốn series và ba category.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 100, 100, 400, 300);
    chart.getChartData().setRange("Sheet1!A1:D5");
    chart.getChartData().switchRowColumn();

    presentation.save("SwitchChartRowColumns_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Ẩn Trục Dọc cho Biểu Đồ Đường

Gọi setVisible với false trên trục dọc để ẩn nó. Ví dụ tạo một biểu đồ đường với dữ liệu mặc định và lưu nó với trục dọc bị ẩn.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.Line, 100, 100, 400, 300);
    chart.getAxes().getVerticalAxis().setVisible(false);

    presentation.save("HiddenVerticalAxis.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Ẩn Trục Ngang cho Biểu Đồ Đường

Gọi setVisible với false trên trục ngang để ẩn nó. Ví dụ tạo một biểu đồ đường với dữ liệu mặc định và lưu nó với trục ngang bị ẩn.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.Line, 100, 100, 400, 300);
    chart.getAxes().getHorizontalAxis().setVisible(false);

    presentation.save("HiddenHorizontalAxis.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Thay Đổi Trục Danh Mục

Sử dụng setCategoryAxisType để chọn trục danh mục ngày hoặc văn bản. Ví dụ này yêu cầu ExistingChart.pptx, với một biểu đồ là shape đầu tiên trên slide đầu và các ô danh mục chứa giá trị ngày Excel dạng số. Nó thay đổi trục ngang thành trục ngày. Gọi setAutomaticMajorUnit với false, setMajorUnit với 1, và setMajorUnitScale với TimeUnitType.Months để đặt các dấu tick chính ở khoảng một tháng.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation("ExistingChart.pptx");
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().get_Item(0);
    chart.getAxes().getHorizontalAxis().setCategoryAxisType(aspose.slides.CategoryAxisType.Date);
    chart.getAxes().getHorizontalAxis().setAutomaticMajorUnit(false);
    chart.getAxes().getHorizontalAxis().setMajorUnit(1);
    chart.getAxes().getHorizontalAxis().setMajorUnitScale(aspose.slides.TimeUnitType.Months);

    presentation.save("ChangeChartCategoryAxis_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Kiểm Soát Khoảng Nhãn Trục Danh Mục

Khi một biểu đồ có nhiều danh mục, giảm số lượng nhãn trục hiển thị mà không xóa bỏ các danh mục hoặc điểm dữ liệu. Gọi setAutomaticTickLabelSpacing với false, sau đó truyền khoảng danh mục mong muốn vào setTickLabelSpacing. Đối với các danh mục văn bản theo thứ tự bình thường, việc đếm bắt đầu từ danh mục đầu tiên:

Khoảng	Nhãn được hiển thị trong ví dụ
1	Category 1, Category 2, Category 3, … Category 24
2	Category 1, Category 3, Category 5, … Category 23
3	Category 1, Category 4, Category 7, … Category 22

Khoảng 3 hiển thị mỗi nhãn thứ ba, để lại hai nhãn bị ẩn giữa các nhãn được hiển thị. Nó không loại bỏ các cột tương ứng. Khoảng cách tự động chọn một khoảng dựa trên không gian có sẵn; nó không nhất thiết hiển thị mọi nhãn.

Dấu tick có các điều khiển riêng. Gọi setAutomaticTickMarksSpacing với false và sử dụng setTickMarksSpacing để đặt khoảng của chúng. Ví dụ, 1 giữ một dấu tick ở mỗi khoảng danh mục trong khi nhãn chỉ xuất hiện mỗi ba danh mục. Sử dụng setMajorTickMark với một kiểu hiển thị để bạn có thể thấy kết quả. Gọi bất kỳ setter khoảng cách tự động nào với true một lần nữa cho phép biểu đồ chọn lại khoảng đó.

Ví dụ tự chứa sau đây tạo 24 danh mục và một series, sau đó lưu ba slide trong CategoryAxisIntervals.pptx: khoảng cách tự động, khoảng cách nhãn thủ công với các dấu tick độc lập, và khôi phục khoảng cách tự động. Hai bản sao giữ nguyên dữ liệu biểu đồ gốc. Không cần bản trình bày đầu vào. Văn bản nhãn ngang làm cho sự khác biệt về mật độ dễ nhìn thấy.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 30, 40, 660, 320);

    chart.setLegend(false);
    chart.getChartData().getCategories().clear();
    chart.getChartData().getSeries().clear();

    var workbook = chart.getChartData().getChartDataWorkbook();
    workbook.clear(0);

    var series = chart.getChartData().getSeries().add(aspose.slides.ChartType.ClusteredColumn);
    for (var i = 0; i < 24; i++) {
        var categoryCell = workbook.getCell(0, i + 1, 0, "Category " + (i + 1));
        chart.getChartData().getCategories().add(categoryCell);
        var valueCell = workbook.getCell(0, i + 1, 1, 10 + i % 6 * 5);
        series.getDataPoints().addDataPointForBarSeries(valueCell);
    }

    var axis = chart.getAxes().getHorizontalAxis();
    axis.setCategoryAxisType(aspose.slides.CategoryAxisType.Text);
    axis.getTextFormat().getTextBlockFormat().setRotationAngle(0);
    axis.getTextFormat().getPortionFormat().setFontHeight(12);
    axis.setMajorTickMark(aspose.slides.TickMarkType.Outside);
    axis.setAutomaticTickLabelSpacing(true);
    axis.setAutomaticTickMarksSpacing(true);

    // Slide 2: hiển thị mỗi nhãn thứ ba, nhưng giữ một dấu tick cho mỗi danh mục.
    var manualSlide = presentation.getSlides().addClone(slide);
    var manualChart = manualSlide.getShapes().get_Item(0);
    var manualAxis = manualChart.getAxes().getHorizontalAxis();
    manualAxis.setAutomaticTickLabelSpacing(false);
    manualAxis.setTickLabelSpacing(3);
    manualAxis.setAutomaticTickMarksSpacing(false);
    manualAxis.setTickMarksSpacing(1);

    // Slide 3: để biểu đồ chọn lại cả hai khoảng cách.
    var restoredSlide = presentation.getSlides().addClone(manualSlide);
    var restoredChart = restoredSlide.getShapes().get_Item(0);
    restoredChart.getAxes().getHorizontalAxis().setAutomaticTickLabelSpacing(true);
    restoredChart.getAxes().getHorizontalAxis().setAutomaticTickMarksSpacing(true);

    presentation.save("CategoryAxisIntervals.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Khoảng cách tự động (slide 1): Trong cách hiển thị này, mỗi nhãn danh mục thứ hai được hiển thị và xuống dòng thành hai dòng. Kết quả tự động có thể thay đổi tùy theo kích thước biểu đồ, phông chữ và bộ render.

Khoảng cách thủ công (slide 2): Mỗi nhãn thứ ba được hiển thị trên một dòng, trong khi các dấu tick vẫn ở mỗi khoảng danh mục. Tất cả 24 cột, bao gồm những cột không có nhãn, vẫn hiển thị với cùng giá trị. Slide 3 khôi phục lại diện mạo tự động được hiển thị ở trên.

Chọn Trục và Khoảng Thích Hợp

Sử dụng khoảng cách đếm danh mục này cho một trục danh mục văn bản, chẳng hạn như trục danh mục của biểu đồ cột, đường, vùng hoặc thanh. Trong biểu đồ cột, nó là trục ngang. Trong biểu đồ thanh ngang, trục danh mục là trục dọc, vì vậy áp dụng các cài đặt này cho trục được trả về bởi getVerticalAxis. Khoảng cách dấu tick cũng áp dụng cho trục series trong các biểu đồ có trục series.

Không sử dụng khoảng cách nhãn danh mục để đặt thang số cho trục giá trị. Trên trục giá trị, setMajorUnit chỉ định sự chênh lệch giá trị: ví dụ, một đơn vị chính 10 tạo ra các dấu tick tại 0, 10, 20, v.v. khi trục bắt đầu từ không. Khoảng nhãn danh mục 3 thay vào đó đếm vị trí danh mục, bất kể giá trị dữ liệu của chúng. Các biểu đồ scatter và bubble sử dụng trục giá trị thay vì trục danh mục văn bản. Đối với trục ngày, sử dụng các đơn vị chính và thang thời gian như mô tả trong Thay Đổi Trục Danh Mục.

Đặt Định Dạng Ngày cho Giá Trị Trục Danh Mục

Ví dụ này thay thế dữ liệu biểu đồ mặc định bằng bốn giá trị hàng năm. Ngày được lưu dưới dạng số serial OLE Automation trong bảng tính đầu tiên (chỉ số 0), tính là số ngày kể từ ngày 30‑12‑1899 cho các ngày này. Việc tính bằng JavaScript sử dụng dấu thời gian UTC và chia hiệu số cho 86 400 000 mili giây mỗi ngày. Sử dụng setCategoryAxisType với CategoryAxisType.Date, gọi setNumberFormatLinkedToSource với false, và truyền yyyy vào setNumberFormat để nhãn danh mục hiển thị năm bốn chữ số độc lập với định dạng ô.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.Line, 50, 50, 450, 300);

    chart.getChartData().getCategories().clear();
    chart.getChartData().getSeries().clear();

    var workbook = chart.getChartData().getChartDataWorkbook();
    workbook.clear(0);

    var baseDate = Date.UTC(1899, 11, 30);

    var series = chart.getChartData().getSeries().add(aspose.slides.ChartType.Line);
    for (var i = 0; i < 4; i++) {
        var date = Date.UTC(2015 + i, 0, 1);
        var categoryCell = workbook.getCell(0, i + 1, 0, (date - baseDate) / 86400000);
        chart.getChartData().getCategories().add(categoryCell);

        var valueCell = workbook.getCell(0, i + 1, 1, i + 1);
        series.getDataPoints().addDataPointForLineSeries(valueCell);
    }

    chart.getAxes().getHorizontalAxis().setCategoryAxisType(aspose.slides.CategoryAxisType.Date);
    chart.getAxes().getHorizontalAxis().setNumberFormatLinkedToSource(false);
    chart.getAxes().getHorizontalAxis().setNumberFormat("yyyy");

    presentation.save("DateAxisFormat.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Đặt Góc Xoay cho Tiêu Đề Trục Biểu Đồ

Gọi setTitle với true trên trục dọc, cung cấp văn bản tiêu đề, và sử dụng setRotationAngle để xoay tiêu đề. Góc được đo bằng độ; ví dụ này lưu một biểu đồ cột với tiêu đề trục giá trị được xoay 90 độ.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 450, 300);
    chart.getAxes().getVerticalAxis().setTitle(true);
    chart.getAxes().getVerticalAxis().getTitle().addTextFrameForOverriding("Value");
    chart.getAxes().getVerticalAxis().getTitle().getTextFormat().getTextBlockFormat().setRotationAngle(90);

    presentation.save("RotatedAxisTitle.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Đặt Vị Trí Trục trên Trục Danh Mục hoặc Trục Giá Trị

Sử dụng setAxisBetweenCategories để kiểm soát việc trục giá trị cắt qua trục danh mục giữa các danh mục hoặc tại các dấu tick danh mục. Cài đặt này áp dụng cho trục danh mục. Ví dụ đặt giá trị này thành true trên trục danh mục ngang của biểu đồ cột và lưu kết quả.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 450, 300);
    chart.getAxes().getHorizontalAxis().setAxisBetweenCategories(true);

    presentation.save("AxisBetweenCategories.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Đặt Đơn Vị Hiển Thị trên Trục Giá Trị của Biểu Đồ

Sử dụng setDisplayUnit để tỷ lệ các nhãn trên trục giá trị mà không thay đổi dữ liệu nguyên thủy. Với DisplayUnitType được đặt thành Millions, một giá trị 60 000 000 sẽ hiển thị là 60. Ví dụ tạo một biểu đồ cột và áp dụng đơn vị hiển thị triệu cho trục dọc của nó.

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");

var presentation = new aspose.slides.Presentation();
try {
    var slide = presentation.getSlides().get_Item(0);

    var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 450, 300);
    chart.getAxes().getVerticalAxis().setDisplayUnit(aspose.slides.DisplayUnitType.Millions);

    presentation.save("Result.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

FAQ

Làm sao tôi có thể đặt giá trị mà tại đó một trục cắt qua trục kia (giao điểm trục)?

Sử dụng setCrossType để chọn hành vi giao điểm. Để chỉ định một giá trị giao điểm kiểu số, sử dụng setCrossAt. Các cài đặt này cho phép bạn di chuyển giao điểm trục tới một mức cơ sở phù hợp.

Làm sao tôi có thể định vị nhãn tick so với trục?

Gọi setTickLabelPosition sử dụng TickLabelPositionType: Low, High, NextTo, hoặc None. Để kiểm soát các dấu tick riêng biệt, sử dụng setMajorTickMark hoặc setMinorTickMark; chúng độc lập với vị trí nhãn.