Tuỳ chỉnh các điểm dữ liệu trong biểu đồ Treemap và Sunburst bằng JavaScript

Giới thiệu

Trong số các loại biểu đồ PowerPoint khác, có hai loại biểu đồ “phân cấp” - Treemap và Sunburst (còn được gọi là Đồ thị Sunburst, Sơ đồ Sunburst, Biểu đồ Tâm tròn, Đồ thị Tâm tròn hoặc Biểu đồ Pie Đa cấp). Các biểu đồ này hiển thị dữ liệu phân cấp được tổ chức dưới dạng cây - từ các lá tới đầu nhánh. Các lá được xác định bởi các điểm dữ liệu của chuỗi, và mỗi mức nhóm lồng nhau tiếp theo được xác định bởi danh mục tương ứng. Aspose.Slides cho Node.js thông qua Java cho phép định dạng các điểm dữ liệu của biểu đồ Sunburst và Treemap trong JavaScript.

Đây là một biểu đồ Sunburst, trong đó dữ liệu ở cột Series1 xác định các nút lá, trong khi các cột khác xác định các điểm dữ liệu phân cấp:

todo:image_alt_text

Hãy bắt đầu bằng việc thêm một biểu đồ Sunburst mới vào bản trình bày:

var pres = new aspose.slides.Presentation();
try {
    var chart = pres.getSlides().get_Item(0).getShapes().addChart(aspose.slides.ChartType.Sunburst, 100, 100, 450, 400);
    // ...
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Xem thêm

Tạo hoặc Cập nhật Biểu đồ PowerPoint trong JavaScript

Nếu cần định dạng các điểm dữ liệu của biểu đồ, chúng ta nên sử dụng những thứ sau:

ChartDataPointLevelsManager, ChartDataPointLevel classes and ChartDataPoint.getDataPointLevels method cung cấp quyền truy cập để định dạng các điểm dữ liệu của biểu đồ Treemap và Sunburst. ChartDataPointLevelsManager được sử dụng để truy cập các danh mục đa cấp - nó đại diện cho bộ chứa của ChartDataPointLevel objects. Về cơ bản, nó là một wrapper cho ChartCategoryLevelsManager với các thuộc tính được thêm vào đặc thù cho các điểm dữ liệu. ChartDataPointLevel class có hai phương thức: getFormat và getDataLabel which cung cấp quyền truy cập tới các cài đặt tương ứng.

Hiển thị Giá trị Điểm Dữ liệu

Hiển thị giá trị của điểm dữ liệu “Leaf 4”:

var dataPoints = chart.getChartData().getSeries().get_Item(0).getDataPoints();
dataPoints.get_Item(3).getDataPointLevels().get_Item(0).getLabel().getDataLabelFormat().setShowValue(true);

todo:image_alt_text

Đặt Nhãn và Màu cho Điểm Dữ liệu

Đặt nhãn dữ liệu “Branch 1” để hiển thị tên chuỗi (“Series1”) thay vì tên danh mục. Sau đó đặt màu văn bản thành màu vàng:

var branch1Label = dataPoints.get_Item(0).getDataPointLevels().get_Item(0).getLabel();
branch1Label.getDataLabelFormat().setShowCategoryName(false);
branch1Label.getDataLabelFormat().setShowSeriesName(true);
branch1Label.getDataLabelFormat().getTextFormat().getPortionFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
branch1Label.getDataLabelFormat().getTextFormat().getPortionFormat().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "YELLOW"));

todo:image_alt_text

Đặt Màu Nhánh cho Điểm Dữ liệu

Thay đổi màu của nhánh “Steam 4”:

var pres = new aspose.slides.Presentation();
try {
    var chart = pres.getSlides().get_Item(0).getShapes().addChart(aspose.slides.ChartType.Sunburst, 100, 100, 450, 400);
    var dataPoints = chart.getChartData().getSeries().get_Item(0).getDataPoints();
    var stem4branch = dataPoints.get_Item(9).getDataPointLevels().get_Item(1);
    stem4branch.getFormat().getFill().setFillType(java.newByte(aspose.slides.FillType.Solid));
    stem4branch.getFormat().getFill().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "RED"));
    pres.save("pres.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

todo:image_alt_text

Câu hỏi thường gặp

Tôi có thể thay đổi thứ tự (sắp xếp) của các phân đoạn trong Sunburst/Treemap không?

Không. PowerPoint tự động sắp xếp các phân đoạn (thông thường theo giá trị giảm dần, theo chiều kim đồng hồ). Aspose.Slides phản chiếu hành vi này: bạn không thể thay đổi thứ tự trực tiếp; bạn phải thực hiện bằng cách tiền xử lý dữ liệu.

Giao diện bản trình bày ảnh hưởng như thế nào đến màu sắc của các phân đoạn và nhãn?

Màu sắc của biểu đồ kế thừa giao diện/bảng màu của bản trình bày trừ khi bạn thiết lập màu nền/phông chữ một cách rõ ràng. Để có kết quả nhất quán, hãy cố định màu nền đặc và định dạng văn bản ở các cấp cần thiết.

Xuất ra PDF/PNG có giữ nguyên màu nhánh tùy chỉnh và cài đặt nhãn không?

Có. Khi xuất bản trình bày, các cài đặt biểu đồ (màu nền, nhãn) được giữ trong các định dạng đầu ra vì Aspose.Slides render với định dạng của biểu đồ được áp dụng.

Tôi có thể tính toán tọa độ thực tế của nhãn/phần tử để đặt lớp phủ tùy chỉnh lên trên biểu đồ không?

Có. Sau khi bố cục biểu đồ được xác nhận, giá trị X thực tế và Y thực tế có sẵn cho các phần tử (ví dụ, một DataLabel), giúp định vị chính xác các lớp phủ.

Tùy chỉnh biểu đồ tròn trong bản trình bày bằng JavaScript