Code JavaScript tạo biểu đồ thác nước với màu sắc tùy biến
Bạn có thể dễ dàng tùy chỉnh màu sắc của các thanh cho những điều kiện khác nhau như tăng hoặc giảm giá trị trong biểu đồ thác nước. Sự phân biệt trực quan này làm biểu đồ chi tiết và dễ diễn giải hơn.
Ví dụ bên dưới trình bày một mẫu biểu đồ thác nước với màu sắc tùy biến được tạo bằng JavaScript. Nhân tố này thể hiện các giá trị tăng, giảm và trung gian. Bài viết cũng bao gồm mã nguồn JavaScript mà bạn có thể chỉnh sửa trên 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: "light2", //"light1", "light2", "dark1", "dark2"
animationEnabled: true,
title:{
text: "Báo cáo thu nhập, 2016"
},
axisX:{
labelFontSize: 12,
labelMaxWidth: 70
},
axisY: {
prefix: "$"
},
data: [{
type: "waterfall",
yValueFormatString: "$#,##0",
risingColor: "#5B9BD5",
fallingColor: "#ED7D31",
lineColor: "#222222",
dataPoints: [
{ label: "Doanh thu thuần", y: 240631 },
{ label: "Hàng tồn kho", y: -115000 },
{ label: "Hàng hóa", y: -18900 },
{ label: "Chi phí bán hàng khác", y: -6990 },
{ label: "Tổng thu nhập", isIntermediateSum: true, color: "#C7C7C7" },
{ label: "Nhân viên", y: -27500 },
{ label: "Tiếp thị", y: -12000 },
{ label: "Cơ sở vật chất khác", y: -35100 },
{ label: "Thu nhập hoạt động", isCumulativeSum: true, color: "#C7C7C7" },
{ label: "Thuế", y: -4500 },
{ 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>
Nguồn: CanvasJS
Tùy chỉnh biểu đồ
Bạn có thể thay đổi màu sắc theo giá trị âm hoặc dương trong đồ thị bằng thuộc tính risingColor và fallingColor; điều chỉnh lineThickness hoặc lineColor để dễ phân biệt các đường phân tách dữ liệu.
Những lựa chọn tùy biến khác bao gồm color, lineDashType, dataPointWidth…
Trên đây là mẫu biểu đồ thác nước có thể thay đổi màu sắc được tạo bằng JavaScript. Hi vọng bài viết hữu ích với các bạn.
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
-
Một số cách sửa lỗi Start Menu trên Windows 10 ngừng hoạt động
Hôm qua 5 -
Các cách căn giữa ô trong bảng trên Word
Hôm qua 1 -
Cách tải và cập nhật driver Bluetooth cho Windows 10
Hôm qua -
Cách hiện đuôi file, xem phần mở rộng file trên Windows 11/10/7/8
Hôm qua -
Khắc phục sự cố không thể chạy được file .exe
Hôm qua 4 -
Những câu nói hay về tình anh em xã hội, stt về tình anh em kết nghĩa càng đọc càng thấm
Hôm qua -
Lệnh ALTER TABLE trong SQL Server
Hôm qua -
8 bước khắc phục sự cố mất âm thanh trong Windows
Hôm qua 2 -
6 phần mềm chỉnh sửa ảnh miễn phí tốt nhất trên máy tính
Hôm qua 3 -
Cách vô hiệu hóa Facebook nhưng vẫn dùng Messenger
Hôm qua