Morioh
Login
Duy Tien

Duy Tien

6 months ago

Biểu đồ 3D Angular: Một bước tiến trong trực quan hóa dữ liệu

Khám phá thành phần Biểu đồ 3D Angular mới từ Syncfusion và tìm hiểu cách tạo biểu đồ 3D tuyệt đẹp một cách dễ dàng. Xem mẫu demo và mã.

Biểu đồ 3D Angular: Tổng quan

Thành phần Biểu đồ 3D Angular cung cấp biểu diễn dữ liệu bằng đồ họa theo ba chiều, thể hiện mối quan hệ và xu hướng giữa các biến. Không giống như biểu đồ 2D truyền thống, biểu đồ 3D bổ sung thêm chiều sâu cho hình ảnh trực quan, cho phép hiểu rõ hơn về các mẫu dữ liệu.

Với công cụ này, bạn có thể dễ dàng tạo nhiều loại biểu đồ 3D khác nhau: thanh, thanh xếp chồng. bánh rán và chiếc bánh, Cột xếp chồng 100%, cột xếp chồng, cột , thanh xếp chồng 100% ,

Biểu đồ 3D góc

Biểu đồ 3D Angular

Chúng ta hãy xem xét tất cả những điều này kỹ hơn.

Các loại biểu đồ

Thành phần Biểu đồ 3D Angular cung cấp sáu loại biểu đồ linh hoạt, có thể cấu hình dễ dàng, với sự hỗ trợ tích hợp để tạo ra các hiệu ứng trực quan ấn tượng:

  • Cột: Biểu thị dữ liệu bằng các thanh dọc để dễ so sánh giá trị.
  • Thanh: Sử dụng các thanh ngang để hiển thị dữ liệu và hỗ trợ so sánh giá trị.
  • Cột xếp chồng: Vẽ các điểm dữ liệu chồng lên nhau bằng các thanh dọc để hiển thị toàn diện.
  • Thanh xếp chồng: Đạt được hiệu ứng tương tự như cột xếp chồng nhưng có thanh ngang.
  • Cột xếp chồng 100%: Minh họa tỷ lệ phân bổ phần trăm của nhiều tập dữ liệu trong tổng số, với mỗi cột cộng lại tối đa 100%.
  • Thanh xếp chồng 100%: Giống như cột xếp chồng nhưng sử dụng thanh ngang, thể hiện tỷ lệ phần trăm phân bổ của các tập dữ liệu trong tổng số.
Các loại biểu đồ khác nhau được hỗ trợ trong Biểu đồ 3D góc

Các loại biểu đồ khác nhau được hỗ trợ trong Biểu đồ 3D Angular

Ràng buộc dữ liệu

Dễ dàng liên kết thành phần Biểu đồ 3D với một loạt đối tượng JSON hoặc trình quản lý dữ liệu, với sự hỗ trợ cho cả phương pháp liên kết dữ liệu cục bộ và từ xa. Ngoài chuỗi biểu đồ, nhãn dữ liệu và chú giải công cụ cũng có thể được liên kết với dữ liệu của bạn.

Nhãn dữ liệu

Chú thích các điểm bằng nhãn để cải thiện khả năng đọc dữ liệu. Nâng cao các nhãn này bằng các phần tử HTML như hình ảnh, DIV và span, tạo ra các cách trình bày dữ liệu mang tính thông tin và hấp dẫn về mặt trực quan.

Nhãn dữ liệu trong Biểu đồ 3D góc

Nhãn dữ liệu trong Biểu đồ 3D Angular

Các loại trục

Các kiểu dữ liệu số, ngày giờ, logarit và chuỗi trong trục biểu đồ. Các tính năng của trục bao gồm:

  • Trục nghịch đảo: Lật hướng trục khỏi hướng mặc định của nó.
  • Vị trí đối lập: Hiển thị trục ở vị trí đối diện.
  • Nhiều trục: Bao gồm nhiều hơn một trục ở cùng phía hoặc đối diện.
  • Nhãn thông minh: Thêm nhãn động tự động định vị để nâng cao khả năng đọc và tránh chồng chéo.
Các loại trục trong Biểu đồ 3D góc

Các loại trục trong Biểu đồ 3D Angular

Truyền thuyết

Cung cấp thông tin bổ sung về chuỗi dữ liệu bằng cách sử dụng chú giải có thể tùy chỉnh. Nhãn và ký hiệu hỗ trợ người xem xác định và phân biệt giữa các chuỗi khác nhau trong biểu đồ.

Huyền thoại trong biểu đồ 3D góc

Huyền thoại trong biểu đồ 3D Angular

Tương tác người dùng

