Code tạo biểu đồ/đồ thị kim tự tháp
Bạn có thể dùng JavaScript để tạo biểu đồ kim tự tháp. Dưới đây là hướng dẫn kèm code mẫu JavaScript tạo biểu đồ kim tự tháp.
JavaScript Pyramid Chart trên CanvasJS thường được dùng để hiện dữ liệu có tính chất phân cấp, biểu thị dữ liệu theo thứ tự lũy tiến. Bạn có thể hình dung biểu đồ kim tự tháp là hình thức đảo ngược của biểu đồ dạng phễu nhưng không có phần cổ và thường được dùng để hiện tỷ lệ từng thành phần trong tổng số.
Biểu đồ kim tự tháp được tạo bằng JavaScript trên CanvasJS có tính tương tác, đáp ứng, tương thích chéo trình duyệt, hỗ trợ hoạt ảnh & xuất dưới được dưới dạng ảnh.
Ví dụ bên dưới minh hoạ một mẫu biểu đồ kim tự tháp được tạo bằng JavaScript cùng mã nguồn HTML 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,
exportEnabled: true,
theme: "light1",
title:{
text: "Chuyển đổi doanh số phần mềm"
},
data: [{
type: "pyramid",
yValueFormatString: "#\"%\"",
indexLabelFontColor: "black",
indexLabelFontSize: 16,
indexLabel: "{label} - {y}",
//reversed: true, // Đảo ngược kim tự tháp
dataPoints: [
{ y: 100, label: "Truy cập web" },
{ y: 65, label: "Truy cập trang tải" },
{ y: 45, label: "Đã tải" },
{ y: 32, label: "Quan tâm tới việc mua sản phẩm" },
{ y: 5, label: "Đã mua" }
]
}]
});
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 đồ
Các nhãn data/index trong biểu đồ kim tự tháp có thể được đặt bên trong bằng cách thiết lập indexLabelPlacement
sang inside
. Bạn cũng có thể đảo ngược biểu đồ bằng thuộc tính reversed
. Một số tùy biến khác bao gồm valueRepresents
, exploded
, color
…
Bạn nên đọc
-
Hướng dẫn cài đặt SQL Server 2019
-
Cách giải phương trình bậc 2
-
Công thức tính thể tích hình chóp, chu vi hình chóp
-
Công thức tính thể tích hình chóp cụt, diện tích xung quanh và toàn phần của hình chóp cụt
-
Công thức tính diện tích tam giác: vuông, thường, cân, đều
-
Công thức tính diện tích hình vuông, tính chu vi hình vuông
Cũ vẫn chất
-
Cách lấy dữ liệu từ web vào Excel
Hôm qua -
Hướng dẫn sử dụng ổ USB Flash với thiết bị Android
Hôm qua -
Bro là gì? Ý nghĩa của Bro?
Hôm qua -
Cách tắt app chạy ngầm Windows 11, giảm ngốn RAM trên Win 11
Hôm qua -
Code Đại Hiệp Chạy Đi mới nhất và cách nhập code
Hôm qua -
Thủ thuật tạo shortcut chạy ứng dụng dưới quyền Admin
Hôm qua -
Hàm RIGHT, cách dùng hàm cắt chuỗi ký tự bên phải trong Excel
Hôm qua -
Slogan là gì? 90+ Slogan hay, những câu slogan chất, ngắn gọn, ý nghĩa nhất
Hôm qua -
Cách sửa lỗi “Ethernet doesn’t have a valid IP configuration”
Hôm qua -
Cách thêm máy in vào Windows 10
Hôm qua 2