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)
…
211
Bạn nên đọc
0 Bình luận
Sắp xếp theo
![❖](https://st.quantrimang.com/photos/avatars/default.png)
Xóa Đăng nhập để Gửi
![❖](https://st.quantrimang.com/photos/image/icon/javascript-64-size-24x24-znd.png)
Cũ vẫn chất
-
Hướng dẫn thiết lập và quản lý FTP Server trên Windows 10
2 ngày -
Câu nói hay về người thứ ba, stt về người thứ ba trong tình yêu thâm thúy
Hôm qua -
Những câu stt hay tâm trạng về lặng nhìn cuộc sống
Hôm qua -
Cách xem phiên bản di động của một trang web bất kỳ trên máy tính
Hôm qua -
Cách view source, xem mã nguồn trang web bằng điện thoại, máy tính
Hôm qua 1 -
Cheat Aoe 2, mã lệnh Aoe 2 tất cả các bản đầy đủ nhất
Hôm qua -
Cách viết chữ màu Liên Quân Mobile
2 ngày 2 -
11 thủ thuật mở Local Group Policy Editor trên Windows
Hôm qua -
Phần mở rộng file là gì?
Hôm qua -
Hình nền mở khóa điện thoại hài hước, hình nền mở khóa troll bá đạo
Hôm qua