Code JavaScript tạo mẫu biểu đồ phân tán/điểm nhiều chuỗi dữ liệu
CanvasJS cho phép kết hợp hai hoặc nhiều chuỗi dữ liệu để tạo biểu đồ phân tán đa chuỗi. Bạn có thể thêm chú giải cho từng chuỗi dữ liệu để biểu đồ "giàu" thông tin và dễ đọc hơn.
Ví dụ bên dưới minh họa biểu đồ/đồ thị phân tán nhiều chuỗi dữ liệu. Ngoài ra, bạn cũng có code nguồn có thể 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,
title:{
text: "Hiệu suất của server"
},
axisX: {
title:"Tải server (TPS)"
},
axisY:{
title: "Thời gian phản hồi (ms)",
includeZero: true
},
data: [{
type: "scatter",
toolTipContent: "<span style=\"color:#4F81BC \"><b>{name}</b></span><br/><b> Tải:</b> {x} TPS<br/><b> Thời gian phản hồi:</b></span> {y} ms",
name: "Server Pluto",
showInLegend: true,
dataPoints: [
{ x: 23, y: 330 },
{ x: 28, y: 390 },
{ x: 39, y: 400 },
{ x: 34, y: 430 },
{ x: 24, y: 321 },
{ x: 29, y: 250 },
{ x: 29, y: 370 },
{ x: 23, y: 290 },
{ x: 27, y: 250 },
{ x: 34, y: 380 },
{ x: 36, y: 320 },
{ x: 33, y: 405 },
{ x: 32, y: 453 },
{ x: 21, y: 292 }
]
},
{
type: "scatter",
name: "Server Mars",
showInLegend: true,
toolTipContent: "<span style=\"color:#C0504E \"><b>{name}</b></span><br/><b> Tải:</b> {x} TPS<br/><b> Thời gian phản hồi:</b></span> {y} ms",
dataPoints: [
{ x: 19, y: 200 },
{ x: 27, y: 300 },
{ x: 35, y: 330 },
{ x: 32, y: 190 },
{ x: 29, y: 189 },
{ x: 22, y: 150 },
{ x: 27, y: 200 },
{ x: 26, y: 190 },
{ x: 24, y: 225 },
{ x: 33, y: 330 },
{ x: 34, y: 250 },
{ x: 30, y: 120 },
{ x: 37, y: 153 },
{ x: 24, y: 196 }
]
}]
});
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ể thay đổi màu sắc của chuỗi phân tán hay các điểm bằng thuộc tính color; chỉnh sửa kiểu đánh dấu bằng markerType để đại diện cho điểm dữ liệu với các dấu tùy biến.
Một số lựa chọn tùy biến thường thấy khác là:
markerColor
: Màu đánh dấumarkerBorderColor
: Màu đường viền đánh dấumarkerSize
: Kích thước đánh dấu- …
277
Bạn nên đọc
-
Code JavaScript tạo biểu đồ OHLC từ dữ liệu JSON bằng AJAX
-
Code JavaScript tạo biểu đồ/đồ thị hình nến
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Code JavaScript tạo đồ thị/biểu đồ OHLC
-
Tổng hợp bài tập JavaScript có code mẫu
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
Code JavaScript tạo biểu đồ kim tự tháp với các vùng tỷ lệ thuận với giá trị
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
Hàm RIGHT, cách dùng hàm cắt chuỗi ký tự bên phải trong Excel
Hôm qua -
Code Đại Hiệp Chạy Đi mới nhất và cách nhập code
Hôm qua -
Cách sửa lỗi “Ethernet doesn’t have a valid IP configuration”
Hôm qua -
Cách lấy dữ liệu từ web vào Excel
Hôm qua -
Thủ thuật tạo shortcut chạy ứng dụng dưới quyền Admin
Hôm qua -
Hướng dẫn sử dụng ổ USB Flash với thiết bị Android
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 thêm máy in vào Windows 10
Hôm qua 2 -
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