Scatter
ScatterChart cho thấy quan hệ giữa hai đại lượng số — tương quan, cụm và điểm ngoại lai — kèm bong bóng và đường xu hướng khi cần.
Marker ≥ 8px có viền bề mặt 2px để các điểm chồng vẫn tách nhau. Tooltip bám theo điểm gần con trỏ nhất (tra kiểu Voronoi) nên không cần ngắm trúng chấm nhỏ. Bàn phím: Tab vào biểu đồ rồi dùng mũi tên duyệt các điểm theo thứ tự X. size biến điểm thành bong bóng với diện tích (không phải bán kính) tỉ lệ với giá trị; nút “Xu hướng” vẽ đường bình phương tối thiểu cho từng nhóm và ghi hệ số góc, R² vào mô tả truy cập.
Yugen Labs · thử nghiệmComponent này nằm ngoài SemVer: API có thể đổi ở một bản minor, và thay đổi sẽ được ghi trong Có gì mới. Chính sách phiên bản
Giá và điểm đánh giá
14 sản phẩm, 3 nhóm
Import
Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.
TSX
// npm install yugen-uiimport { ScatterChart } from "yugen-ui";Biến thể
Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.
Cửa hàng: diện tích, doanh thu và nhân sự
Bong bóng
size thêm chiều thứ ba: bán kính theo căn bậc hai nên diện tích tỉ lệ với giá trị; bong bóng lớn vẽ trước, nhỏ nằm trên.
Giờ tự học và điểm thi
Đường xu hướng
defaultTrendLine bật sẵn hồi quy tuyến tính (nét đứt). Hệ số góc và R² được đọc trong mô tả cho trình đọc màn hình.
Thời gian phản hồi
Trục thời gian
x là Date → trục thời gian. series cố định thứ tự và màu của nhóm thay vì theo thứ tự xuất hiện.
Cách dùng
Nên
- Dùng scatter khi câu hỏi là “hai đại lượng có liên quan không?” — không dùng cho xu hướng theo thời gian của một chuỗi (đó là LineChart).
- Giữ ≤ 3 nhóm: dạng “mọi cặp” chỉ 3 màu đầu đủ khác biệt cho người mù màu; nhiều hơn thì marker tự đổi hình hoặc tách small multiples.
- Gắn label để tooltip và bảng gọi tên từng điểm; đặt xLabel / yLabel có đơn vị.
- Bật đường xu hướng khi muốn nói về chiều hướng, kèm R² để người đọc biết mức tin cậy.
Không nên
- Không mã hoá đại lượng bằng bán kính — bong bóng luôn theo diện tích, và đừng dùng size cho dữ liệu âm.
- Không vẽ hàng nghìn điểm nguyên bản — lấy mẫu hoặc gộp ô (heatmap) trước.
- Không thêm trục Y thứ hai cho nhóm khác thang đo.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| data / x / yChartDatum[] / string / string | Mặc định: — | Trường X (số hoặc Date) và Y (số). |
| sizestring | Mặc định: — | Trường kích thước → bong bóng (diện tích ∝ giá trị). |
| maxRadiusnumber | Mặc định: 24 | Bán kính bong bóng lớn nhất (px); nhỏ nhất 5px (chấm ≥ 8px + viền 2px). |
| group / seriesstring / ChartSeries[] | Mặc định: — | Trường nhóm và thứ tự / nhãn / màu nhóm. Nhóm thứ 9+ gộp vào “Khác”. |
| labelstring | Mặc định: — | Trường tên điểm (tiêu đề tooltip, cột đầu bảng). |
| xLabel / yLabel / sizeLabelstring | Mặc định: — | Tên đại lượng trong tooltip, bảng và mô tả. |
| xType"number" | "time" | Mặc định: tự nhận | Có Date → time. |
| xFormatIntl.NumberFormatOptions | Intl.DateTimeFormatOptions | (v) => string | Mặc định: — | Định dạng X. |
| valueFormat / axisFormat / sizeFormatChartNumberFormat | Mặc định: — | Định dạng Y, trục Y, kích thước. |
| includeZeroboolean | Mặc định: false | Trục Y bắt đầu từ 0. |
| shapesboolean | Mặc định: texture hoặc > 3 nhóm | Phân biệt nhóm thêm bằng hình marker. |
| trendLine / defaultTrendLine / onTrendLineChangeboolean / boolean / (on) => void | Mặc định: — | Đường xu hướng bình phương tối thiểu. |
| hideTrendToggleboolean | Mặc định: false | Ẩn nút “Xu hướng”. |
| legendboolean | Mặc định: ≥ 2 nhóm | Legend bật/tắt nhóm. |
| title, description, toolbar, locale, ariaLabel, indexLabel…ChartFrameProps | Mặc định: — | Như BarChart: khung, nút “Bảng dữ liệu”, texture, animate (tắt khi giảm chuyển động). |
Messages
Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.
Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.
messages.chart
| Khoá · Kiểu | Mặc định (tiếng Anh) | messagesVi |
|---|---|---|
| roleDescriptionstring aria-roledescription của vùng vẽ. | Mặc định (tiếng Anh)"chart" | messagesVi"biểu đồ" |
| heatmapRoleDescriptionstring | Mặc định (tiếng Anh)"heat map" | messagesVi"bản đồ nhiệt" |
| dataTablestring Nút bật chế độ bảng của ChartContainer. | Mặc định (tiếng Anh)"Data table" | messagesVi"Bảng dữ liệu" |
| totalstring Dòng tổng (tooltip, bảng) và nhãn giữa vòng DonutChart. | Mặc định (tiếng Anh)"Total" | messagesVi"Tổng" |
| valuestring | Mặc định (tiếng Anh)"Value" | messagesVi"Giá trị" |
| sharestring | Mặc định (tiếng Anh)"Share" | messagesVi"Tỉ lệ" |
| noDatastring | Mặc định (tiếng Anh)"No data" | messagesVi"Không có dữ liệu" |
| timestring Tiêu đề cột đầu của bảng (khi không truyền | Mặc định (tiếng Anh)"Time" | messagesVi"Thời gian" |
| categorystring | Mặc định (tiếng Anh)"Category" | messagesVi"Danh mục" |
| groupstring | Mặc định (tiếng Anh)"Group" | messagesVi"Nhóm" |
| namestring | Mặc định (tiếng Anh)"Name" | messagesVi"Tên" |
| otherstring Nhóm gộp (DonutChart vượt | Mặc định (tiếng Anh)"Other" | messagesVi"Khác" |
| trendstring Nút bật đường xu hướng của ScatterChart. | Mặc định (tiếng Anh)"Trend" | messagesVi"Xu hướng" |
| increasestring | Mặc định (tiếng Anh)"Increase" | messagesVi"Tăng" |
| decreasestring | Mặc định (tiếng Anh)"Decrease" | messagesVi"Giảm" |
| noChangestring | Mặc định (tiếng Anh)"No change" | messagesVi"Không đổi" |
| brushstring ChartBrush: tên cửa sổ thu phóng, dòng "Đang xem … · n/N mốc", nút đặt lại. | Mặc định (tiếng Anh)"Visible range" | messagesVi"Vùng xem" |
| brushRoleDescriptionstring | Mặc định (tiếng Anh)"zoom window" | messagesVi"cửa sổ thu phóng" |
| brushViewingstring | Mặc định (tiếng Anh)"Showing" | messagesVi"Đang xem" |
| brushPoints(shown: number, total: number) => string | Mặc định (tiếng Anh)(shown, total) => `${shown}/${total} ${total === 1 ? "point" : "points"}` | messagesVi(shown, total) => `${shown}/${total} mốc` |
| brushResetstring | Mặc định (tiếng Anh)"Reset" | messagesVi"Đặt lại" |
| lineSummary(info: { kind: "line" | "area" | "stacked" | "expand"; points: number; /** Mốc đầu / cuối (chỉ có khi points > 0). */ from?: string; to?: string; series: string[]; }) => string Mô tả truy cập tự sinh (khi không truyền | Mặc định (tiếng Anh)Hàm, xem messages.ts | messagesViHàm, xem messages.ts |
| barSummary(info: { horizontal: boolean; stacked: boolean; categories: number; series: string[] }) => string | Mặc định (tiếng Anh)Hàm, xem messages.ts | messagesViHàm, xem messages.ts |
| donutSummary(info: { groups: number; total: string; largest?: { label: string; share: string } }) => string | Mặc định (tiếng Anh)Hàm, xem messages.ts | messagesViHàm, xem messages.ts |
| scatterSummary(info: { points: number; x: string; y: string; /** Tên đại lượng kích thước (biểu đồ bong bóng). */ size?: string; /** Tên các nhóm (khi có nhiều nhóm). */ groups?: string[]; trends: { group?: string; slope: string; r2: string }[]; }) => string | Mặc định (tiếng Anh)Hàm, xem messages.ts | messagesViHàm, xem messages.ts |
| heatmapSummary(info: { rows: number; columns: number; min?: string; max?: string; hasEmpty: boolean }) => string | Mặc định (tiếng Anh)Hàm, xem messages.ts | messagesViHàm, xem messages.ts |
| sparklineSummary(info: { points: number; first: string; last: string; min: string; max: string }) => string | Mặc định (tiếng Anh)Hàm, xem messages.ts | messagesVi({ points, first, last, min, max }) => `Xu hướng ${points} điểm: từ ${first} đến ${last}, thấp nhất ${min}, cao nhất ${max}` |