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
-
Code mẫu JavaScript tạo biểu đồ nối hàm với trục thứ hai
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
Cách thêm Bootstrap trong app Vue.js
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
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
-
JavaScript là gì?
-
Tổng hợp bài tập JavaScript có code mẫu
-
Code mẫu JavaScript tạo biểu đồ/đồ thị hàm nối trục


Cũ vẫn chất
-
Cách chỉnh cấu hình trong Mini World Block Art
Hôm qua -
Cách thay đổi DNS Server trên Windows 11
Hôm qua -
Microsoft ra mắt Windows 11 IoT Enterprise LTSC 2024 với khả năng hỗ trợ thiết bị rộng hơn và nhiều thay đổi lớn
Hôm qua -
Nhận xúc xắc Piggy Go mới nhất, Spin Piggy Go mới nhất
Hôm qua 3 -
40+ câu nói ‘xoắn lưỡi’ tiếng Việt, Anh, thách bạn có thể nói nhanh liên tiếp 5 lần mà vẫn trôi chảy
Hôm qua -
Lịch phát sóng VTV1 hôm nay 07/02/2025
Hôm qua -
Code Tiếu Ngạo Gamota mới nhất đổi vàng khóa, đàn hương
Hôm qua -
Cách sửa lỗi BSOD Memory Management
Hôm qua 1 -
6 cách tra cứu điểm thi vào lớp 10 Hà Nội 2025
Hôm qua -
5 mẹo xem lịch sử máy tính trên iPhone
Hôm qua