RacePie
Biểu đồ tròn động (Race Pie Chart)
Phù hợp để hiển thị mối quan hệ tỷ lệ của dữ liệu thay đổi theo thời gian; diện tích hình quạt biểu thị tỷ lệ của từng danh mục
Tình huống áp dụng:
- Hiển thị sự thay đổi phân bố tỷ lệ của dữ liệu phân loại theo thời gian
- Nhấn mạnh sự phát triển của mối quan hệ tổng thể và từng phần trên chiều thời gian
- Quan sát biến động tỷ lệ của các danh mục khác nhau trong tổng thể
Biểu đồ tròn động:
- Góc ánh xạ giá trị chỉ số, màu ánh xạ giá trị chiều
- Hỗ trợ điều khiển chiều thời gian bằng trình phát để hiển thị động sự thay đổi tỷ lệ
- Diện tích hình quạt điều chỉnh động theo thay đổi của dữ liệu
chartType
Type: "racePie"
Biểu đồ tròn động, phù hợp để hiển thị mối quan hệ tỷ lệ của dữ liệu thay đổi theo thời gian
dataset
Type: Record[]
Nguồn dữ liệu
dimensions
Type: RacePieDimension[] | undefined
Chiều
id
Type: string
ID trường tương ứng với chiều
alias
Type: string | undefined
Bí danh chiều
timeFormat
Type: TimeFormat | undefined
Cấu hình định dạng ngày của chiều
type
Type: "year" | "quarter" | "month" | "week" | "day" | "hour" | "minute" | "second"
Độ hạt thời gian, quyết định độ chính xác khi hiển thị ngày
encoding
Type: "color" | "detail" | "tooltip" | "label" | "row" | "column" | "player" | undefined
Kênh mà chiều được ánh xạ tới
- color: hỗ trợ ánh xạ nhiều chiều tới kênh màu
- detail: hỗ trợ ánh xạ nhiều chiều tới kênh chi tiết
- tooltip: hỗ trợ ánh xạ nhiều chiều vào kênh tooltip
- label: hỗ trợ ánh xạ nhiều chiều vào kênh nhãn
- row: hỗ trợ ánh xạ nhiều chiều tới kênh hàng
- column: hỗ trợ ánh xạ nhiều chiều tới kênh cột
- player: hỗ trợ ánh xạ nhiều chiều vào kênh trình phát
measures
Type: PieMeasure[] | undefined
Chỉ số
id
Type: string
ID chỉ số, không được trùng lặp
alias
Type: string | undefined
Bí danh chỉ số, cho phép trùng lặp; nếu không đặt, alias mặc định là id
autoFormat
Type: boolean | undefined
Định dạng số tự động, bật mặc định, có độ ưu tiên cao nhất
Khi autoFormat=true, toàn bộ cấu hình numFormat sẽ bị ghi đè
Khi bật, nhãn dữ liệu và tooltip của biểu đồ sẽ tự động chọn định dạng phù hợp theo giá trị chỉ số và locale
Quy tắc định dạng: số thập phân bật compact notation, tối thiểu 0 chữ số thập phân, tối đa 2 chữ số thập phân, tự động làm tròn, dùng Intl.NumberFormat của trình duyệt
Ví dụ:
- locale=zh-CN: 749740.264 → 74.45万
- locale=en-US: 749740.264 → 744.5K
numFormat
Type: NumFormat | undefined
Định dạng số tùy chỉnh cho chỉ số; tự động áp dụng cho nhãn và tooltip
Lưu ý: để dùng định dạng tùy chỉnh, cần đặt rõ autoFormat=false; nếu không autoFormat sẽ ghi đè cấu hình này
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
Kiểu định dạng số, hỗ trợ: số (thập phân), phần trăm (%), phần nghìn (‰), ký hiệu khoa học
ratio
Type: number | undefined
Tỷ lệ định dạng số, không được là 0
Ví dụ - 100000 chuyển thành 10万, ratio:10000, symbol:"万" - 100000 được chuyển thành 10K, ratio:1000, symbol:"K"
symbol
Type: string | undefined
Ký hiệu định dạng số, ví dụ %, ‰
Ví dụ - 100000 chuyển thành 10万, ratio:10000, symbol:"万" - 100000 được chuyển thành 10K, ratio:1000, symbol:"K"
thousandSeparator
Type: boolean | undefined
Dấu phân tách hàng nghìn cho định dạng số
suffix
Type: string | undefined
Hậu tố định dạng số
prefix
Type: string | undefined
Tiền tố định dạng số
fractionDigits
Type: number | undefined
Số chữ số thập phân cho định dạng số, dùng minimumFractionDigits và maximumFractionDigits của Intl.NumberFormat trong trình duyệt; ưu tiên thấp hơn significantDigits
Ví dụ - 1234.5678 được chuyển thành 1235 , fractionDigits:0 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.6 , fractionDigits:1 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.57 , fractionDigits:2 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1230.568 , fractionDigits:3 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.5678 , fractionDigits:4 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.56780 , fractionDigits:5 (roundingMode:halfCeil)
significantDigits
Type: number | undefined
Chữ số có nghĩa cho định dạng số, dùng minimumSignificantDigits và maximumSignificantDigits của Intl.NumberFormat trong trình duyệt; ưu tiên cao hơn fractionDigits
Ví dụ - 1234.5678 được chuyển thành 1000 , significantDigits:1 - 1234.5678 được chuyển thành 1200 , significantDigits:2 - 1234.5678 được chuyển thành 1230 , significantDigits:3 - 1234.5678 được chuyển thành 1234 , significantDigits:4 - 1234.5678 được chuyển thành 1234.6 , significantDigits:5 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.57 , significantDigits:6 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.568 , significantDigits:7 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.5678 , significantDigits:8 (roundingMode:halfCeil)
roundingPriority
Type: "morePrecision" | "lessPrecision" | undefined
Ưu tiên làm tròn khi cả significantDigits và fractionDigits đều được đặt; dùng Intl.NumberFormat của trình duyệt và tuân theo quy tắc giống roundingPriority
Ví dụ - 1234.5678 được chuyển thành 1230 , significantDigits:3 (roundingPriority:lessPrecision) - 1234.5678 được chuyển thành 1234.5678 , significantDigits:3 (roundingPriority:morePrecision)
roundingMode
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
Chế độ làm tròn cho định dạng số, dùng Intl.NumberFormat của trình duyệt và tuân theo quy tắc giống roundingMode
format
Type: NumFormat | undefined
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
Kiểu định dạng số, hỗ trợ: số (thập phân), phần trăm (%), phần nghìn (‰), ký hiệu khoa học
ratio
Type: number | undefined
Tỷ lệ định dạng số, không được là 0
Ví dụ - 100000 chuyển thành 10万, ratio:10000, symbol:"万" - 100000 được chuyển thành 10K, ratio:1000, symbol:"K"
symbol
Type: string | undefined
Ký hiệu định dạng số, ví dụ %, ‰
Ví dụ - 100000 chuyển thành 10万, ratio:10000, symbol:"万" - 100000 được chuyển thành 10K, ratio:1000, symbol:"K"
thousandSeparator
Type: boolean | undefined
Dấu phân tách hàng nghìn cho định dạng số
suffix
Type: string | undefined
Hậu tố định dạng số
prefix
Type: string | undefined
Tiền tố định dạng số
fractionDigits
Type: number | undefined
Số chữ số thập phân cho định dạng số, dùng minimumFractionDigits và maximumFractionDigits của Intl.NumberFormat trong trình duyệt; ưu tiên thấp hơn significantDigits
Ví dụ - 1234.5678 được chuyển thành 1235 , fractionDigits:0 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.6 , fractionDigits:1 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.57 , fractionDigits:2 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1230.568 , fractionDigits:3 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.5678 , fractionDigits:4 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.56780 , fractionDigits:5 (roundingMode:halfCeil)
significantDigits
Type: number | undefined
Chữ số có nghĩa cho định dạng số, dùng minimumSignificantDigits và maximumSignificantDigits của Intl.NumberFormat trong trình duyệt; ưu tiên cao hơn fractionDigits
Ví dụ - 1234.5678 được chuyển thành 1000 , significantDigits:1 - 1234.5678 được chuyển thành 1200 , significantDigits:2 - 1234.5678 được chuyển thành 1230 , significantDigits:3 - 1234.5678 được chuyển thành 1234 , significantDigits:4 - 1234.5678 được chuyển thành 1234.6 , significantDigits:5 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.57 , significantDigits:6 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.568 , significantDigits:7 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.5678 , significantDigits:8 (roundingMode:halfCeil)
roundingPriority
Type: "morePrecision" | "lessPrecision" | undefined
Ưu tiên làm tròn khi cả significantDigits và fractionDigits đều được đặt; dùng Intl.NumberFormat của trình duyệt và tuân theo quy tắc giống roundingPriority
Ví dụ - 1234.5678 được chuyển thành 1230 , significantDigits:3 (roundingPriority:lessPrecision) - 1234.5678 được chuyển thành 1234.5678 , significantDigits:3 (roundingPriority:morePrecision)
roundingMode
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
Chế độ làm tròn cho định dạng số, dùng Intl.NumberFormat của trình duyệt và tuân theo quy tắc giống roundingMode
encoding
Type: "color" | "tooltip" | "label" | "angle" | undefined
Kênh mà chỉ số được ánh xạ tới
- angle: góc mà chỉ số được ánh xạ tới
- color: chỉ số được ánh xạ tới kênh màu
- label: chỉ số được ánh xạ vào kênh nhãn
- tooltip: chỉ số được ánh xạ vào kênh tooltip
parentId
Type: string | undefined
Ở dạng cấu hình chỉ số phẳng, xây dựng nhóm chỉ số dạng cây. parentId trỏ tới id của nhóm chỉ số cha và dùng để xây dựng cây chỉ số
Có hai cách cấu hình cây chỉ số: Cách 1 cấu hình trực tiếp cây chỉ số với children; Cách 2 cấu hình danh sách chỉ số phẳng với parentId. Hai cách này không thể dùng đồng thời
page
Type: Page | undefined
Cấu hình phân trang, dùng để chỉ định tên trường phân trang và trường đó bắt buộc phải là chiều.
field
Type: string
Trường phân trang; chỉ định tên trường dùng cho phân trang và phải là một chiều
currentValue
Type: string
Giá trị phân trang hiện tại; chỉ định giá trị dùng để xác định trang hiện tại
Ví dụ '2023-01-01'
player
Type: Player | undefined
Cấu hình trình phát để chỉ định chiều thời gian; cấu hình cốt lõi của biểu đồ tròn động
Cấu hình trình phát, dùng để chỉ định tên trường phát, bắt buộc là chiều
Tính năng này không hỗ trợ các loại biểu đồ như table, pivotTable, dualAxis, histogram, boxPlot, và không hỗ trợ sử dụng khi bật tổ hợp chỉ số hoặc pivot hàng/cột
maxCount
Type: number | false | undefined
Số lượng phát tối đa; dữ liệu vượt quá số này sẽ bị cắt, đặt false nghĩa là không giới hạn
interval
Type: number | undefined
Khoảng thời gian phát, đơn vị ms
autoPlay
Type: boolean | undefined
Có tự động phát hay không
loop
Type: boolean | undefined
Có phát lặp hay không
position
Type: "left" | "top" | "right" | "bottom" | undefined
Vị trí trình phát
railColor
Type: string | undefined
Màu track thanh tiến trình của trình phát
fontFamily
Type: string | undefined
Phông chữ văn bản trình phát
fontSize
Type: number | undefined
Cỡ chữ văn bản trình phát
trackColor
Type: string | undefined
Màu tiến trình của thanh tiến trình trình phát
sliderHandleColor
Type: string | undefined
Màu thanh trượt của thanh tiến trình trình phát
sliderHandleBorderColor
Type: string | undefined
Màu viền thanh trượt của thanh tiến trình trình phát
startButtonColor
Type: string | undefined
Màu nút bắt đầu của trình phát
pauseButtonColor
Type: string | undefined
Màu nút tạm dừng của trình phát
backwardButtonColor
Type: string | undefined
Màu nút lùi của trình phát
forwardButtonColor
Type: string | undefined
Màu nút tiến của trình phát
backgroundColor
Type: BackgroundColor
Màu nền biểu đồ
Màu nền có thể là chuỗi màu (ví dụ 'red', 'blue') hoặc giá trị hex, rgb, rgba (ví dụ '#ff0000', 'rgba(255,0,0,0.5)')
color
Type: Color | undefined
Màu
colorScheme
Type: string[] | undefined
Bảng màu rời rạc, dùng để định nghĩa màu của các phần tử khác nhau trong biểu đồ
Ví dụ ['#FFCDD2,#F8BBD0,#E1BEE7,#D1C4E9,#C5CAE9,#BBDEFB,#B3E5FC,#B2EBF2,#B2DFDB,#C8E6C9,#DCEDC8,#F0F4C3,#FFF9C4,#FFECB3,#FFE0B2']
linearColorScheme
Type: string[] | undefined
Bảng màu gradient tuyến tính, dùng để định nghĩa màu của các phần tử khác nhau trong biểu đồ
Ví dụ ['#FFCDD2, #F8BBD0]
colorMapping
Type: Record<string, string> | undefined
Ánh xạ màu, dùng để ánh xạ giá trị dữ liệu tới màu cụ thể
Ví dụ { 'profit': 'red', 'sales': 'blue', }
positiveColor
Type: string | undefined
Cấu hình màu dương/âm, dùng để định nghĩa màu cho giá trị dương trong biểu đồ
negativeColor
Type: string | undefined
Cấu hình màu dương/âm, dùng để định nghĩa màu cho giá trị âm trong biểu đồ
label
Type: PieLabel | undefined
Cấu hình nhãn dùng để định nghĩa nhãn dữ liệu biểu đồ, bao gồm vị trí, định dạng và kiểu.
enable
Type: false | true
Có bật nhãn hay không
wrap
Type: boolean | undefined
Có cho nhãn xuống dòng hay không
showValue
Type: boolean | undefined
Có hiển thị giá trị chỉ số trên nhãn hay không
Trong tình huống có nhiều chỉ số, không cần lo các giá trị mâu thuẫn với nhau, vì mọi chỉ số liên quan đến việc vẽ đều được xử lý qua foldMeasures và gộp thành một chỉ số đại diện cho một điểm dữ liệu.
Lưu ý: encoding.label có độ ưu tiên cao hơn; cấu hình này không ảnh hưởng đến encoding.label
showValuePercent
Type: boolean | undefined
Có hiển thị phần trăm giá trị chỉ số trên nhãn hay không
Trong tình huống có nhiều chỉ số, không cần lo các giá trị mâu thuẫn với nhau, vì mọi chỉ số liên quan đến việc vẽ đều được xử lý qua foldMeasures và gộp thành một chỉ số đại diện cho một điểm dữ liệu.
Lưu ý: encoding.label có độ ưu tiên cao hơn; cấu hình này không ảnh hưởng đến encoding.label
showDimension
Type: boolean | undefined
Có hiển thị nhãn chiều hay không
Hiển thị tất cả nhãn chiều
Lưu ý: encoding.label có độ ưu tiên cao hơn; cấu hình này không ảnh hưởng đến encoding.label
autoFormat
Type: boolean | undefined
Có tự động định dạng giá trị nhãn hay không. Khi autoFormat là true, cấu hình numFormat sẽ không có hiệu lực
numFormat
Type: NumFormat | undefined
Cấu hình định dạng giá trị nhãn. Cấu hình này được gộp với format trong measure; format trong measure có độ ưu tiên cao hơn. numFormat có độ ưu tiên thấp hơn autoFormat
type
Type: "number" | "percent" | "permille" | "scientific" | undefined
Loại định dạng số. Hỗ trợ số (thập phân), phần trăm (%), phần nghìn (‰) và ký pháp khoa học
ratio
Type: number | undefined
Tỷ lệ định dạng số, không được bằng 0
Ví dụ - 100000 được chuyển thành 10K, ratio:1000, symbol:"K"
symbol
Type: string | undefined
Ký hiệu định dạng số, ví dụ % hoặc ‰
Ví dụ - 100000 được chuyển thành 10K, ratio:1000, symbol:"K"
thousandSeparator
Type: boolean | undefined
Dấu phân tách hàng nghìn cho định dạng số
suffix
Type: string | undefined
Hậu tố định dạng số
prefix
Type: string | undefined
Tiền tố định dạng số
fractionDigits
Type: number | undefined
Số chữ số thập phân khi định dạng số, dùng minimumFractionDigits và maximumFractionDigits của Intl.NumberFormat trình duyệt. Có độ ưu tiên thấp hơn significantDigits
Ví dụ - 1234.5678 được chuyển thành 1234.6 , fractionDigits:1 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.57 , fractionDigits:2 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1230.568 , fractionDigits:3 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.5678 , fractionDigits:4 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.56780 , fractionDigits:5 (roundingMode:halfCeil)
significantDigits
Type: number | undefined
Số chữ số có nghĩa khi định dạng số, dùng minimumSignificantDigits và maximumSignificantDigits của Intl.NumberFormat trình duyệt. Có độ ưu tiên cao hơn fractionDigits
Ví dụ - 1234.5678 được chuyển thành 1200 , significantDigits:2 - 1234.5678 được chuyển thành 1230 , significantDigits:3 - 1234.5678 được chuyển thành 1234 , significantDigits:4 - 1234.5678 được chuyển thành 1234.6 , significantDigits:5 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.57 , significantDigits:6 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.568 , significantDigits:7 (roundingMode:halfCeil) - 1234.5678 được chuyển thành 1234.5678 , significantDigits:8 (roundingMode:halfCeil)
roundingPriority
Type: "morePrecision" | "lessPrecision" | undefined
Độ ưu tiên làm tròn khi đồng thời đặt significantDigits và fractionDigits, dùng Intl.NumberFormat của trình duyệt với cùng quy tắc như roundingPriority của Intl.NumberFormat
Ví dụ - 1234.5678 được chuyển thành 1234.5678 , significantDigits:3 (roundingPriority:morePrecision)
roundingMode
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
Chế độ làm tròn khi định dạng số, dùng Intl.NumberFormat của trình duyệt với cùng quy tắc như roundingMode của Intl.NumberFormat
labelFontSize
Type: number | undefined
Cỡ chữ nhãn
labelFontWeight
Type: string | number | undefined
Độ đậm chữ nhãn
labelBackgroundColor
Type: string | undefined
Màu nền nhãn
labelStroke
Type: string | undefined
Màu viền chữ nhãn
labelColor
Type: string | undefined
Màu chữ nhãn
labelColorSmartInvert
Type: boolean | undefined
Có tự động đảo màu chữ nhãn theo màu mark hay không
labelPosition
Type: "inside" | "outside" | undefined
Vị trí nhãn
labelOverlap
Type: boolean | undefined
Có bật chống chồng lấn nhãn hay không
selector
Type: Selector | Selectors | undefined
Bộ lọc nhãn. Mặc định quan hệ điều kiện giữa các selectors là OR
field
Type: string
Trường chiều, là id của một mục trong dimensions
operator
Type: "in" | "not in" | undefined
Toán tử
- in: chọn các mục dữ liệu có giá trị trường chiều nằm trong value
- not in: chọn các mục dữ liệu có giá trị trường chiều không nằm trong value
op
Type: "in" | "not in" | undefined
Toán tử
- in: chọn các mục dữ liệu có giá trị trường chiều nằm trong value
- not in: chọn các mục dữ liệu có giá trị trường chiều không nằm trong value
giống operator
value
Type: string | number | (string | number)[]
Chọn giá trị của trường chiều trong mục dữ liệu. Hỗ trợ mảng
dynamicFilter
Type: ChartDynamicFilter | undefined
Bộ lọc động (thực thi mã do AI tạo)
Triển khai logic lọc dữ liệu phức tạp bằng mã JavaScript do AI tạo
Năng lực chính:
- Hỗ trợ điều kiện lọc dữ liệu phức tạp tùy ý
- Sử dụng hàm tiện ích tích hợp để thao tác dữ liệu
- Thực thi an toàn trong môi trường trình duyệt (sandbox Web Worker)
Yêu cầu môi trường: chỉ hỗ trợ môi trường trình duyệt; môi trường Node.js sẽ dùng fallback
Lưu ý: selector và dynamicFilter không thể dùng đồng thời. dynamicFilter có độ ưu tiên cao hơn
Cấu hình bộ lọc động của biểu đồ
Dùng mã JavaScript do AI tạo để lọc các mark của biểu đồ (cột, điểm, v.v.)
type
Type: "row-with-field"
description
Type: string | undefined
Mô tả yêu cầu lọc của người dùng (ngôn ngữ tự nhiên)
Ví dụ "Tô sáng các cột có doanh số lớn hơn 1000"
"Tô sáng cột có tỷ suất lợi nhuận cao nhất trong từng khu vực"
code
Type: string
Mã lọc JavaScript do AI tạo
- Chỉ được dùng các hàm tiện ích tích hợp (truy cập qua _ hoặc R)
- Tham số đầu vào: data (mảng), mỗi item chứa trường __row_index biểu thị số dòng
- Phải trả về mảng tổ hợp chỉ mục dòng và trường: Array<{ __row_index: number, field: string }>
- __row_index là số dòng của mục dữ liệu gốc, field là trường cần highlight
- Cấm dùng: eval, Function, thao tác bất đồng bộ, DOM API, yêu cầu mạng
Ví dụ return _.map(filtered, item => ({
const maxItems = _.map(grouped, group =>
const profitRate = item.profit / item.sales;
fallback
Type: Selector | Selectors | undefined
Phương án fallback khi thực thi mã thất bại hoặc môi trường không hỗ trợ
field
Type: string
Trường chiều, là id của một mục trong dimensions
operator
Type: "in" | "not in" | undefined
Toán tử
- in: chọn các mục dữ liệu có giá trị trường chiều nằm trong value
- not in: chọn các mục dữ liệu có giá trị trường chiều không nằm trong value
op
Type: "in" | "not in" | undefined
Toán tử
- in: chọn các mục dữ liệu có giá trị trường chiều nằm trong value
- not in: chọn các mục dữ liệu có giá trị trường chiều không nằm trong value
giống operator
value
Type: string | number | (string | number)[]
Chọn giá trị của trường chiều trong mục dữ liệu. Hỗ trợ mảng
result
Type: DynamicFilterExecutionResult<RowWithFieldRes> | undefined
Kết quả thực thi bộ lọc động (trường runtime)
Được ghi ở giai đoạn prepare(); chỉ đọc khi runtime
success
Type: false | true
data
Type: T[] | undefined
error
Type: string | undefined
labelLayout
Type: "arc" | "labelLine" | "edge" | undefined
Cách bố trí nhãn, chỉ có hiệu lực với biểu đồ tròn và donut khi labelPosition là outside
- arc: bố trí nhãn theo dạng cung
- labelLine: căn hai đầu nhãn và kết nối phần tử hình quạt với nhãn bằng đường dẫn
- edge: căn hai đầu nhãn, kết nối phần tử hình quạt với nhãn bằng đường dẫn và đặt gần hai mép biểu đồ
legend
Type: Legend | undefined
Chú giải
Cấu hình chú giải dùng để định nghĩa chú giải của biểu đồ, bao gồm vị trí, định dạng và kiểu hiển thị.
enable
Type: boolean | undefined
Có bật chú giải hay không
Ví dụ enable: true
border
Type: boolean | undefined
Có bật viền chú giải hay không
Chỉ có hiệu lực với chú giải rời rạc
Ví dụ
labelColor
Type: string | undefined
Màu chữ chú giải
pagerIconColor
Type: string | undefined
Màu icon phân trang
pagerIconDisableColor
Type: string | undefined
Màu icon phân trang khi bị vô hiệu hóa
labelFontSize
Type: number | undefined
Cỡ chữ chú giải
Ví dụ
labelFontColor
Type: string | undefined
Màu chữ chú giải
labelFontWeight
Type: string | number | undefined
Độ đậm chữ chú giải
Ví dụ
shapeType
Type: "circle" | "cross" | "diamond" | "square" | "arrow" | "arrow2Left" | "arrow2Right" | "wedge" | "thinTriangle" | "triangle" | "triangleUp" | "triangleDown" | "triangleRight" | "triangleLeft" | "stroke" | "star" | "wye" | "rect" | "arrowLeft" | "arrowRight" | "rectRound" | "roundLine" | undefined
Hình dạng chú giải
Chỉ có hiệu lực với chú giải rời rạc
Ví dụ
position
Type: "left" | "leftTop" | "leftBottom" | "lt" | "lb" | "top" | "topLeft" | "topRight" | "tl" | "tr" | "right" | "rightTop" | "rightBottom" | "rt" | "rb" | "bottom" | "bottomLeft" | "bottomRight" | "bl" | "br" | undefined
Vị trí chú giải
Ví dụ
maxSize
Type: number | undefined
Số cột tối đa hoặc số hàng tối đa khi có nhiều mục chú giải
Nếu position theo hướng ngang (bottom, bottomLeft, bottomRight, bl, br, top, topLeft, topRight, tl, tr), maxSize kiểm soát số cột hiển thị
Nếu position theo hướng dọc (left, leftTop, leftBottom, lt, lb, right, rightTop, rightBottom, rt, rb), maxSize kiểm soát số hàng hiển thị
Chỉ có hiệu lực với chú giải rời rạc
Ví dụ
tooltip
Type: Tooltip | undefined
Có bật chọn brush hay không
enable
Type: false | true
Có bật tooltip hay không
brush
Type: Brush | undefined
Chế độ chọn brush: đơn hoặc nhiều
enable
Type: boolean | undefined
Có bật chọn vùng bằng brush hay không
brushType
Type: "rect" | "x" | "y" | "polygon" | undefined
Loại brush
Định nghĩa hình dạng khung chọn và hướng chọn.
- rect: chọn vùng hình chữ nhật, có thể chọn đồng thời theo cả trục X và trục Y
- polygon: chọn vùng đa giác, vẽ đa giác tự do bằng cách nhấp nhiều điểm
- x: chọn theo hướng trục X, chỉ chọn theo hướng X và không giới hạn hướng Y
- y: chọn theo hướng trục Y, chỉ chọn theo hướng Y và không giới hạn hướng X
brushMode
Type: "single" | "multiple" | undefined
Độ mờ of selected data points, range 0-1
removeOnClick
Type: boolean | undefined
Có xóa vùng brush sau khi chọn xong hay không
inBrushStyle
Type: { opacity?: number; stroke?: string; lineWidth?: number; } | undefined
Kiểu dữ liệu nằm trong vùng brush
Định nghĩa kiểu của các điểm dữ liệu được chọn
opacity
Type: number | undefined
Độ mờ
Độ mờ của các điểm dữ liệu được chọn, phạm vi giá trị 0-1
stroke
Type: string | undefined
Màu nét viền
lineWidth
Type: number | undefined
Độ rộng nét viền
outOfBrushStyle
Type: { opacity?: number; stroke?: string; lineWidth?: number; } | undefined
Trục X, trục phân loại, cấu hình trục X; định nghĩa trục X của biểu đồ, bao gồm vị trí, định dạng, kiểu dáng, v.v.
opacity
Type: number | undefined
- 100000 chuyển thành 10万, ratio:10000, symbol:"万"
stroke
Type: string | undefined
Màu nét viền
lineWidth
Type: number | undefined
Độ rộng nét viền
theme
Type: Theme | undefined
Cấu hình theme
Theme
Có hai theme tích hợp là light và dark; theme mới có thể được tùy chỉnh thông qua registerTheme.
length
Type: number
brand
Type: brand
locale
Type: "zh-CN" | "en-US" | "ja-JP" | "de-DE" | "id-ID" | "fr-FR" | "ko-KR" | "vi-VN" | undefined
Ngôn ngữ
Cấu hình ngôn ngữ biểu đồ, hỗ trợ hai ngôn ngữ 'zh-CN' và 'en-US'; ngoài ra có thể gọi phương thức intl.setLocale('zh-CN') để đặt ngôn ngữ