🌐 Ngôn ngữ
uPlot wrappers
Một bộ sưu tập các trình bao bọc uPlot cho phép bạn làm việc với biểu đồ theo cách khai báo trong framework yêu thích của mình.
Mục lục
- Động lực phát triển
- Bắt đầu sử dụng
- React
- Cài đặt
- Cách sử dụng
- Demo
- Vue.js
- Cài đặt
- Cách sử dụng
- Demo
- Svelte
- Cài đặt
- Cách sử dụng
- Demo
- Tài liệu
Động lực
Mặc dù đã có một số wrapper uPlot khác, tất cả đều gặp phải một trong những hạn chế sau:
- Chúng tạo ra một instance uPlot duy nhất trong giai đoạn mount của component, và mong bạn tự xử lý toàn bộ logic cập nhật.
- Chúng tạo lại instance uPlot mới mỗi khi props thay đổi, ngay cả khi instance có thể được cập nhật để phản ánh sự thay đổi.
Bắt đầu
Xem các phần React, Vue.js hoặc Svelte bên dưới tùy thuộc vào framework bạn đang sử dụng. Cũng xem tài liệu API tài liệu chung cho mọi framework.
React
Cài đặt
Cài đặt gói uplot-react cùng với phụ thuộc uplot:
- Dùng npm:
$ npm install uplot-react uplot - Dùng yarn:
$ yarn add uplot-react uplot
Cách sử dụng
import React from 'react';
import uPlot from 'uplot';
import UplotReact from 'uplot-react';
import 'uplot/dist/uPlot.min.css';const Chart = () => (
{}} onDelete={(chart) => {}} />
);
Demo
Bạn cũng có thể chạy ứng dụng demo tại địa phương:
$ git clone https://github.com/skalinichev/uplot-wrappers.git
$ cd uplot-wrappers && yarn install && yarn run serveReact
Demo ReactJS
Ví dụ đơn giản để bắt đầu nhanh chóng. Demo ReactJS
Vue.js
Cài đặt
Cài đặt gói uplot-vue cùng với phụ thuộc uplot:
- Sử dụng npm:
$ npm install uplot-vue uplot - Sử dụng yarn:
$ yarn add uplot-vue uplot
Cách sử dụng
Sử dụng template
Sử dụng JSX
// Vue.js 2
import Vue from 'vue';
// Vue.js 3
import { createApp } from 'vue';
import uPlot from 'uplot';
import UplotVue from 'uplot-vue';
import 'uplot/dist/uPlot.min.css';{
...,
render() {
return (
{}}
onCreate={(chart) => {}}
/>
);
}
}
Lưu ý: Việc thay đổi thuộc tính bằng cách biến đổi không được hỗ trợ do giới hạn của Vue. Bạn phải tạo một bản sao của thuộc tính, tức là thay thế nó, xem ví dụ để hiểu ý tưởng chung.
Demo
Xem bản demo trực tiếp Vue.js 2
Bạn cũng có thể chạy ứng dụng demo trên máy của mình:
$ git clone https://github.com/skalinichev/uplot-wrappers.git
$ cd uplot-wrappers && yarn install
Vue.js 2:
$ yarn run serveVue
Vue.js 3:
$ yarn run serveVue3
Svelte
Cài đặt
Cài đặt gói uplot-svelte với phụ thuộc uplot:
- Sử dụng npm:
$ npm install uplot-svelte uplot - Sử dụng yarn:
$ yarn add uplot-svelte uplot
Cách sử dụng
Demo
Xem ví dụ Svelte example
Bạn cũng có thể chạy ứng dụng demo trên máy cục bộ:
$ git clone https://github.com/skalinichev/uplot-wrappers.git
$ cd uplot-wrappers && yarn install && yarn run serveSvelte
Tài liệu
| Tham số | Yêu cầu | Mô tả |
| :-------------: | :---------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| options | bắt buộc | Tùy chọn cho uPlot. Được truyền vào làm đối số đầu tiên cho hàm khởi tạo uPlot: new uPlot(options) |
| data | bắt buộc | Dữ liệu cho uPlot. Được truyền vào làm đối số thứ hai cho hàm khởi tạo uPlot: new uPlot(options, data) |
| target | tùy chọn | Phần tử html đích cho uPlot. Được truyền vào làm đối số thứ ba cho hàm khởi tạo uPlot: new uPlot(options, data, target) Một phần tử div mới sẽ được tạo tự động nếu không truyền vào props |
| onCreate | tùy chọn | Hàm callback, được gọi khi tạo hoặc tái tạo thể hiện uPlot |
| onDelete | tùy chọn | Hàm callback, được gọi trước khi thể hiện uPlot bị hủy, có thể do props thay đổi quá nhiều khiến không thể cập nhật biểu đồ hoặc do component sắp bị loại bỏ |
| className/class | tùy chọn | Tên class được truyền cho phần tử div đích được tạo tự động. Tên class sẽ bị bỏ qua nếu sử dụng prop 'target'. |
| resetScales | tùy chọn | Cờ điều khiển việc có reset lại các thang đo khi dữ liệu thay đổi hay không. Mặc định là true. |
--- Tranlated By Open Ai Tx | Last indexed: 2025-09-25 ---