Code JavaScript tạo biểu đồ/đồ thị xếp chồng cột hoàn toàn
Biểu đồ xếp chồng cột hoàn toàn còn gọi là biểu đồ thanh xếp chồng 100% theo chiều dọc. Nó tương tự như các biểu đồ cột xếp chồng khác, ngoại trừ việc chiều cao từng cột được tính theo phần trăm của tổng số. Điều này cho phép bạn so sánh giá trị của từng chuỗi dữ liệu với tổng số theo phần trăm. Kiểu biểu đồ này cũng có tính tương tác, đáp ứng, hỗ trợ hoạt ảnh & xuất dưới dạng ảnh.
Ví dụ bên dưới minh họa một mẫu biểu đồ cột xếp chồng 100% được tạo bằng JavaScript. Bài viết cũng bao gồm mã nguồn cho bạn 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,
title:{
text: "Thành phần lưu lượng truy cập Internet ở Bắc Mỹ"
},
axisX: {
interval: 1,
intervalType: "year",
valueFormatString: "YYYY"
},
axisY: {
suffix: "%"
},
toolTip: {
shared: true
},
legend: {
reversed: true,
verticalAlign: "center",
horizontalAlign: "right"
},
data: [{
type: "stackedColumn100",
name: "Thời gian thực",
showInLegend: true,
xValueFormatString: "YYYY",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{ x: new Date(2010,0), y: 40 },
{ x: new Date(2011,0), y: 50 },
{ x: new Date(2012,0), y: 60 },
{ x: new Date(2013,0), y: 61 },
{ x: new Date(2014,0), y: 63 },
{ x: new Date(2015,0), y: 65 },
{ x: new Date(2016,0), y: 67 }
]
},
{
type: "stackedColumn100",
name: "Duyệt web",
showInLegend: true,
xValueFormatString: "YYYY",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{ x: new Date(2010,0), y: 28 },
{ x: new Date(2011,0), y: 18 },
{ x: new Date(2012,0), y: 12 },
{ x: new Date(2013,0), y: 10 },
{ x: new Date(2014,0), y: 10 },
{ x: new Date(2015,0), y: 7 },
{ x: new Date(2016,0), y: 5 }
]
},
{
type: "stackedColumn100",
name: "Chia sẻ file",
showInLegend: true,
xValueFormatString: "YYYY",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{ x: new Date(2010,0), y: 15 },
{ x: new Date(2011,0), y: 12 },
{ x: new Date(2012,0), y: 10 },
{ x: new Date(2013,0), y: 9 },
{ x: new Date(2014,0), y: 7 },
{ x: new Date(2015,0), y: 5 },
{ x: new Date(2016,0), y: 1 }
]
},
{
type: "stackedColumn100",
name: "Khác",
showInLegend: true,
xValueFormatString: "YYYY",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{ x: new Date(2010,0), y: 17 },
{ x: new Date(2011,0), y: 20 },
{ x: new Date(2012,0), y: 18 },
{ x: new Date(2013,0), y: 20 },
{ x: new Date(2014,0), y: 20 },
{ x: new Date(2015,0), y: 23 },
{ x: new Date(2016,0), y: 27 }
]
}]
});
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ể bật chú giải bằng thuộc tính showInLegend
. Thay đổi vị trí của chú thích theo chiều dọc bằng verticalAlign
hoặc ngang bằng horizontalAlign
. Ngoài ra, bạn còn có thể thay đổi cả color
- màu sắc, shared(toolTip)
- chia sẻ tooltip và nhiều hơn thế nữa.
Bạn nên đọc
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
Code mẫu JavaScript tạo biểu đồ cột nhiều chuỗi dữ liệu
-
Code JavaScript tạo biểu đồ thanh đa chuỗi dữ liệu
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường
-
Tổng hợp bài tập JavaScript có code mẫu
-
Code JavaScript tạo biểu đồ/đồ thị cột theo phạm vi
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Code JavaScript tạo biểu đồ/đồ thị cột dạng xếp chồng
Cũ vẫn chất
-
Code GoGo Tam Quốc mới nhất
Hôm qua -
Hướng dẫn chèn chữ vào ảnh trong Word
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 -
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 -
Mua laptop Windows hiện khó hơn bao giờ hết
Hôm qua -
Cách xóa tin nhắn Telegram, lịch sử tin nhắn Telegram
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 tạo USB boot đa năng, USB cứu hộ bằng DLC Boot
Hôm qua -
Sửa lỗi Fatal Error Wuthering Waves
Hôm qua