Xem mã nguồn của Mô đun:Piechart/tài liệu

Bạn không được quyền sửa đổi trang này, vì lý do sau:

Dải địa chỉ IP này đã bị cấm trên toàn hệ thống.
Điều này không làm ảnh hưởng đến khả năng đọc các trang Wikipedia của bạn.

Hầu hết những người nhìn thấy thông báo này không làm gì sai. Một số tác vụ cấm hạn chế sửa đổi từ những nhà cung cấp dịch vụ hoặc công ty viễn thông cụ thể do lạm dụng hoặc phá hoại gần đây, ảnh hưởng tới những thành viên khác không liên quan đến sự lạm dụng ấy. Xem bên dưới nếu bạn tin rằng bạn không làm gì sai.

Lệnh cấm này ảnh hưởng trên tất cả wiki của Wikimedia.

Địa chỉ IP hoặc dải IP 139.180.192.0/19 đã bị cấm toàn cục bởi ‪Jon Kolbert‬ vì (những) lý do sau:

Open proxy/Webhost: See the help page if you are affected

Lệnh cấm này có hiệu lực từ 14:08, ngày 13 tháng 11 năm 2023 và sẽ hết hạn vào 14:08, ngày 13 tháng 11 năm 2026. Địa chỉ IP hiện tại của bạn là 139.180.211.105.

Ngay cả khi bị cấm, bạn thường vẫn có thể sửa đổi trang tại Meta-Wiki.

Nếu bạn cho rằng mình đã bị cấm do nhầm lẫn, bạn có thể xem thêm thông tin và hướng dẫn bỏ cấm trên trang này.

Các liên kết hữu ích khác: Cấm toàn cục · Trợ giúp:Tôi bị cấm

Bạn vẫn có thể xem và sao chép mã nguồn của trang này.

