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.
214
Bài trước
Bạn nên đọc
-
Code JavaScript biểu đồ cột với nhiều trục
-
Code JavaScript tạo biểu đồ thanh có ngắt trục tọa độ
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
Code JavaScript tạo biểu đồ thanh đa chuỗi dữ liệu
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
Tổng hợp bài tập JavaScript có code mẫu
-
JavaScript là gì?
-
Code JavaScript tạo biểu đồ/đồ thị cột theo phạm vi
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
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 -
Hướng dẫn chèn chữ vào ảnh trong Word
Hôm qua -
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 -
Code GoGo Tam Quốc mới nhất
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 -
Địa chỉ 26 cửa hàng Uniqlo chính hãng tại Việt Nam
Hôm qua -
Cách sử dụng lịch sử Clipboard trong Windows 10
Hôm qua -
Cách xóa tin nhắn Telegram, lịch sử tin nhắn Telegram
Hôm qua -
Câu lệnh COALESCE trong SQL Server
Hôm qua -
Lời chúc ngày Gia đình Việt Nam 28/6 hay và ý nghĩa
Hôm qua 2