Giới Thiệu

Trong phát triển ứng dụng hiện đại, việc tạo ra các biểu đồ sạch sẽ, có thể mở rộng và tương tác đã trở thành một phần cốt lõi - cho dù đó là cho bảng điều khiển, phân tích hay giám sát dữ liệu. HarmonyOS NEXT trang bị cho các nhà phát triển ArkTS và các thư viện UI mạnh mẽ để mang lại những hiểu biết trực quan ngay trong trải nghiệm gốc của ứng dụng. Trong hướng dẫn này, tôi sẽ hướng dẫn cách sử dụng thư viện @visactor/harmony-vchart để xây dựng một biểu đồ đường tùy chỉnh, tương tác trong ứng dụng HarmonyOS của bạn bằng ArkTS. Cho dù bạn đang xây dựng một ứng dụng tài chính hay bảng điều khiển cảm biến thời gian thực, cách tiếp cận này sẽ mang lại cho bạn quyền kiểm soát, tính linh hoạt và hiệu suất mượt mà.

Tại Sao Nên Chọn VChart?

VChart là một thư viện biểu đồ hiệu suất cao được thiết kế cho các hình ảnh trực quan linh hoạt, tương tác và nhẹ. Gói đặc biệt cho HarmonyOS (@visactor/harmony-vchart) cho phép chúng ta nhúng biểu đồ trực tiếp vào ứng dụng ArkTS mà không cần phải chuyển sang webview hoặc các lớp kết xuất bên ngoài.

Hướng Dẫn Cài Đặt

ohpm install @visactor/harmony-vchart

Hãy chắc chắn rằng bạn đang sử dụng SDK HarmonyOS NEXT với hỗ trợ ArkTS được kích hoạt trong dự án của bạn.

Nhập Thư Viện

import { VChart } from '@visactor/harmony-vchart';

Thiết Lập Thành Phần Biểu Đồ

1. Định Nghĩa Trạng Thái và Thông Số Biểu Đồ

@State spec: Record<string, string | ESObject> = {}

Tiếp theo, định nghĩa cấu hình cho biểu đồ:

this.spec = {
  type: 'line',
  data: {
    values: this.chartData as ESObject
  },
  xField: ['name', 'type'],
  yField: 'value',
  seriesField: 'type',
  axes: [
    {
      orient: 'left',
      min: this.minMax.min,
      max: this.minMax.max,
      nice: true
    }
  ],
  line: {
    state: {
      aaa: {
        fill: 'red'
      } as ESObject
    },
    style: {
      stroke: Color.Black,
      lineWidth: 2
    } as ESObject
  },
  point: {
    style: {
      fill: 'black',
      stroke: 'black',
      size: 8
    } as ESObject
  },
  legends: {
    visible: true,
    position: 'start',
    orient: 'top'
  }
}

2. Kết Xuất Biểu Đồ

VChart({
  spec: this.spec,
  w: this.chartWidth,
  h: this.chartHeight,
  onChartInitCb: (vchart) => {
    return;
  },
  onChartReadyCb: (vchart) => {
    vchart.on('touchstart', { level: 'mark', type: 'bar' }, (e: Event) => {
      e.item.addState('aaa');
    });
  },
  initOption: {
    beforeRender: () => {
      // Có thể được sử dụng để theo dõi/thời gian gỡ lỗi
    },
    afterRender: () => {
      // Đo thời gian kết xuất hoặc xử lý sau
    }
  }
})

Phân Tích Các Tính Năng Chính

• Tương Tác: Callback onChartReadyCb cho phép bạn kết nối với các sự kiện như touchstart cho các phần tử biểu đồ.
• Thiết Kế: Thông qua line.style và point.style, bạn có thể điều chỉnh thẩm mỹ của biểu đồ.
• Nổi Bật Theo Trạng Thái: Định nghĩa các trạng thái như aaa để làm nổi bật tương tác hoặc kết xuất dựa trên điều kiện.

Các Trường Hợp Sử Dụng

• Biểu đồ tài chính (giá theo thời gian)
• Ứng dụng thể dục (bước đi hoặc nhịp tim theo ngày)
• Bảng điều khiển giám sát (dữ liệu cảm biến thời gian thực)

Thực Hành Tốt Nhất

• Luôn quy mô biểu đồ của bạn một cách động dựa trên chiều rộng thiết bị.
• Sử dụng nice: true trên các trục để căn chỉnh giá trị tốt hơn.
• Giới hạn tần suất các trình xử lý sự kiện nếu thực hiện các tương tác chạm phức tạp.

Lời Kết

Việc đưa VChart vào dự án HarmonyOS ArkTS của bạn mở ra một thế giới khả năng cho việc trực quan hóa dữ liệu mượt mà, tương tác và thanh lịch. Cho dù bạn đang xây dựng một bảng điều khiển, chế độ xem báo cáo hay công cụ phân tích trực tiếp, thư viện này sẽ mang lại cho bạn sự linh hoạt và hiệu suất mà bạn cần.

Câu Hỏi Thường Gặp

1. Làm thế nào để tôi có thể tùy chỉnh biểu đồ của mình?
Bạn có thể tùy chỉnh biểu đồ bằng cách thay đổi các thông số trong cấu hình spec.

2. VChart có hỗ trợ các loại biểu đồ khác không?
Có, VChart hỗ trợ nhiều loại biểu đồ khác nhau như biểu đồ cột, biểu đồ tròn, vv.

3. Tôi có thể sử dụng VChart trên các nền tảng khác không?
Hiện tại, VChart được tối ưu hóa cho HarmonyOS.

Tài Liệu Tham Khảo

• Demo VChart
• Hướng dẫn sử dụng VChart

Tác giả: Ali Anıl Toklu