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
-
Tạo game Tic-Tac-Toe bằng JavaScript, HTML và CSS
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
Code JavaScript tạo biểu đồ đường với nhiều trục
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường
-
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
-
Cách thêm Bootstrap trong app Vue.js
-
Code mẫu JavaScript tạo biểu đồ nối hàm với trục thứ hai
Cũ vẫn chất
-
Tại sao giao diện Windows lại ngày càng rời rạc?
Hôm qua -
Code GoGo Tam Quốc mới nhất
Hôm qua -
Cách sửa lỗi IRQL NOT LESS OR EQUAL trên Windows
Hôm qua -
Mua laptop Windows hiện khó hơn bao giờ hết
Hôm qua -
Sửa lỗi Fatal Error Wuthering Waves
Hôm qua -
Cách xóa tin nhắn Telegram, lịch sử tin nhắn Telegram
Hôm qua -
Đây là quốc gia duy nhất từng lấy cờ trắng làm quốc kỳ
Hôm qua -
Pokemon Go - Thủ thuật tiến hóa Eevee thành bất cứ loại Pokemon nào
Hôm qua -
Cách tạo USB boot đa năng, USB cứu hộ bằng DLC Boot
Hôm qua -
Hướng dẫn chèn chữ vào ảnh trong Word
Hôm qua