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 JavaScript tạo biểu đồ/đồ thị đường dạng động
-
Tạo game Tic-Tac-Toe bằng JavaScript, HTML và CSS
-
Code mẫu JavaScript tạo biểu đồ/đồ thị hàm nối trục
-
Code JavaScript tạo biểu đồ đường với nhiều trục
-
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
Có thể bạn quan tâm
-
Code JavaScript tạo mẫu biểu đồ Pareto với nhãn Index/Data
-
Code JavaScript tạo biểu đồ phân tán với các dấu tùy chỉnh
-
Code JavaScript tạo biểu đồ & đồ thị Pareto
-
Code JavaScript tạo biểu đồ thu phóng với tính năng Zoom & Pan
-
Code JavaScript tạo biểu đồ & đồ thị sai số
-
Code JavaScript tạo biểu đồ/đồ thị đường sai số