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
220
Bài trước
Bạn nên đọc
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
Cách xem thông tin chi tiết về hệ thống và phần cứng Linux trên dòng lệnh
Hôm qua -
Gia chủ tuổi Tuất nên chọn ai xông đất, xông nhà hợp năm 2024
Hôm qua 1 -
Lời chúc ngày Gia đình Việt Nam 28/6 hay và ý nghĩa
Hôm qua 2 -
Cách sử dụng lịch sử Clipboard trong Windows 10
Hôm qua -
Hướng dẫn chèn chữ vào ảnh trong Word
Hôm qua -
Câu lệnh COALESCE trong SQL Server
Hôm qua -
Cách xóa tin nhắn Telegram, lịch sử tin nhắn Telegram
Hôm qua -
Code GoGo Tam Quốc mới nhất
Hôm qua -
Địa chỉ 26 cửa hàng Uniqlo chính hãng tại Việt Nam
Hôm qua -
Code HTHT mới nhất tháng 2, giftcode Huyền Thoại Hải Tặc mới nhất 2024
Hôm qua 23