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


Cũ vẫn chất
-
Nhận xúc xắc Piggy Go mới nhất, Spin Piggy Go mới nhất
Hôm qua 3 -
40+ câu nói ‘xoắn lưỡi’ tiếng Việt, Anh, thách bạn có thể nói nhanh liên tiếp 5 lần mà vẫn trôi chảy
Hôm qua -
Sleep hay shutdown: Lựa chọn nào tốt hơn cho PC của bạn?
Hôm qua -
Microsoft ra mắt Windows 11 IoT Enterprise LTSC 2024 với khả năng hỗ trợ thiết bị rộng hơn và nhiều thay đổi lớn
Hôm qua -
Code Tiếu Ngạo Gamota mới nhất đổi vàng khóa, đàn hương
Hôm qua -
Code Hầu Ca Đi Đâu Đấy mới nhất và cách nhập code
Hôm qua -
Cách chỉnh cấu hình trong Mini World Block Art
Hôm qua -
6 cách tra cứu điểm thi vào lớp 10 Hà Nội 2025
Hôm qua -
Cách sửa lỗi BSOD Memory Management
Hôm qua 1 -
Cách thay đổi DNS Server trên Windows 11
Hôm qua