Code JavaScript tạo biểu đồ/đồ thị xếp chồng thanh 100%
JavaScript Stacked Bar 100% Chart tương tự như biểu đồ xếp chồng thanh, ngoại trừ việc chiều cao của nó được tính bằng phần trăm trên tổng số. Điều này cho phép bạn so sánh tỷ lệ của từng chuỗi dữ liệu với tổng số phần trăm. Biểu đồ này cũng có tính tương tác, đáp ứng và hỗ trợ hoạt ảnh, xuất biểu đồ dưới dạng ảnh.
Ví dụ bên dưới minh họa một mẫu biểu đồ xếp chồng thanh 100% được tạo bằng JavaScript kèm mã nguồn HTML mà bạn có thể chỉnh sửa trong trình duyệt hoặc lưu về máy để chạy nội bộ.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2", //"light1", "dark1", "dark2"
title:{
text: "Số lượng sản phẩm đã bán trong quý II"
},
axisY:{
interval: 10,
suffix: "%"
},
toolTip:{
shared: true
},
data:[{
type: "stackedBar100",
toolTipContent: "{label}<br><b>{name}:</b> {y} (#percent%)",
showInLegend: true,
name: "Tháng 4",
dataPoints: [
{ y: 600, label: "Water Filter" },
{ y: 400, label: "Modern Chair" },
{ y: 120, label: "VOIP Phone" },
{ y: 250, label: "Microwave" },
{ y: 120, label: "Water Filter" },
{ y: 374, label: "Expresso Machine" },
{ y: 350, label: "Lobby Chair" }
]
},
{
type: "stackedBar100",
toolTipContent: "<b>{name}:</b> {y} (#percent%)",
showInLegend: true,
name: "Tháng 5",
dataPoints: [
{ y: 400, label: "Bộ lọc nước" },
{ y: 500, label: "Ghế hiện đại" },
{ y: 220, label: "Điện thoại VOIP" },
{ y: 350, label: "Lò vi sóng" },
{ y: 220, label: "Máy lọc nước" },
{ y: 474, label: "Máy pha cà phê Expresso" },
{ y: 450, label: "Ghế tựa" }
]
},
{
type: "stackedBar100",
toolTipContent: "<b>{name}:</b> {y} (#percent%)",
showInLegend: true,
name: "Tháng 6",
dataPoints: [
{ y: 300, label: "Bộ lọc nước" },
{ y: 610, label: "Ghế hiện đại" },
{ y: 215, label: "Điện thoại VOIP" },
{ y: 221, label: "Lò vi sóng" },
{ y: 75, label: "Máy lọc nước" },
{ y: 310, label: "Máy pha cà phê Expresso" },
{ y: 340, label: "Ghế tựa" }
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
Nguồn: CanvasJS
Tùy biến biểu đồ
Bạn có thể thay đổi chiều rộng của thanh bằng dataPointWidth
hoặc màu sắc của nó bằng color. Bạn cũng có thể hiện chú giải bằng thuộc tính showInLegend
. Một số lựa chọn tùy chỉnh khác bao gồm fillOpacity
, shared (toolTip)
…
230
Bài trước
Bạn nên đọc
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
Hướng dẫn chèn chữ vào ảnh trong Word
Hôm qua -
Cách tạo USB boot đa năng, USB cứu hộ bằng DLC Boot
Hôm qua -
Đây là quốc gia duy nhất từng lấy cờ trắng làm quốc kỳ
Hôm qua -
Sửa lỗi Fatal Error Wuthering Waves
Hôm qua -
Cách sửa lỗi IRQL NOT LESS OR EQUAL trên Windows
Hôm qua -
Pokemon Go - Thủ thuật tiến hóa Eevee thành bất cứ loại Pokemon nào
Hôm qua -
Code GoGo Tam Quốc mới nhất
Hôm qua -
Mua laptop Windows hiện khó hơn bao giờ hết
Hôm qua -
Tại sao giao diện Windows lại ngày càng rời rạc?
Hôm qua -
Cách xóa tin nhắn Telegram, lịch sử tin nhắn Telegram
Hôm qua