Code JavaScript tạo biểu đồ/đồ thị cột
Bạn đang muốn tạo một biểu đồ cột đơn giản bằng JavaScript? Vậy thì mời bạn tham khảo mẫu biểu đồ/đồ thị dạng cột dọc cơ bản được tạo bởi JavaScript dưới đây.
Biểu đồ cột dùng các thanh hình chữ nhật để so sánh giá trị giữa các danh mục/seri khác nhau. Các biểu đồ cột đôi khi còn được gọi là biểu đồ dạng thanh dọc. Để dễ phân biệt, chúng ta gọi biểu đồ thanh dọc là biểu đồ cột, còn ngang là biểu đồ thanh. Những biểu đồ dạng cột có tính tương tác, hỗ trợ hoạt ảnh, thu phóng, xoay & xuất dưới dạng ảnh.
Ví dụ bên dưới minh họa một mẫu biểu đồ/đồ thị cột cơ bản được tạo bằng JavaScript. Bạn sẽ thấy có cả mã nguồn để chỉnh sửa 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,
theme: "light2", // bạn có thể thay bằng "light1", "light2", "dark1", "dark2"
title:{
text: "Top quốc gia dự trữ dầu hàng đầu thế giới"
},
axisY: {
title: "Dự trữ(MMbbl)"
},
data: [{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "MMbbl = một triệu thùng",
dataPoints: [
{ y: 300878, label: "Venezuela" },
{ y: 266455, label: "Saudi" },
{ y: 169709, label: "Canada" },
{ y: 158400, label: "Iran" },
{ y: 142503, label: "Iraq" },
{ y: 101500, label: "Kuwait" },
{ y: 97800, label: "UAE" },
{ y: 80000, label: "Nga" }
]
}]
});
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ể dễ dàng thay đổi màu của dataPoint
bằng thuộc tính color
, chiều rộng của thanh bằng dataPointWidth
.
Một số thuộc tính có thể thay đổi khác bao gồm indexLabel
- nhãn chỉ mục, theme
- hình nền, animationEnabled
- bật hiệu ứng và nhiều hơn thế nữa.
Bạn nên đọc
Cũ vẫn chất
-
Cách sửa lỗi không thấy bộ điều hợp mạng trên Windows 10
Hôm qua -
Lee Sin DTCL mùa 7: Lên đồ, đội hình, cách chơi
Hôm qua -
Cách nhận Cursed Dual Katana Blox Fruit
Hôm qua -
Tải AutoCAD 2020 bản quyền miễn phí (AutoCAD Student)
Hôm qua -
Lịch phát sóng phim House of the Dragon, cách xem phim House of the Dragon
Hôm qua -
Cách sử dụng Google Authenticator trên PC chạy Windows
Hôm qua -
21 lời chúc valentine cho bạn gái, người yêu lãng mạn và ngọt ngào nhất
Hôm qua -
Hướng dẫn chèn link vào hồ sơ Instagram
Hôm qua -
Hướng dẫn sửa lỗi System Service Exception trên Windows
Hôm qua -
4 cách ẩn hoặc bảo vệ một thư mục Windows tốt nhất, không cần cài thêm phần mềm
Hôm qua