Code mẫu JavaScript tạo spline chart kèm chú thích
Hiện chú thích trong biểu đồ nhiều chuỗi sẽ giúp người xem dễ đọc thông tin hơn. Spline Chart - Biểu đồ nối hàm giống như các dạng biểu đồ/đồ thị khác trong thư viện CanvasJS đều có hỗ trợ chú thích.
Chú thích hay chú giải trên biểu đồ cung cấp mô tả ngắn về dữ liệu được hiển thị. Điều đó giúp bạn dễ xác định từng chuỗi dữ liệu trong biểu đồ.
Ví dụ bên dưới minh họa một mẫu biểu đồ nhiều chuỗi dữ liệu kèm chú thích. Bài viết bao gồm cả code JavaScript tạo mẫu biểu đồ này để bạ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,
exportEnabled: true,
title:{
text: "Huy chương vàng đã giành được ở Olympics"
},
axisY:{
title: "Số huy chương"
},
toolTip: {
shared: true
},
legend:{
cursor:"pointer",
itemclick: toggleDataSeries
},
data: [{
type: "spline",
name: "Mỹ",
showInLegend: true,
dataPoints: [
{ label: "Atlanta 1996" , y: 44 },
{ label:"Sydney 2000", y: 37 },
{ label: "Athens 2004", y: 36 },
{ label: "Bắc Kinh 2008", y: 36 },
{ label: "London 2012", y: 46 },
{ label: "Rio 2016", y: 46 }
]
},
{
type: "spline",
name: "Trung Quốc",
showInLegend: true,
dataPoints: [
{ label: "Atlanta 1996" , y: 16 },
{ label:"Sydney 2000", y: 28 },
{ label: "Athens 2004", y: 32 },
{ label: "Bắc Kinh 2008", y: 48 },
{ label: "London 2012", y: 38 },
{ label: "Rio 2016", y: 26 }
]
},
{
type: "spline",
name: "Anh",
showInLegend: true,
dataPoints: [
{ label: "Atlanta 1996" , y: 1 },
{ label:"Sydney 2000", y: 11 },
{ label: "Athens 2004", y: 9 },
{ label: "Bắc Kinh 2008", y: 19 },
{ label: "London 2012", y: 29 },
{ label: "Rio 2016", y: 27 }
]
},
{
type: "spline",
name: "Nga",
showInLegend: true,
dataPoints: [
{ label: "Atlanta 1996" , y: 26 },
{ label:"Sydney 2000", y: 32 },
{ label: "Athens 2004", y: 28 },
{ label: "Bắc Kinh 2008", y: 22 },
{ label: "London 2012", y: 20 },
{ label: "Rio 2016", y: 19 }
]
},
{
type: "spline",
name: "Hàn Quốc",
showInLegend: true,
dataPoints: [
{ label: "Atlanta 1996" , y: 7 },
{ label:"Sydney 2000", y: 8 },
{ label: "Athens 2004", y: 9 },
{ label: "Bắc Kinh 2008", y: 13 },
{ label: "London 2012", y: 13 },
{ label: "Rio 2016", y: 9 }
]
},
{
type: "spline",
name: "Đức",
showInLegend: true,
dataPoints: [
{ label: "Atlanta 1996" , y: 20 },
{ label:"Sydney 2000", y: 13 },
{ label: "Athens 2004", y: 13 },
{ label: "Bắc Kinh 2008", y: 16 },
{ label: "London 2012", y: 11 },
{ label: "Rio 2016", y: 17 }
]
}]
});
chart.render();
function toggleDataSeries(e) {
if(typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
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ể kích hoạt chú giải bằng thuộc tính showInLegend. Bạn cũng có thể thay đổi nội dung trong chú thích bằng legendText. legendMarkerType đổi kiểu đánh dấu cho dataSeries.
Một số tùy chỉnh khác bao gồm:
- legendMarkerColor - Màu đánh dấu chú thích
- legendMarkerBorderThickness - Độ dày đường viền đánh dấu chú thích
- legendSize - Kích thước chú giải
Bạn nên đọc
-
Cách thêm Bootstrap trong app Vue.js
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Code mẫu JavaScript tạo biểu đồ nối hàm với trục thứ hai
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường
-
Tạo game Tic-Tac-Toe bằng JavaScript, HTML và CSS
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
Code mẫu JavaScript tạo biểu đồ/đồ thị hàm nối trục
-
JavaScript là gì?
-
Code JavaScript tạo biểu đồ đường với nhiều trục
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:


Cũ vẫn chất
-
Cách xóa bất cứ chi tiết nào trong ảnh với GIMP
Hôm qua -
Firmware là gì? Firmware khác Software như thế nào?
Hôm qua -
Đội hình Định Mệnh DTCL mùa 11, cách chơi, lên đồ
Hôm qua -
Hướng dẫn đóng dấu ngoặc số âm trong Excel
Hôm qua 1 -
Hàm trong Python là gì? Các hàm trong Python
Hôm qua 2 -
Giải phương trình bậc 2 một ẩn bằng Python
Hôm qua 3 -
Cách thiết lập VPN trên iPhone hoặc iPad
Hôm qua 3 -
45 câu đố vui cho trẻ về nghề nghiệp
Hôm qua -
Cách tính BHXH 1 lần, hưởng BHXH 1 lần mới nhất
Hôm qua -
Code Roblox mới nhất tháng 10 và cách nhập Roblox Promo Code 2025
Hôm qua 6