Code JavaScript tạo biểu đồ thanh đa chuỗi dữ liệu
Biểu đồ thanh đa chuỗi dữ liệu (Multi Series Bar Chart) được tạo bằng JavaScript hữu ích trong việc làm nổi bật sự khác biệt giữa hai hoặc nhiều tập hợp dữ liệu khác nhau. Các thanh được đặt cạnh nhau trong đồ thị/biểu đồ này. Thêm chú giải trong biểu đồ thanh này giúp người xem dễ đọc thông tin hơn.
Ví dụ bên dưới minh họa một mẫu biểu đồ thanh đa chuỗi dữ liệu được tạo bằng JavaScript đơn giản nhất. Bài viết cũng bao gồm mã nguồn cho bạn 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 type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Huy chương Olympic mọi thời đại (tới Olympics 2016)"
},
axisY: {
title: "Huy chương",
includeZero: true
},
legend: {
cursor:"pointer",
itemclick : toggleDataSeries
},
toolTip: {
shared: true,
content: toolTipFormatter
},
data: [{
type: "bar",
showInLegend: true,
name: "Vàng",
color: "gold",
dataPoints: [
{ y: 243, label: "Ý" },
{ y: 236, label: "Trung Quốc" },
{ y: 243, label: "Pháp" },
{ y: 273, label: "Anh" },
{ y: 269, label: "Đức" },
{ y: 196, label: "Nga" },
{ y: 1118, label: "Mỹ" }
]
},
{
type: "bar",
showInLegend: true,
name: "Bạc",
color: "silver",
dataPoints: [
{ y: 212, label: "Ý" },
{ y: 186, label: "Trung Quốc" },
{ y: 272, label: "Pháp" },
{ y: 299, label: "Anh" },
{ y: 270, label: "Đức" },
{ y: 165, label: "Nga" },
{ y: 896, label: "Mỹ" }
]
},
{
type: "bar",
showInLegend: true,
name: "Đồng",
color: "#A57164",
dataPoints: [
{ y: 236, label: "Ý" },
{ y: 172, label: "Trung Quốc" },
{ y: 309, label: "Pháp" },
{ y: 302, label: "Anh" },
{ y: 285, label: "Đức" },
{ y: 188, label: "Nga" },
{ y: 788, label: "Mỹ" }
]
}]
});
chart.render();
function toolTipFormatter(e) {
var str = "";
var total = 0 ;
var str3;
var str2 ;
for (var i = 0; i < e.entries.length; i++){
var str1 = "<span style= \"color:"+e.entries[i].dataSeries.color + "\">" + e.entries[i].dataSeries.name + "</span>: <strong>"+ e.entries[i].dataPoint.y + "</strong> <br/>" ;
total = e.entries[i].dataPoint.y + total;
str = str.concat(str1);
}
str2 = "<strong>" + e.entries[0].dataPoint.label + "</strong> <br/>";
str3 = "<span style = \"color:Tomato\">Total: </span><strong>" + total + "</strong><br/>";
return (str2.concat(str)).concat(str3);
}
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
Tinh chỉnh biểu đồ
Người dùng thoải mái chỉnh sửa các thuộc tính trong mẫu biểu đồ JavaScript kể trên như ý muốn. Ví dụ:
showInLegend
: Hiện chú giải cho từng chuỗi dữ liệu.legendMarkerType
: Các kiểu đánh dấu khác nhau cho chú giải.legendText
: Kiểu chữ chú giảiShared(toolTip)
: Chia sẻ toolTipColor
: Màu sắcfillOpacity
: Độ trong suốt cho thành phần
Bạn nên đọ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
-
Tổng hợp bài tập JavaScript có code mẫu
Hôm qua 1 -
Cách hiện đuôi file, xem phần mở rộng file trên Windows 11/10/7/8
Hôm qua -
Lệnh ALTER TABLE trong SQL Server
Hôm qua -
Cách kiểm tra phiên bản Excel đang sử dụng
Hôm qua -
Những câu hỏi đáng suy ngẫm về giá trị cuộc sống
Hôm qua -
8 bước khắc phục sự cố mất âm thanh trong Windows
Hôm qua 2 -
Bao nhiêu người có thể sử dụng cùng lúc một tài khoản Netflix?
Hôm qua -
Cách tải và cập nhật driver Bluetooth cho Windows 10
Hôm qua -
Khắc phục sự cố không thể chạy được file .exe
Hôm qua 4 -
Các cách căn giữa ô trong bảng trên Word
Hôm qua 1