🟨 Unovis là một khung hiển thị dữ liệu có tính module cho React, Angular, Svelte và TypeScript hoặc JavaScript nguyên bản:
- 📈 🗺 Nó có biểu đồ, bản đồ, đồ thị mạng và nhiều hơn nữa!
- 🌳 Có thể loại bỏ các thành phần riêng lẻ và hỗ trợ việc nhập khẩu để giảm kích thước gói;
- 🎨 Có thể tùy chỉnh cao, nhờ vào việc hỗ trợ biến CSS.
Tìm hiểu thêm về Unovis tại unovis.dev
Bắt đầu nhanh
Bạn có thể cài đặt phần cốt lõi của thư viện @unovis/ts
và các gói cụ thể cho framework (nếu bạn sử dụng React, Angular hoặc Svelte) từ NPM:
npm install -P @unovis/ts @unovis/<react|angular|svelte>
Bây giờ bạn có thể nhập các thành phần và tạo biểu đồ đầu tiên của bạn! Dưới đây là cách xây dựng biểu đồ đường đơn giản bằng Unovis và React:
import React, { useCallback } from 'react'
import { VisXYContainer, VisLine, VisAxis } from '@unovis/react'
type DataRecord = { x: number; y: number }
const data: DataRecord[] = [
{ x: 0, y: 0 },
{ x: 1, y: 2 },
{ x: 2, y: 1 },
]
export function BasicLineChart (): JSX.Element {
return (
<VisXYContainer data={data}>
<VisLine<DataRecord>
x={useCallback(d => d.x, [])}
y={useCallback(d => d.y, [])}
></VisLine>
<VisAxis type="x"></VisAxis>
<VisAxis type="y"></VisAxis>
</VisXYContainer>
)
}
Đang tìm kiếm ví dụ về Angular, Svelte hoặc TypeScript? Hãy kiểm tra trang Quick Start trên trang web của chúng tôi.
Ví dụ và Tài liệu
📖 Unovis có một documentation mở rộng với đoạn mã mẫu cho React, Angular, Svelte và TypeScript.
🖼 Ngoài ra, có một gallery ngày càng phát triển với các ví dụ, từ đó bạn có thể sao chép mã vào dự án của mình hoặc thử nó trực tiếp trên StackBlitz.
Cấu trúc Kho
packages/ts
Gói TypeScript cốt lõipackages/angular
Các thành phần Angularpackages/react
Các thành phần Reactpackages/svelte
Các thành phần Sveltepackages/website
Trang web, tài liệu và ví dụ
Đóng góp
Chào mừng các yêu cầu Pull. Đối với các thay đổi lớn, vui lòng mở một vấn đề trước để thảo luận về những gì bạn muốn thay đổi. Để biết thêm thông tin, vui lòng đọc CONTRIBUTING.
Giấy phép
Unovis được cấp phép theo Apache-2.0
Nguồn: https://github.com