Bản mẫu:Biểu đồ tròn/doc

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:Biểu đồ tròn/doc

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

  #1b7837 (7.7%)

  #7fbf7b (7.7%)

  #d9f0d3 (7.7%)

  #762a83 (7.7%)

  #af8dc3 (7.7%)

  #e7d4e8 (7.7%)

  #d73027 (7.7%)

  #fc8d59 (7.7%)

  #fee090 (7.7%)

  #4575b4 (7.7%)

  #91bfdb (7.7%)

  #e0f3f8 (7.7%)

  Khác (7.6%)

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%.
• |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).
• |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: 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: 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"}

Ví dụ so sánh sắp xếp dữ liệu:

Nhiều đến ít	Ít đến nhiều
Lớn đến nhỏ	Nhỏ đến lớn
{{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:

1. Kiểm tra lại các con số đầu vào.
2. 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 $valve thay 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:

1. 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`).
2. 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 Bản mẫu:Biểu đồ tròn/doc

Đây là tài liệu Dữ liệu bản mẫu cho bản mẫu này được sử dụng bởi Trình soạn thảo trực quan và các công cụ khác; xem báo cáo sử dụng tham số hàng tháng cho bản mẫu này.

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ố bản mẫu

Nên dùng bản mẫu này với các tham số đặt thành khối.

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... Ví dụ [ {"label": "Kẹo", "value": 5, "color": "darkred"}, {"label": "Bánh", "value": 10} ]	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ỏ). Giá trị đề nghị right left none center Mặc định right	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. Giá trị đề nghị true false Mặc định true	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'. Mặc định 100	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. Giá trị đề nghị true false Mặc định false	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. Giá trị đề nghị column-reverse column row row-reverse Mặc định column-reverse	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. Mặc định $label: $auto	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 Bản mẫu:Biểu đồ tròn/doc

• {{Brick chart}}
• {{Composition bar}}
• {{Bar chart}}
• Mô đun:Chart