Code JavaScript tạo biểu đồ bong bóng với điểm đánh dấu tùy biến
Bạn có thể trình bày biểu đồ bong bóng bằng định dạng mặc định hoặc bất kỳ kiểu đánh dấu khác như hình tam giác, hình vuông… Tính năng này có thể hữu ích trong trường hợp hình bong bóng không còn thích hợp để minh họa các điểm dữ liệu.
Ví dụ bên dưới trình bày biểu đồ bong bóng với kiểu đánh dấu được tùy chỉnh cùng mã nguồn JavaScript mà bạn có thể chỉnh sửa trong trình duyệt hoặc lưu về thiết bị để chạy nội bộ.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Đường sắt so với diện tích đất và dân số"
},
axisX: {
title:"Diện tích đất (Triệu ki lô mét vuông)",
maximum: 17,
minimum: -.1
},
axisY:{
title: "Đường sắt (km)",
gridColor: "lightgrey",
tickColor: "lightgrey",
lineThickness: 0,
valueFormatString:"#,##0 km,.",
interval: 50000
},
data: [{
type: "bubble",
markerType: "triangle",
toolTipContent: "<b>{label}</b><br/><b>Diện tích đất:</b> {x}mn sq. km <br/><b>Đường sắt:</b> {y} km<br/> <b>Dân số:</b>{z}mn",
dataPoints: [
{ x: 9.14, y: 228513, z:309.34, label:"Mỹ" },
{ x: 16.37, y: 85292, z:141.92, label:"Nga" },
{ x: 9.327, y: 66239, z:1337, label:"Trung Quốc" },
{ x: 9.09, y: 58345, z:34.12, label:"Canada" },
{ x: 8.45, y: 29817, z:194.94, label:"Brazil" },
{ x: 7.68, y: 8615, z:22.29, label:"Úc" },
{ x: 2.97, y: 63974, z:1224.61, label:"Ấn Độ" },
{ x: 2.73, y: 25023, z:40.41, label:"Argentina" },
{ x: 1.94, y: 26704, z:113.42, label:"Mexico" },
{ x: 1.21, y: 22051, z:49.99, label:"SA" },
{ x: .547, y: 33608, z:65.07, label:"France" },
{ x: .241, y: 31471, z:62.23, label:"Vương quốc Anh" },
{ x: .348, y: 33708, z:81.77, label:"Đức" },
{ x: .364, y: 20035, z:127.45, label:"Nhật Bản" },
{ x: .995, y: 5195, z:81.12, label:"Ai Cập" },
{ x: .743, y: 5352, z:17.11, label:"Chile" }
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
Nguồn: CanvasJS
Tinh chỉnh biểu đồ
Giống như những biểu đồ bong bóng khác, bạn có thể thay đổi các thuộc tính để có kết quả như ý muốn. Ví dụ:
markerType
: Đổi kiểu đánh dấumarkerSize
: Thay đổi kích thước điểm đánh dấumarkerColor
: Lựa chọn màu sắc điểm đánh dấumarkerBorderThickness
: Độ dày đường viền đánh dấumarkerBorderColor
: Màu sắc đường viền đánh dấu
288
Bạn nên đọc
-
Lập trình công cụ phát hiện khuôn mặt bằng Python
-
Toán tử trong SQL
-
Code JavaScript tạo biểu đồ & đồ thị bong bóng
-
Code JavaScript tạo biểu đồ/đồ thị phân tán/điểm
-
Điều kiện EXISTS trong SQL Server
-
Xóa khóa ngoại trong SQL Server
-
Code JavaScript tạo biểu đồ thu phóng với tính năng Zoom & Pan
-
Khai báo @property trong Python
-
Cách phân quyền cho người dùng trong MS SQL Server
Xác thực tài khoản!
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:
Số điện thoại chưa đúng định dạng!
0 Bình luận
Sắp xếp theo

Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
5 cách mở cài đặt âm thanh trên PC Windows
Hôm qua 2 -
9 công cụ tạo video AI tốt nhất
Hôm qua -
Sửa lỗi phím tắt Windows + Shift + S không hoạt động trên Windows 10
Hôm qua -
Cách hiện file ẩn, thư mục ẩn trên Windows 10/8/7
Hôm qua -
‘Từ điển’ tiếng Huế thông dụng
Hôm qua -
Toán tử trong SQL
Hôm qua -
Cách kiểm tra số dư tài khoản Sacombank rất đơn giản
Hôm qua -
Bluestacks
-
Cách xem số thẻ MBBank trên ứng dụng
Hôm qua -
Cách khóa và mở khóa file Powerpoint để chỉnh sửa
Hôm qua