Bạn cũng có thể thêm các tính năng tương tác vào biểu đồ 3D:

  • Chú giải công cụ: Một hộp bật lên nhỏ, đầy thông tin cung cấp ngữ cảnh, chi tiết hoặc thông tin bổ sung khi người dùng di chuột qua hoặc nhấp vào các điểm dữ liệu.
  • Đánh dấu và lựa chọn: Dễ dàng đánh dấu và chọn các điểm dữ liệu để cải thiện khả năng hiểu. Việc thêm mẫu và màu sắc vào dữ liệu đã chọn sẽ nâng cao tính tương tác của biểu đồ.
Tính năng tương tác người dùng trong Biểu đồ 3D góc

Tính năng tương tác người dùng trong Biểu đồ 3D Angular

Xoay và nghiêng

Ngoài các tính năng trước đó, Biểu đồ 3D Angular hỗ trợ:

  • Xoay: Xoay động Biểu đồ 3D từ 0 đến 360 độ quanh một điểm hoặc trục cố định trong không gian ba chiều. Việc xoay có thể xảy ra theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ.
  • Nghiêng: Thay đổi Angular nghiêng của biểu đồ dọc theo một trục, mang lại Angular nhìn khác.
Tính năng xoay và nghiêng trong Biểu đồ 3D góc

Tính năng xoay và nghiêng trong Biểu đồ 3D Angular

Bắt đầu với thành phần Biểu đồ 3D Angular

Chúng tôi đã khám phá các tính năng tuyệt vời của Biểu đồ 3D Angular mới. Hãy xem cách sử dụng nó để trực quan hóa dữ liệu!

Bước 1: Tạo một ứng dụng Angular

Đầu tiên, tạo một ứng dụng Angular bằng cách sử dụng lệnh sau.

ng new-my app
cd my-app

Bước 2: Cài đặt gói NuGet Syncfusion Angular Charts

Thêm gói NuGet Syncfusion Angular Charts vào ứng dụng.

npm install @syncfusion/ej2-angular-charts –save

Bước 3: Đăng ký module Biểu đồ 3D

Nhập mô-đun Biểu đồ 3D vào ứng dụng Angular trong tệp app.module.ts.

Hãy tham khảo ví dụ mã sau đây.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the ChartModule for the Chart component
import { Chart3DModule } from '@syncfusion/ej2-angular-charts';
import { AppComponent }  from './app.component';

@NgModule({
  //declaration of ChartModule into NgModule
  imports:      [ BrowserModule, Chart3DModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Sau đó, sửa đổi mẫu trong tệp app.comComponent.ts để hiển thị Biểu đồ 3D.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-container',
  // specifies the template string for the 3D Charts component
  template: `<ejs-chart3d id='chart-container'></ejs-chart3d>`,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  { }

Sử dụng bộ chứa ứng dụng trong index.html tệp thay vì tệp mặc định.

<app-container></app-container>

Bước 4: Điền dữ liệu vào biểu đồ

Liên kết dữ liệu JSON với Biểu đồ 3D Angular  trong tệp App.comComponent.ts.

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-container',
    template: `<ejs-chart3d style='display:block;' align='center' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
    rotation=7 tilt=10 depth=100 [enableRotation]='enableRotation'>
    <e-chart3d-series-collection>
        <e-chart3d-series [dataSource]='dataSource' type='Column' xName='x' yName='y'>
        </e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>`
})
export class AppComponent implements OnInit {
    public dataSource?: Object[];
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public enableRotation?: boolean;
    ngOnInit(): void {
        this.dataSource = [
            { x: 'Tesla', y: 137429 }, { x: 'Aion', y: 80308 },
            { x: 'Wuling', y: 76418 }, { x: 'Changan', y: 52849 },
            { x: 'Geely', y: 47234 }, { x: 'Nio', y: 31041 },
            { x: 'Neta', y: 22449 }, { x: 'BMW', y: 18733 }];
        this.primaryXAxis = {
            valueType: 'Category',
            labelRotation: -45,
            labelPlacement: 'BetweenTicks'
        };
        this.primaryYAxis = {
            maximum: 150000,
            interval: 50000
        };
        this.enableRotation = true;
    }
}

Bước 5: Chạy ứng dụng

Cuối cùng, chạy ứng dụng trong trình duyệt bằng lệnh sau.

npm start

Sau khi thực thi các ví dụ mã trước đó, chúng ta sẽ nhận được kết quả như trong hình ảnh sau.

Tích hợp Biểu đồ 3D trong ứng dụng Angular

Tích hợp Biểu đồ 3D trong ứng dụng Angular

Người giới thiệu

Để biết thêm chi tiết, hãy tham khảo Tài liệu về Biểu đồ 3D Angular và bản trình diễn< a i=4>.

#angular 

Biểu đồ 3D Angular: Một bước tiến trong trực quan hóa dữ liệu
1.65 GEEK