Code mẫu JavaScript tạo biểu đồ cột nhiều chuỗi dữ liệu
Biểu đồ cột đa chuỗi dữ liệu giúp trực quan hóa các nhóm dữ liệu theo phạm vi liên quan, chẳng hạn như giá trị cao và thấp. Những biểu đồ đa chuỗi dữ liệu rất hữu ích khi so sánh sự khác biệt giữa nhiều chuỗi dữ liệu.
Ví dụ bên dưới minh họa một biểu đồ cột đa dãy được tạo bằng JavaScript. Bạn sẽ có cả code nguồn để chỉnh sửa như ý muốn.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
exportEnabled: true,
title:{
text: "So sánh nhiệt độ giữa hai thành phố"
},
axisX: {
valueFormatString: "MMM"
},
axisY: {
suffix: " °C"
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
itemclick: toggleDataSeries
},
data: [{
type: "rangeColumn",
name: "City 1",
showInLegend: true,
yValueFormatString: "#0.## °C",
xValueFormatString: "MMM, YYYY",
dataPoints: [
{ x: new Date(2016, 00), y: [08, 20] },
{ x: new Date(2016, 01), y: [10, 24] },
{ x: new Date(2016, 02), y: [16, 29] },
{ x: new Date(2016, 03), y: [21, 36] },
{ x: new Date(2016, 04), y: [26, 39] },
{ x: new Date(2016, 05), y: [22, 39] },
{ x: new Date(2016, 06), y: [20, 35] },
{ x: new Date(2016, 07), y: [20, 34] },
{ x: new Date(2016, 08), y: [20, 34] },
{ x: new Date(2016, 09), y: [19, 33] },
{ x: new Date(2016, 10), y: [13, 28] },
{ x: new Date(2016, 11), y: [09, 23] }
]
},
{
type: "rangeColumn",
name: "City 2",
showInLegend: true,
yValueFormatString: "#0.## °C",
xValueFormatString: "MMM, YYYY",
dataPoints: [
{ x: new Date(2016, 00), y: [16, 28] },
{ x: new Date(2016, 01), y: [18, 31] },
{ x: new Date(2016, 02), y: [20, 33] },
{ x: new Date(2016, 03), y: [22, 34] },
{ x: new Date(2016, 04), y: [22, 33] },
{ x: new Date(2016, 05), y: [20, 29] },
{ x: new Date(2016, 06), y: [20, 28] },
{ x: new Date(2016, 07), y: [20, 28] },
{ x: new Date(2016, 08), y: [20, 28] },
{ x: new Date(2016, 09), y: [20, 28] },
{ x: new Date(2016, 10), y: [14, 27] },
{ x: new Date(2016, 11), y: [11, 26] }
]
}]
});
chart.render();
function toggleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.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 chỉnh biểu đồ
Tương tự như các biểu đồ được tạo bằng JavaScript, bạn có thể chỉnh sửa các thuộc tính liên quan để đạt được kết quả như ý muốn. Ví dụ:
showInLegend
: Hiện chú giảiverticalAlign
: Đặt chú giải theo chiều dọchorizontalAlign
: Đặt chú giải theo chiều ngangShared(toolTip)
: Chia sẻ tooltipcolor
: Màu sắclegendText
: Kiểu text chú giảifillOpacity
: Độ mờ- Và nhiều hơn thế nữa.
215
Bạn nên đọc
-
Code JavaScript tạo biểu đồ/đồ thị cột theo phạm vi
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Code JavaScript biểu đồ cột với nhiều trục
-
Tổng hợp bài tập JavaScript có code mẫu
-
Code JavaScript tạo biểu đồ & đồ thị thanh
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
Code JavaScript tạo biểu đồ thanh có ngắt trục tọa độ
-
Code JavaScript tạo biểu đồ thanh đa chuỗi dữ liệu
-
JavaScript là gì?
Xác thực tài khoản!
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:
Số điện thoại chưa đúng định dạng!
0 Bình luận
Sắp xếp theo

Xóa Đăng nhập để Gửi

Cũ vẫn chất
-
Cách chuyển đổi từ Legacy sang UEFI trong BIOS
Hôm qua 4 -
Đáp án Thử Tài Lịch Sử Liên Quân FULL các đáp án, gợi ý
Hôm qua 21 -
Antimalware Service Executable là gì và tại sao nó lại chạy trên máy tính?
Hôm qua -
Cách cài Ubuntu song song với Windows bằng USB
Hôm qua -
11 địa danh bí ẩn bị làm mờ trên Google Maps, điều gì đang bị che giấu?
Hôm qua -
‘Để giành’ hay ‘để dành’, ‘dành cho’ hay ‘giành cho’, cách viết nào đúng chính tả?
Hôm qua -
Cách tắt chế độ Secure Boot và mở chế độ Boot Legacy
Hôm qua -
8 cách kiểm tra ổ cứng hiệu quả giúp khám sức khỏe định kỳ của ổ cứng
Hôm qua -
Cách sửa lỗi 0x0000011b khi in qua mạng trên Windows 10
Hôm qua 12 -
12 giờ trưa là AM hay PM trong tiếng Anh?
Hôm qua 1