Code JavaScript tạo biểu đồ kết hợp giữa vùng và đường
Bạn có thể kết hợp biểu đồ vùng và đường giống như thêm các chuỗi dữ liệu khác. Những biểu đồ này có tính tương tác, phản hồi, hỗ trợ hiệu ứng động & xuất ảnh.
Ví dụ bên dưới minh họa biến thiên nhiệt độ hàng ngày cùng với giá trị trung bình của nó bằng cách kết hợp biểu đồ vùng theo phạm vi và đường được tạo bằng JavaScript. Bài viết cũng cung cấp code 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>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
title: {
text: "Biến thiên nhiệt độ hàng ngày ở Bengaluru - 7/2017"
},
axisX: {
valueFormatString: "DD MMM"
},
axisY: {
title: "Nhiệt độ (°C)",
includeZero: true
},
toolTip: {
shared: true
},
legend: {
dockInsidePlotArea: true,
cursor: "pointer",
itemclick: toggleDataSeries
},
data: [{
type: "rangeArea",
markerSize: 0,
name: "Phạm vi nhiêt độ",
showInLegend: true,
toolTipContent: "{x}<br><span style=\"color:#6D77AC\">{name}</span><br>Nhỏ nhất: {y[1]} °C<br>Cao nhất: {y[0]} °C",
dataPoints: [
{ x: new Date(2017, 6, 1), y: [30, 19] },
{ x: new Date(2017, 6, 2), y: [30, 21] },
{ x: new Date(2017, 6, 3), y: [29, 21] },
{ x: new Date(2017, 6, 4), y: [28, 20] },
{ x: new Date(2017, 6, 5), y: [29, 20] },
{ x: new Date(2017, 6, 6), y: [29, 20] },
{ x: new Date(2017, 6, 7), y: [27, 21] },
{ x: new Date(2017, 6, 8), y: [26, 20] },
{ x: new Date(2017, 6, 9), y: [30, 20] },
{ x: new Date(2017, 6, 10), y: [30, 21] },
{ x: new Date(2017, 6, 11), y: [30, 21] },
{ x: new Date(2017, 6, 12),y: [29, 21] },
{ x: new Date(2017, 6, 13),y: [27, 20] },
{ x: new Date(2017, 6, 14),y: [27, 20] },
{ x: new Date(2017, 6, 15),y: [25, 20] },
{ x: new Date(2017, 6, 16),y: [29, 20] },
{ x: new Date(2017, 6, 17),y: [28, 20] },
{ x: new Date(2017, 6, 18),y: [27, 21] },
{ x: new Date(2017, 6, 19),y: [27, 21] },
{ x: new Date(2017, 6, 20),y: [29, 21] },
{ x: new Date(2017, 6, 21),y: [29, 20] },
{ x: new Date(2017, 6, 22),y: [31, 20] },
{ x: new Date(2017, 6, 23),y: [30, 21] },
{ x: new Date(2017, 6, 24),y: [30, 20] },
{ x: new Date(2017, 6, 25),y: [31, 21] },
{ x: new Date(2017, 6, 26),y: [30, 21] },
{ x: new Date(2017, 6, 27),y: [31, 21] },
{ x: new Date(2017, 6, 28),y: [31, 21] },
{ x: new Date(2017, 6, 29),y: [31, 21] },
{ x: new Date(2017, 6, 30), y: [31, 21] },
{ x: new Date(2017, 6, 31), y: [31, 22] }
]
}]
});
chart.render();
addAverages();
function addAverages() {
var dps = [];
for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
dps.push({
x: chart.options.data[0].dataPoints[i].x,
y: (chart.options.data[0].dataPoints[i].y[0] + chart.options.data[0].dataPoints[i].y[1]) / 2
});
}
chart.options.data.push({
type: "line",
name: "Trung bình",
showInLegend: true,
markerType: "triangle",
markerSize: 0,
yValueFormatString: "##.0 °C",
dataPoints: dps
});
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://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>
Nguồn: CanvasJS
Tùy biến biểu đồ
Giống như mọi kiểu biểu đồ khác, bạn có thể tinh chỉnh dạng biểu đồ/đồ thị kết hợp này bằng cách thay đổi các thuộc tính, ví dụ:
indexLabel
: Thêm nhãn dữ liệu/chỉ mục.indexLabelFontColor
: Màu font nhãn chỉ mụcindexLabelBackgroundColor
: Màu background nhãn chỉ mục- …
315
Bài trước
Bạn nên đọc
-
Tổng hợp bài tập JavaScript có code mẫu
-
Code JavaScript tạo biểu đồ & đồ thị sai số
-
Code JavaScript tạo mẫu biểu đồ Pareto với nhãn Index/Data
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
Code JavaScript tạo biểu đồ & đồ thị Pareto
-
Code biểu đồ/đồ thị thanh kết hợp sai số
-
Code JavaScript tạo biểu đồ/đồ thị đường sai số
-
Code JavaScript tạo biểu đồ/đồ thị động
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
Code GoGo Tam Quốc mới nhất
Hôm qua -
Cách xóa tin nhắn Telegram, lịch sử tin nhắn Telegram
Hôm qua -
Cách sửa lỗi IRQL NOT LESS OR EQUAL trên Windows
Hôm qua -
Tại sao giao diện Windows lại ngày càng rời rạc?
Hôm qua -
Cách tạo USB boot đa năng, USB cứu hộ bằng DLC Boot
Hôm qua -
Sửa lỗi Fatal Error Wuthering Waves
Hôm qua -
Hướng dẫn chèn chữ vào ảnh trong Word
Hôm qua -
Pokemon Go - Thủ thuật tiến hóa Eevee thành bất cứ loại Pokemon nào
Hôm qua -
Đây là quốc gia duy nhất từng lấy cờ trắng làm quốc kỳ
Hôm qua -
Mua laptop Windows hiện khó hơn bao giờ hết
Hôm qua