{{Module rating|release}}<!-- Thêm thể loại ở nơi được chỉ định ở cuối trang này và liên kết wiki tại Wikidata -->Mô đun tạo biểu đồ tròn mượt mà (smooth pie chart). Được truy cập thông qua [[Bản mẫu:Pie chart]].== Cách sử dụng ==Vẽ biểu đồ bằng HTML với chú giải dễ tiếp cận (tùy chọn). Danh sách tất cả các tính năng nằm trong phần "TODO" của hàm chính `p.pie`.Trong hầu hết các trường hợp, bạn nên sử dụng cùng với bản mẫu hỗ trợ để thêm CSS cần thiết: {{tl|Pie chart}}.== Ví dụ ===== Tối giản ===<syntaxhighlight lang="wikitext" lang="javascript"></syntaxhighlight>Lưu ý rằng bạn không cần cung cấp giá trị thứ hai vì nó được tự động tính toán (giả sử tổng cộng là 100).<syntaxhighlight lang="wikitext">{{Pie chart| [ {"value":33.3},  {} ] |thumb=none}}</syntaxhighlight>{{Pie chart| [ {"value":33.3},  {} ] |thumb=none}}=== Nhãn và Chú giải ===Ở đây chúng ta thêm một số nhãn tùy chỉnh. Cũng lưu ý rằng chúng ta thêm tùy chọn meta để hiển thị chú giải ở bên cạnh.<syntaxhighlight lang="wikitext">{{Pie chart| [ {"label": "nữ: $v", "value": 33.3}, {"label": "nam: $v"}]|thumb=none|meta = {"legend":true}}}</syntaxhighlight>{{Pie chart| [ {"label": "nữ: $v", "value": 33.3}, {"label": "nam: $v"}]|thumb=none|meta = {"legend":true}}}=== Tự động chia tỷ lệ ===Trong trường hợp bạn không có tỷ lệ phần trăm đã tính sẵn, bạn có thể sử dụng tính năng tự động chia tỷ lệ. Chỉ cần cung cấp cả hai giá trị trong trường hợp này.<syntaxhighlight lang="wikitext">{{Pie chart| [ {"label": "nữ: $v", "value": 750}, {"label": "nam: $v", "value": 250}]|thumb=none|meta = {"legend":true}}}</syntaxhighlight>{{Pie chart| [ {"label": "nữ: $v", "value": 750}, {"label": "nam: $v", "value": 250}]|thumb=none|meta = {"legend":true}}}=== Nhiều giá trị ===Mô đun cho phép hiển thị nhiều giá trị, không chỉ 2.<syntaxhighlight lang="wikitext">{{Pie chart| [ {"label": "kẹo: $v", "value": 5, "color":"darkred"}, {"label": "bánh kẹp: $v", "value": 3, "color":"wheat"}, {"label": "bánh quy: $v", "value": 2, "color":"goldenrod"}, {"label": "đồ uống: $v", "value": 1, "color":"#ccf"}]|thumb=none|meta={"autoscale":true, "legend":true}}}</syntaxhighlight>{{Pie chart| [ {"label": "kẹo: $v", "value": 5, "color":"darkred"}, {"label": "bánh kẹp: $v", "value": 3, "color":"wheat"}, {"label": "bánh quy: $v", "value": 2, "color":"goldenrod"}, {"label": "đồ uống: $v", "value": 1, "color":"#ccf"}]|thumb=none|meta={"autoscale":true, "legend":true}}}Lưu ý rằng trong trường hợp này, cần phải cung cấp thêm tùy chọn <code>"autoscale":true</code>. Điều này là cần thiết khi tổng số nhỏ hơn 100.=== Liên kết ==={{Pie chart| [ {"label": "[[kẹo]]: $v", "value": 5, "color":"darkred"}, {"label": "[[bánh mì kẹp]]: $v", "value": 3, "color":"wheat"}, {"label": "[[bánh quy]]: $v", "value": 2, "color":"goldenrod"}, {"label": "[[đồ uống]]: $v", "value": 1, "color":"#ccf"}]|thumb=none|meta={"autoscale":true, "legend":true}}}== Chú giải và vị trí của nó ==Chú giải được thêm vào bằng cách sử dụng thuộc tính meta ''legend'' như đã hiển thị. Tuy nhiên, bạn cũng có thể thay đổi thứ tự bằng cách sử dụng ''direction''. Các giá trị có thể bao gồm:* row (mặc định) – thứ tự là danh sách, biểu đồ;* row-reverse – thứ tự ngược lại, tức là biểu đồ, danh sách;* column – bố cục cột (dọc).* column-reverse – bố cục cột, đảo ngược (biểu đồ ở trên cùng).<syntaxhighlight lang="wikitext">{{Pie chart| [ {"label": "bánh quy: $v", "value": 2, "color":"goldenrod"}, {"label": "đồ uống: $v", "value": 1, "color":"#ccf"}, {"label": "kẹo: $v", "value": 5, "color":"darkred"}, {"label": "bánh kẹp: $v", "value": 3, "color":"wheat"}]|thumb=none|meta={"autoscale":true, "legend":true, "direction":"row-reverse"}}}</syntaxhighlight><div class="wikiflex" style="display:flex; gap: 1em; flex-wrap: wrap;"><!-- top --><div class="wikiflex" style="display:flex; gap: 1em; align-items: flex-start; flex-wrap: wrap;"><!-- --><div style="border:1px solid darkgreen; padding: 0 .5em .5em">'''row''' (''hướng'' mặc định){{Pie chart| [ {"label": "bánh quy: $v", "value": 2, "color":"goldenrod"}, {"label": "đồ uống: $v", "value": 1, "color":"#ccf"}, {"label": "kẹo: $v", "value": 5, "color":"darkred"}, {"label": "bánh kẹp: $v", "value": 3, "color":"wheat"}]|thumb=none|meta={"autoscale":true, "legend":true, "direction":"row"}}}</div><div style="border:1px solid darkgreen; padding: 0 .5em .5em">'''row-reverse'''{{Pie chart| [ {"label": "bánh quy: $v", "value": 2, "color":"goldenrod"}, {"label": "đồ uống: $v", "value": 1, "color":"#ccf"}, {"label": "kẹo: $v", "value": 5, "color":"darkred"}, {"label": "bánh kẹp: $v", "value": 3, "color":"wheat"}]|thumb=none|meta={"autoscale":true, "legend":true, "direction":"row-reverse"}}}</div><!-- --></div><div class="wikiflex" style="display:flex; gap: 1em; align-items: flex-start; flex-wrap: wrap;"><!-- --><div style="border:1px solid darkgreen; padding: 0 .5em .5em">'''column'''{{Pie chart| [ {"label": "bánh quy: $v", "value": 2, "color":"goldenrod"}, {"label": "đồ uống: $v", "value": 1, "color":"#ccf"}, {"label": "kẹo: $v", "value": 5, "color":"darkred"}, {"label": "bánh kẹp: $v", "value": 3, "color":"wheat"}]|thumb=none|meta={"autoscale":true, "legend":true, "direction":"column"}}}</div><div style="border:1px solid darkgreen; padding: 0 .5em .5em">'''column-reverse'''{{Pie chart| [ {"label": "bánh quy: $v", "value": 2, "color":"goldenrod"}, {"label": "đồ uống: $v", "value": 1, "color":"#ccf"}, {"label": "kẹo: $v", "value": 5, "color":"darkred"}, {"label": "bánh kẹp: $v", "value": 3, "color":"wheat"}]|thumb=none|meta={"autoscale":true, "legend":true, "direction":"column-reverse"}}}</div><!-- --></div><!-- top --></div>Khung viền xanh lá được thêm vào để làm rõ trong các ví dụ. Chúng thường không được thêm vào.== Các hàm trực tiếp ==Trong trường hợp bạn muốn sử dụng mà không cần bản mẫu {{tl|Pie chart}}, bạn có thể sử dụng các hàm chính này:* <code><nowiki>{{</nowiki>#invoke:Piechart|''pie''<nowiki>|json_data|meta=json_options}}</nowiki></code>* <code><nowiki>{{</nowiki>#invoke:Piechart|''color''<nowiki>|number}}</nowiki></code>Lưu ý rằng các cuộc gọi trực tiếp đến hàm ''pie'' yêu cầu thêm CSS:<syntaxhighlight lang="javascript"><templatestyles src="Bản mẫu:Pie chart/styles.css"/>{{#invoke:Piechart|pie| [ {"value":33.3},  {} ] }}</syntaxhighlight>Ví dụ về '''json_data''':<syntaxhighlight lang="javascript">[		{ "label": "bánh: $v", "color": "wheat", "value": 40 },		{ "label": "bánh pizza phô mai $v", "color": "#fc0", "value": 20 },		{ "label": "bánh pizza thập cẩm: $v", "color": "#f60", "value": 20 },		{ "label": "bánh pizza sống $v", "color": "#f30" }]</syntaxhighlight>* Lưu ý rằng giá trị cuối cùng bị thiếu. Giá trị cuối cùng là tùy chọn miễn là các giá trị dự định cộng lại thành 100 (tức là 100%).* Chú ý nhãn <code>$v</code>, đây là một số được định dạng (xem `<code>function prepareLabel</code>`).* Màu sắc là mã hex hoặc tên màu tiếng Anh. Bảng màu mặc định có tông màu xanh lá cây.Ví dụ về meta='''json_options''':<syntaxhighlight lang="javascript">|meta = {"size":200, "autoscale":false, "legend":true}</syntaxhighlight>Tất cả các tùy chọn meta là tùy chọn (xem `<code>function p.setupOptions</code>`).{{Graph, chart and plot templates}}<includeonly>{{Sandbox other||<!-- Thêm thể loại bên dưới dòng này; liên kết wiki tại Wikidata -->[[Thể loại:Mô đun Lua]][[Thể loại:Bản mẫu hàm và định dạng đồ họa và sơ đồ, biểu đồ]]}}</includeonly>

Các bản mẫu dùng trong trang này:

Bản mẫu:Biểu đồ tròn (sửa đổi)
Bản mẫu:Bản mẫu đồ thị, biểu đồ và sơ đồ (sửa đổi)
Bản mẫu:Graph, chart and plot templates (sửa đổi)
Bản mẫu:Hlist/styles.css (sửa đổi)
Bản mẫu:Hộp điều hướng (xem mã nguồn) (bị khóa)
Bản mẫu:Module rating (sửa đổi)
Bản mẫu:Namespace detect (xem mã nguồn) (bị khóa)
Bản mẫu:Navbox (xem mã nguồn) (bị khóa)
Bản mẫu:Ombox (xem mã nguồn) (bị khóa)
Bản mẫu:Pie chart (sửa đổi)
Bản mẫu:Template other (xem mã nguồn) (bị khóa)
Bản mẫu:Tl (xem mã nguồn) (bị khóa)
Bản mẫu:Xếp loại bản mẫu (sửa đổi)
Mô đun:Arguments (xem mã nguồn) (bị khóa)
Mô đun:Check for unknown parameters (xem mã nguồn) (khóa kỹ thuật viên bản mẫu)
Mô đun:Effective protection level (xem mã nguồn) (khóa xác nhận mở rộng)
Mô đun:Message box (xem mã nguồn) (khóa kỹ thuật viên bản mẫu)
Mô đun:Message box/configuration (xem mã nguồn) (bị khóa)
Mô đun:Message box/ombox.css (sửa đổi)
Mô đun:Namespace detect (xem mã nguồn) (bị khóa)
Mô đun:Namespace detect/config (xem mã nguồn) (bị khóa)
Mô đun:Namespace detect/data (xem mã nguồn) (bị khóa)
Mô đun:Navbar (xem mã nguồn) (khóa kỹ thuật viên bản mẫu)
Mô đun:Navbar/configuration (sửa đổi)
Mô đun:Navbar/styles.css (sửa đổi)
Mô đun:Navbox (xem mã nguồn) (khóa kỹ thuật viên bản mẫu)
Mô đun:Navbox/configuration (sửa đổi)
Mô đun:Navbox/styles.css (sửa đổi)
Mô đun:TableTools (xem mã nguồn) (bị khóa)
Mô đun:Yesno (xem mã nguồn) (bị khóa)

Trở lại Mô đun:Piechart/tài liệu.

Bài viết được in từ nguồn Wiki Scholarship “https://wiki.scholarship.edu.vn/Mô_đun:Piechart/tài_liệu”