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
272
Bạn nên đọc
-
Code JavaScript tạo biểu đồ & đồ thị bong bóng
-
Code JavaScript tạo mẫu biểu đồ phân tán/điểm nhiều chuỗi dữ liệu
-
Thuộc tính Opacity/Transparency trong CSS
-
Viết chương trình tính căn bậc hai của một số bằng Python
-
Code JavaScript tạo biểu đồ thu phóng với tính năng Zoom & Pan
-
Code JavaScript tạo biểu đồ/đồ thị phân tán/điểm
-
Code JavaScript tạo biểu đồ phân tán với các dấu tùy chỉnh
-
eQuiz - Bài kiểm tra trắc nghiệm về lập trình C (Phần 1)
-
Lệnh SELECT trong SQL
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
15 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 -
18 mặt đồng hồ Apple Watch thông dụng nhất
Hôm qua -
Cách đổi font chữ mặc định trong Google Docs
Hôm qua -
Mẹo lên level nhanh Blox Fruit, lên cấp nhanh Blox Fruit
Hôm qua -
Cách fix lỗi 0xc000007b trên Windows
Hôm qua 4 -
Cách tắt đang soạn tin nhắn Zalo
Hôm qua -
Cách xóa đường kẻ ngang trong Word
Hôm qua -
11 lựa chọn thay thế tốt nhất cho Canva
Hôm qua -
eQuiz - Bài kiểm tra trắc nghiệm về lập trình C (Phần 1)
Hôm qua -
3133 là gì? 3133 là số điện thoại của tổng đài nào? Có phải lừa đảo không?
Hôm qua