Code JavaScript tạo biểu đồ box và whisker chứa điểm ngoại lai
Outlier hay điểm ngoại lệ là các giá trị nằm ngoài giá trị điểm dữ liệu tối thiểu và tối đa. Bất kỳ dữ liệu không nằm giữa các điểm cực trị (whisker) đều là điểm ngoại lệ và thường được biểu thị bằng chấm tròn hoặc dấu cộng. Bạn có thể thêm các chuỗi phân tán trong biểu đồ để hiện các giá trị outlier.
Ví dụ bên dưới minh họa một mẫu biểu đồ box & whisker với các giá trị outlier được thể hiện qua biểu đồ phân tán. Bài viết cũng cung cấp mã nguồn JavaScript cho bạn chỉnh sửa 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", {
animationEnabled: true,
theme: "light2", // Bạn có thể đổi thành "light1", "light2", "dark1", "dark2"
title:{
text: "Michelson - Thí nghiệm Morley"
},
subtitles: [{
text: "Tốc độ = (Giá trị được cung cấp + 299,000) km/s",
fontSize: 15
}],
axisY: {
title: "Đọc (km/s)",
tickLength: 0,
gridDashType: "dash",
stripLines: [{
value: 792.5,
label: "Tốc độ thật sự",
labelFontColor: "#FF0800",
showOnTop: true,
labelAlign: "center",
color: "#FF0800"
}]
},
legend: {
cursor: "pointer",
itemclick: toggleDataSeries
},
data: [{
type: "boxAndWhisker",
toolTipContent: "<span style=\"color:#6D78AD\">{label}:</span> <br><b>Tối đa:</b> {y[3]},<br><b>Q3:</b> {y[2]},<br><b>Trung bình:</b> {y[4]}<br><b>Q1:</b> {y[1]}<br><b>Tối thiểu:</b> {y[0]}",
yValueFormatString: "#####.0 km/s",
dataPoints: [
{ x: 0, label: "Experiment 1", y: [740, 850, 980, 1070, 950] },
{ x: 1, label: "Experiment 2", y: [760, 800, 895, 960, 845] },
{ x: 2, label: "Experiment 3", y: [840, 840, 880, 910, 860] },
{ x: 3, label: "Experiment 4", y: [720, 762.5, 875, 920, 815] },
{ x: 4, label: "Experiment 5", y: [740, 802.5, 870, 950, 810] }
]
},
{
type: "scatter",
name: "Giá trị Outlier",
toolTipContent: "<span style=\"color:#C0504E\">{name}</span>: {y} km/s",
showInLegend: true,
dataPoints: [
{ x: 0, label: "Experiment 1", y: 650 },
{ x: 2, label: "Experiment 3", y: 620 },
{ x: 2, label: "Experiment 3", y: 720 },
{ x: 2, label: "Experiment 3", y: 720 },
{ x: 2, label: "Experiment 3", y: 970 },
{ x: 2, label: "Experiment 3", y: 950 }
]
}]
});
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 đồ
Bạn có thể thay đổi cách đánh dấu các giá trị ngoại lệ qua thuộc tính markerType của chuỗi phân tán. Những lựa chọn tùy biến khác bao gồm: markerSize - kích thước marker, markerColor - màu marker, markerBorderColor - màu đường viền marker...
Bạn nên đọc
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:


Cũ vẫn chất
-
19/5 là ngày gì? Ngày 19 tháng 5 năm 1890 là ngày gì?
Hôm qua 6 -
Outlook là gì? Cách sử dụng Outlook cho người mới
2 ngày -
Cách kích hoạt Windows Subsystem for Linux trên Windows
Hôm qua -
Tổng hợp 1001+ thuật ngữ trong Liên Quân Mobile
2 ngày 7 -
Cách tìm tài khoản liên kết với địa chỉ email
Hôm qua -
Cách thức tỉnh trái ác quỷ Blox Fruit
2 ngày -
Hình nền trắng, ảnh nền trắng đẹp
3 ngày -
Khối D01 thi môn nào, học ngành nào?
Hôm qua -
Code Wuthering Waves mới nhất 18/05/2025 và hướng dẫn đổi code
3 ngày -
Tại sao khởi động lại router có thể khắc phục được nhiều vấn đề?
Hôm qua