Biểu đồ vòng cung

Composition

"Mỗi chỉ số đang ở đâu, trên cùng một thang đo?" Biểu đồ vòng cung trả lời bằng các vòng đồng tâm, từ ngoài vào trong: mỗi vòng quét value / max của một vòng tròn đầy đủ, theo chiều kim đồng hồ từ vị trí 12 giờ, trên một rãnh nền. Di chuột lên một vòng sẽ kích hoạt nó (nhấn mạnh + phần hiển thị trung tâm tích hợp); defaultActive chọn vòng hiển thị mặc định, và vòng có giá trị null chỉ vẽ rãnh nền - "không có dữ liệu" mà không ẩn biểu đồ.

Example

canvas · responsive

Tìm hiểu thêm: Hướng dẫn Insights·Hướng dẫn DevTools

Hầu như mọi thứ đều cấu hình được: độ dày và khoảng cách vòng, màu và độ mờ rãnh theo từng vòng, góc bắt đầu, đầu bo tròn, độ mờ cung theo từng vòng (thiết kế một màu), và phần trung tâm - thay hoàn toàn bằng centerContent, hoặc tắt bằng showCenterLabel: false và tự điều khiển lớp phủ qua onHighlightItem:

Example

canvas · responsive

Tìm hiểu thêm: Hướng dẫn Insights·Hướng dẫn DevTools

Các vòng dùng chung một thang đo (max, mặc định 100). Với các giá trị khác thang đo, hãy chuẩn hoá trước - hoặc dùng biểu đồ thanh so sánh, đọc giá trị tuyệt đối chính xác hơn.

Nửa biểu đồ vòng cung và dải màu chuyển sắc

sweepAngle thu hẹp biểu đồ từ một vòng tròn đầy đủ thành một cung, theo chiều kim đồng hồ từ startAngle; gradient thay màu đặc của một vòng bằng dải màu chuyển sắc tuyến tính nhiều điểm dừng. Nửa biểu đồ vòng cung kinh điển là startAngle: -90, sweepAngle: 180:

Example

canvas · responsive

Tìm hiểu thêm: Hướng dẫn Insights·Hướng dẫn DevTools

Hai điều dễ hiểu sai khi đọc lần đầu:

• Rãnh nền cũng quét theo góc quét. Rãnh nền của nửa biểu đồ là một nửa vòng tròn, không phải vòng tròn đầy đủ - sweepAngle rút ngắn cả rãnh nền lẫn cung giá trị cùng nhau, nên không có "nửa còn lại" nào bị ẩn lộ ra.
• Dải màu chuyển sắc được neo theo toàn bộ góc quét, không theo phần được vẽ. Một màu nhất định luôn ứng với cùng một giá trị, không phải cùng một vị trí trên cung thực tế được vẽ - vì vậy một biểu đồ đầy một nửa sẽ hiển thị nửa đầu của dải màu, chứ không phải toàn bộ dải màu bị nén vào nửa đó. gradient riêng của một vòng sẽ ghi đè lên gradient ở cấp biểu đồ.

Khi nào nên dùng

• Thị phần lồng nhau. Thị phần của một sản phẩm trên các phạm vi lồng nhau (thế giới, khu vực, thị trường) trong một hình gọn.
• Vòng tiến độ / KPI. Kiểu vòng hoạt động: một màu với các mức độ mờ theo vòng, roundedCaps, và phần trung tâm tuỳ chỉnh.

Trình kết xuất

renderer: "svg" (mặc định), "canvas" (cùng các vòng trên canvas 2D; CSS của bên dùng vẫn tới được các cung qua đầu dò màu), hoặc "webgpu" Thử nghiệm (dải vành khuyên trên GPU; tạm dùng canvas cho tới khi thiết bị sẵn sàng).