Code JavaScript tạo biểu đồ box và whisker chứa điểm ngoại lai

Javascript box chart 7 size 300x0 znd

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ộ.

Biểu đồ hộp có điểm ngoại lệ

<!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>

Leave a Reply

Your email address will not be published. Required fields are marked *