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
-
Cách đăng ký tài khoản Vk Free Fire
Hôm qua -
Cách sửa lỗi không tải được file lên Google Drive
Hôm qua 1 -
Cách ẩn/bỏ ẩn thanh Taskbar trên Windows 11
Hôm qua -
Irelia DTCL: Lên đồ Irelia mùa 11, đồ chuẩn Irelia DTCL
Hôm qua -
Yandere là gì? Tại sao Yandere lại đáng sợ thế?
Hôm qua -
Cách kiểm tra dung lượng ổ cứng máy tính
Hôm qua -
DLC Boot
-
Một số thủ thuật tùy biến Taskbar trên Windows 10 hiệu quả
Hôm qua 1 -
Cách đặt Google là công cụ tìm kiếm mặc định trên Microsoft Edge
Hôm qua -
5 cách cơ bản để update, cập nhật driver cho máy tính
Hôm qua