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ạn nên đọc
-
Code JavaScript tạo biểu đồ/đồ thị đường sai số
-
Code JavaScript tạo biểu đồ & đồ thị sai số
-
Code JavaScript tạo biểu đồ/đồ thị đường dạng động
-
JavaScript là gì?
-
Code JavaScript tạo biểu đồ đa chuỗi update dữ liệu trực tiếp
-
Tổng hợp bài tập JavaScript có code mẫu
-
Code JavaScript tạo mẫu biểu đồ kết hợp OHLC và biểu đồ đường
-
Code JavaScript tạo biểu đồ & đồ thị Pareto
-
Code JavaScript tạo mẫu biểu đồ Pareto với nhãn Index/Data
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
Cách tắt app chạy ngầm Windows 11, giảm ngốn RAM trên Win 11
Hôm qua -
Code Đại Hiệp Chạy Đi mới nhất và cách nhập code
Hôm qua -
Thủ thuật tạo shortcut chạy ứng dụng dưới quyền Admin
Hôm qua -
Hàm RIGHT, cách dùng hàm cắt chuỗi ký tự bên phải trong Excel
Hôm qua -
Cách thêm máy in vào Windows 10
Hôm qua 2 -
Bro là gì? Ý nghĩa của Bro?
Hôm qua -
Hướng dẫn sử dụng ổ USB Flash với thiết bị Android
Hôm qua -
Slogan là gì? 90+ Slogan hay, những câu slogan chất, ngắn gọn, ý nghĩa nhất
Hôm qua -
Cách lấy dữ liệu từ web vào Excel
Hôm qua -
Cách sửa lỗi “Ethernet doesn’t have a valid IP configuration”
Hôm qua