Bước tới nội dung

Mô đun:Piechart/tài liệu

Thêm liên kết
Bách khoa toàn thư mở Wikipedia

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: {{Pie chart}}.

Ví dụ

Tối giản

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).

{{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.

{{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.

{{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.

{{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 "autoscale":true. Điều này là cần thiết khi tổng số nhỏ hơn 100.

Liên kết


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).
{{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"}}}

row (hướng mặc định)


row-reverse


column


column-reverse


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 {{Pie chart}}, bạn có thể sử dụng các hàm chính này:

  • {{#invoke:Piechart|pie|json_data|meta=json_options}}
  • {{#invoke:Piechart|color|number}}

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:

<templatestyles src="Bản mẫu:Pie chart/styles.css"/>{{#invoke:Piechart|pie| [ {"value":33.3},  {} ] }}

Ví dụ về json_data:

[		{ "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" }]
  • 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 $v, đây là một số được định dạng (xem `function prepareLabel`).
  • 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:

|meta = {"size":200, "autoscale":false, "legend":true}

Tất cả các tùy chọn meta là tùy chọn (xem `function p.setupOptions`).

Lấy từ “https://vi.wikipedia.org/w/index.php?title=Mô_đun:Piechart/tài_liệu&oldid=74580146”