Code JavaScript tạo biểu đồ/đồ thị thác nước
JavaScript Waterfall Charts là một trong số dạng biểu đồ hữu ích, giúp người xem biểu đồ hiểu tác động tích lũy của các thay đổi tích cực và tiêu cực tới giá trị ban đầu. Dạng biểu đồ này chủ yếu được dùng trong lĩnh vực tài chính, kế toán.
Giá trị ban đầu và cuối cùng bắt đầu từ trục X, còn giá trị trung gian (cột) là nổi. Đây là lí do tại sao biểu đồ thác nước còn được gọi là Flying Brick Charts. Nó cũng được gọi là biểu đồ cầu - (bridge chart) trong tài chính. Biểu đồ này có tính tương tác và chạy trên tất cả thiết bị thông dụng.
Ví dụ bên dưới hiện biểu đồ thác nước được tạo bằng code JavaScript cùng với mã nguồn 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", {
theme: "light1", // "light1", "ligh2", "dark1", "dark2"
animationEnabled: true,
title: {
text: "Tài chính công ty"
},
axisY: {
title: "Tổng giá trị (USD)",
prefix: "$",
suffix: "k",
lineThickness: 0,
includeZero: true
},
data: [{
type: "waterfall",
indexLabel: "{y}",
indexLabelFontColor: "#EEEEEE",
indexLabelPlacement: "inside",
yValueFormatString: "#,##0k",
dataPoints: [
{ label: "Bán hàng", y: 1273 },
{ label: "Dịch vụ", y: 623 },
{ label: "Tổng doanh thu", isIntermediateSum: true},
{ label: "Nghiên cứu", y: -150 },
{ label: "Tiếp thị", y: -226 },
{ label: "Lương", y: -632 },
{ label: "Thu nhập hoạt động", isCumulativeSum: true },
{ label: "Thuế", y: -264 },
{ label: "Thu nhập ròng", isCumulativeSum: true }
]
}]
});
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>
Tùy chỉnh biểu đồ
Bạn có thể dùng thuộc tính risingColor và fallingColor để thiết lập màu tùy chỉnh cho các cột đại diện cho những thay đổi tích cực và tiêu cực.
Một số lựa chọn tùy chỉnh phổ biến khác bao gồm: showInLegend, color, fillOpacity…
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Những câu nói hay về công việc, stt hay về công việc truyền cảm hứng giúp bạn đạt được thành công
Hôm qua -
Cap kỉ niệm ngày cưới, stt kỷ niệm ngày cưới ý nghĩa và ngọt ngào
Hôm qua -
Firmware là gì? Firmware khác Software như thế nào?
Hôm qua -
Code Roblox mới nhất tháng 10 và cách nhập Roblox Promo Code 2025
Hôm qua 6 -
Cách tính BHXH 1 lần, hưởng BHXH 1 lần mới nhất
Hôm qua -
Game luyện chuột, game nhanh tay lẹ mắt trên máy tính
Hôm qua 3 -
Hướng dẫn đóng dấu ngoặc số âm trong Excel
Hôm qua 1 -
Mảng trong Python
Hôm qua -
Hàm trong Python là gì? Các hàm trong Python
Hôm qua 2 -
Cách thiết lập VPN trên iPhone hoặc iPad
Hôm qua 3