Bản mẫu:Biểu đồ tròn
 | Bản mẫu này được sử dụng ở rất nhiều trang, vì thế những thay đổi đến nó sẽ hiện ra rõ ràng. Vui lòng thử nghiệm các thay đổi ở trang con /sandbox, /testcases của bản mẫu, hoặc ở không gian người dùng của bạn. Cân nhắc thảo luận các thay đổi tại trang thảo luận trước khi áp dụng sửa đổi. |
 | Bản mẫu này sử dụng Lua: |
 | Bản mẫu này sử dụng TemplateStyles: |
Bản mẫu này vẽ các biểu đồ tròn bằng HTML, CSS và một mô đun Lua. Nó có thể chấp nhận dữ liệu được định dạng theo hai cách:
- Các giá trị liệt kê:
|value1=123 |value2=456(cách cổ điển) hoặc - Một mảng đơn giản:
|1=[{"value":123}, {"value":456}](cách mới, dễ dàng sắp xếp lại)
Cách sử dụng
Bản mẫu này cung cấp một số cách khác nhau để vẽ biểu đồ tròn. Nó có thể chấp nhận dữ liệu dưới dạng các tham số liệt kê (như nhiều bản mẫu vẫn làm). Nó cũng có thể chấp nhận dữ liệu dưới dạng một mảng JSON. Khi đặt biểu đồ tròn, bản mẫu có thể "thả nổi" (float) nó sang một bên của văn bản thân bài (giống như cách định vị hình thu nhỏ). Nó cũng có thể đặt biểu đồ làm nội dung thân bài (giống như cách hầu hết các bảng được định vị).
Tương tác (Hover)
Bản mẫu được thiết kế để hỗ trợ tương tác cơ bản trên máy tính:
- Trên máy tính: Khi người đọc rê chuột (hover) vào một lát cắt bất kỳ trên biểu đồ, một hộp thông tin nhỏ (tooltip) sẽ hiện ra chứa Tên nhãn và Giá trị phần trăm tương ứng.
- Trên di động: Do hạn chế của trình duyệt di động với thuộc tính `title`, việc bấm vào lát cắt có thể không hiện thông tin. Vì vậy, biểu đồ luôn đi kèm với phần Chú giải (Legend) rõ ràng để người đọc dễ dàng tra cứu.
Thumb (thả nổi)
Theo mặc định, bản mẫu tạo ra các biểu đồ dưới dạng hình thu nhỏ (thumbnail) thả nổi bên phải.
Các tham số liệt kê (Cổ điển)
Màu mặc định
Các nhãn, giá trị và màu sắc của các lát cắt có thể được chỉ định. Tất cả các tham số cho sáu lát cắt được bao gồm trong ví dụ dưới đây. Để thêm nhiều lát cắt hơn, hãy sao chép mã cho một dòng hiện có và thay đổi chữ số ở cuối tên mỗi tham số. Sắp xếp các giá trị theo kích thước, từ lớn nhất đến nhỏ nhất. Điều này sẽ sắp xếp các lát cắt của biểu đồ theo chiều kim đồng hồ, với lát cắt lớn nhất ở vị trí 12 giờ.
{{Pie chart| thumb = | radius = | caption= | footer = | label1 = | value1 = | color1 = | label2 = | value2 = | color2 = | label3 = | value3 = | color3 = | label4 = | value4 = | color4 = | label5 = | value5 = | color5 = | other = | other-color = | other-label =}}Giải thích các tham số
|other=(hoặc|khác=): Nếu được khai báo (ví dụ: "yes", "y", "có"), một mục "Khác" sẽ xuất hiện trong chú giải, tương ứng với phần còn thiếu để tổng các giá trị bằng 100%.[1]|other-color=(hoặc|màu khác=): Chỉ định màu cho lát cắt "Khác" (mặc định là màu trắng).[2]|other-label=(hoặc|nhãn khác=): Đổi tên hiển thị mặc định từ "Khác" thành bất kỳ chuỗi nào bạn muốn.|labelN=: Chuỗi văn bản chú thích cho lát cắt thứ N. Nội dung này cũng sẽ hiện ra khi rê chuột vào lát cắt.|valueN=: Giá trị phần trăm của lát cắt thứ N. Chỉ nhập số, không nhập dấu %.|colorN=: Mã màu CSS hoặc tên màu tiếng Anh (ví dụ: `red`, `#00FF00`). Nếu bỏ qua, bản mẫu sẽ tự động chọn màu từ bảng màu mặc định.
Các tham số chung
|thumb=: Mặc định là `right` (phải). Để hiện bên trái, dùng|thumb=left. Để không có khung bao quanh (nội dung thân bài), dùng|thumb=none.|radius=: Bán kính của biểu đồ tính bằng pixel (mặc định là 100). Không cần thêm "px".|caption=(hoặc|chú thích=): Dòng chữ tiêu đề nằm ngay phía trên phần chú giải (legend).|footer=: Dòng chữ nằm dưới cùng của khung biểu đồ.-
|autoscale=true:[3] Tự động quy đổi các giá trị thô thành phần trăm (tổng bằng 100%). Ví dụ: nếu bạn nhập 5 và 15, nó sẽ tự hiểu là 25% và 75%. |legend=true:[3] Hiển thị chú giải. Mặc định là `true` nếu dùng chế độ `thumb`.
Mảng giá trị (JSON)
Đây là cách hiện đại và linh hoạt hơn. Bạn truyền một mảng JSON vào tham số đầu tiên `|1=`.
|1=[]: Chứa mảng các đối tượng. Mỗi đối tượng có `value`, `label`, `color`.- Chỉ có giá trị:
{"value": 1}, - Giá trị và nhãn:
{"label": "đồ uống", "value": 1}, - Màu tùy chỉnh:
{"label": "đồ uống", "value": 1, "color":"#ccf"}
- Chỉ có giá trị:
Ví dụ so sánh sắp xếp dữ liệu:
| Nhiều đến ít | Ít đến nhiều |
|---|---|
Lớn đến nhỏ[4] | Nhỏ đến lớn[5] |
{{Pie chart|[ {"label": "bánh kẹo", "value": 5, "color":"darkred"}, {"label": "bánh mì kẹp", "value": 3, "color":"wheat"}, {"label": "bánh quy", "value": 2, "color":"goldenrod"}, {"label": "đồ uống", "value": 1, "color":"#ccf"},]| autoscale = true| legend = true| thumb = left| radius = 100| caption= Lớn đến nhỏ<ref>Tham khảo hoạt động tốt trong chú thích</ref>| footer = }} | {{Pie chart|[ {"label": "đồ uống", "value": 1, "color":"#ccf"}, {"label": "bánh quy", "value": 2, "color":"goldenrod"}, {"label": "bánh mì kẹp", "value": 3, "color":"wheat"}, {"label": "bánh kẹo", "value": 5, "color":"darkred"},]| autoscale = true| legend = true| thumb = right| radius = 100| caption= Nhỏ đến lớn<ref>Tham khảo hoạt động tốt trong chú thích</ref>| footer = }} |
Nội dung thân bài (Inline)
Sử dụng `thumb=none` để đặt biểu đồ vào giữa nội dung bài viết hoặc trong bảng.
{{Pie chart| [ {"value":25, "label": "thị trấn"}, {"label": "thành phố"},]|thumb=none|legend=true}}Cảnh báo và Lỗi thường gặp
Khi xem trước hoặc lưu trang, bạn có thể thấy các dòng cảnh báo màu đỏ (Script warning) nếu dữ liệu nhập vào có vấn đề. Dưới đây là các lỗi phổ biến và cách khắc phục:
- Script warning: pie chart: Σ (value) = 102%...
- Nguyên nhân: Tổng các giá trị thành phần lớn hơn 100% (ví dụ: 50 + 55 = 105). Điều này thường do lỗi làm tròn số hoặc nhập liệu sai.
- Cách khắc phục:
- Kiểm tra lại các con số đầu vào.
- Nếu bạn đang nhập số liệu thô (ví dụ: dân số, sản lượng...) thay vì phần trăm, hãy thêm tham số
|autoscale=trueđể bản mẫu tự động quy đổi về 100%.
- Script warning: pie chart: Value too small...
- Nguyên nhân: Một trong các giá trị quá nhỏ (thường dưới 0.03%) nên không thể vẽ thành một lát cắt trên biểu đồ.
- Cách khắc phục: Cân nhắc gộp giá trị này vào mục "Khác" (Other) hoặc nhóm lại dữ liệu.
- Script warning: pie chart: Unknown variable...
- Nguyên nhân: Bạn đã nhập sai tên biến định dạng trong tham số
|labelformat=. Ví dụ: gõ nhầm$valvethay vì$value. - Cách khắc phục: Chỉ sử dụng các biến chuẩn:
$label(nhãn),$value(giá trị thô),$percent(phần trăm).
- Expression error... hoặc vỡ giao diện
- Nguyên nhân:
- Nhập ký tự không phải số vào phần giá trị (ví dụ: `value1 = 50%` là sai, chỉ nhập `50`).
- Sai cú pháp khi dùng chế độ mảng JSON (thiếu dấu phẩy `,` giữa các mục hoặc thiếu dấu ngoặc kép `"`).
- Cách khắc phục: Kiểm tra lại cú pháp hoặc chuyển sang dùng chế độ tham số liệt kê cổ điển (`value1`, `label1`...) để dễ quản lý hơn.
Dữ liệu bản mẫu
Dữ liệu bản mẫu cho Biểu đồ tròn
Bản mẫu tạo biểu đồ tròn (Pie Chart) sử dụng Module Lua. Hỗ trợ hiển thị trên di động và màn hình độ phân giải cao.
| Tham số | Miêu tả | Kiểu | Trạng thái | |
|---|---|---|---|---|
| Dữ liệu biểu đồ (Mảng JSON) | 1 | Cách nhập liệu hiện đại. Nhập một mảng JSON chứa các đối tượng. Mỗi đối tượng gồm: value (giá trị), label (nhãn), color (màu). Nếu dùng tham số này, không dùng các tham số value1, label1...
| Chuỗi dài | khuyên dùng |
| Vị trí khung (Thumb) | thumb | Xác định vị trí thả nổi của biểu đồ (giống hình thu nhỏ).
| Chuỗi dài | khuyên dùng |
| Tiêu đề biểu đồ | caption chú thích | Dòng chữ tiêu đề nằm ngay phía trên phần chú giải (Legend). | Chuỗi dài | tùy chọn |
| Hiện chú giải | legend | Hiển thị hoặc ẩn bảng chú giải. Mặc định là 'true' nếu dùng chế độ thumb.
| Luận lý | khuyên dùng |
| Chân trang | footer | Dòng chữ nằm dưới cùng của khung biểu đồ. | Chuỗi dài | tùy chọn |
| Bán kính | radius | Bán kính của hình tròn tính bằng pixel. Không cần nhập 'px'.
| Số | tùy chọn |
| Chiều rộng hộp | width | Chiều rộng của hộp chứa biểu đồ. Thường không cần dùng vì hộp tự co giãn. | Số | tùy chọn |
| Tự động chia tỷ lệ | autoscale | Nếu là 'true', các giá trị thô sẽ được tự động quy đổi thành phần trăm (tổng = 100%). Mặc định kích hoạt nếu tổng giá trị > 100.
| Luận lý | khuyên dùng |
| Hướng bố cục | direction | Vị trí của chú giải so với biểu đồ hình tròn.
| Chuỗi dài | tùy chọn |
| Định dạng nhãn (JSON) | labelformat | Cách hiển thị nhãn khi dùng chế độ JSON. Các biến: $label, $value, $percent.
| Chuỗi dài | tùy chọn |
| Hiện mục 'Khác' | other khác có | Nếu khai báo (ví dụ: yes), sẽ tự động thêm mục 'Khác' vào chú giải cho phần trăm còn thiếu. | Luận lý | tùy chọn |
| Nhãn cho mục 'Khác' | other-label nhãn khác | Tên hiển thị thay thế cho chữ 'Khác' mặc định. | Chuỗi dài | tùy chọn |
| Màu cho mục 'Khác' | other-color màu khác | Màu sắc của lát cắt 'Khác'. | Chuỗi dài | tùy chọn |
| Giá trị 1 | value1 | Giá trị phần trăm của lát cắt 1. | Số | tùy chọn |
| Nhãn 1 | label1 | Tên hiển thị của lát cắt 1. | Chuỗi dài | tùy chọn |
| Màu 1 | color1 | Màu sắc của lát cắt 1. | Chuỗi dài | tùy chọn |
| Giá trị 2 | value2 | không có miêu tả | Số | tùy chọn |
| Nhãn 2 | label2 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 2 | color2 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 3 | value3 | không có miêu tả | Số | tùy chọn |
| Nhãn 3 | label3 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 3 | color3 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 4 | value4 | không có miêu tả | Số | tùy chọn |
| Nhãn 4 | label4 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 4 | color4 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 5 | value5 | không có miêu tả | Số | tùy chọn |
| Nhãn 5 | label5 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 5 | color5 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 6 | value6 | không có miêu tả | Số | tùy chọn |
| Nhãn 6 | label6 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 6 | color6 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 7 | value7 | không có miêu tả | Số | tùy chọn |
| Nhãn 7 | label7 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 7 | color7 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 8 | value8 | không có miêu tả | Số | tùy chọn |
| Nhãn 8 | label8 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 8 | color8 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 9 | value9 | không có miêu tả | Số | tùy chọn |
| Nhãn 9 | label9 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 9 | color9 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 10 | value10 | không có miêu tả | Số | tùy chọn |
| Nhãn 10 | label10 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 10 | color10 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 11 | value11 | không có miêu tả | Số | tùy chọn |
| Nhãn 11 | label11 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 11 | color11 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 12 | value12 | không có miêu tả | Số | tùy chọn |
| Nhãn 12 | label12 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 12 | color12 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 13 | value13 | không có miêu tả | Số | tùy chọn |
| Nhãn 13 | label13 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 13 | color13 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 14 | value14 | không có miêu tả | Số | tùy chọn |
| Nhãn 14 | label14 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 14 | color14 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 15 | value15 | không có miêu tả | Số | tùy chọn |
| Nhãn 15 | label15 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 15 | color15 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 16 | value16 | không có miêu tả | Số | tùy chọn |
| Nhãn 16 | label16 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 16 | color16 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 17 | value17 | không có miêu tả | Số | tùy chọn |
| Nhãn 17 | label17 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 17 | color17 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 18 | value18 | không có miêu tả | Số | tùy chọn |
| Nhãn 18 | label18 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 18 | color18 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 19 | value19 | không có miêu tả | Số | tùy chọn |
| Nhãn 19 | label19 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 19 | color19 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 20 | value20 | không có miêu tả | Số | tùy chọn |
| Nhãn 20 | label20 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 20 | color20 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 21 | value21 | không có miêu tả | Số | tùy chọn |
| Nhãn 21 | label21 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 21 | color21 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 22 | value22 | không có miêu tả | Số | tùy chọn |
| Nhãn 22 | label22 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 22 | color22 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 23 | value23 | không có miêu tả | Số | tùy chọn |
| Nhãn 23 | label23 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 23 | color23 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 24 | value24 | không có miêu tả | Số | tùy chọn |
| Nhãn 24 | label24 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 24 | color24 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 25 | value25 | không có miêu tả | Số | tùy chọn |
| Nhãn 25 | label25 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 25 | color25 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 26 | value26 | không có miêu tả | Số | tùy chọn |
| Nhãn 26 | label26 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 26 | color26 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 27 | value27 | không có miêu tả | Số | tùy chọn |
| Nhãn 27 | label27 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 27 | color27 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 28 | value28 | không có miêu tả | Số | tùy chọn |
| Nhãn 28 | label28 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 28 | color28 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 29 | value29 | không có miêu tả | Số | tùy chọn |
| Nhãn 29 | label29 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 29 | color29 | không có miêu tả | Chuỗi dài | tùy chọn |
| Giá trị 30 | value30 | không có miêu tả | Số | tùy chọn |
| Nhãn 30 | label30 | không có miêu tả | Chuỗi dài | tùy chọn |
| Màu 30 | color30 | không có miêu tả | Chuỗi dài | tùy chọn |
Xem thêm
- {{Brick chart}}
- {{Composition bar}}
- {{Bar chart}}
- Mô đun:Chart
- ↑ Nếu tổng của tất cả các giá trị lớn hơn 100%, sẽ không có lát cắt cuối cùng nào được thêm vào và mục "Khác" sẽ không hiện ra.
- ↑ Màu web có thể được chỉ định bằng tên hoặc giá trị hex.
- 1 2 Thay vì
true, bạn có thể dùngyes,on, hoặc1. - ↑ Tham khảo hoạt động tốt trong chú thích
- ↑ Tham khảo hoạt động tốt trong chú thích
- Bản mẫu sử dụng TemplateStyles
- Bản mẫu hàm và định dạng đồ họa và sơ đồ, biểu đồ
- Bản mẫu sử dụng Module Lua