Code biểu đồ/đồ thị thanh kết hợp sai số

javascript bar error chart7 size 300x0 znd

Biểu đồ độ sai/sai số cho bạn thấy sơ qua các biên độ lỗi và độ tin cậy. Đồ thị sai số kết hợp với biểu đồ thanh sẽ tạo thành biểu đồ thanh sai số.

Ví dụ bên dưới minh họa một mẫu biểu đồ thanh kết hợp với sai số được tạo bằng JavaScript. Như bạn thấy, dạng biểu đồ này hỗ trợ cả hiệu ứng động, thu phóng, xoay, sự kiện, xuất dưới dạng ảnh và tương thích chéo trình duyệt. Bài viết cũng cung cấp mã nguồn cho bạn chỉnh sửa trong trình duyệt hoặc lưu về máy dể chạy nội bộ.

Code biểu đồ/đồ thị thanh kết hợp sai số

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "QOS - Kết quả khảo sát"
	},
	axisY:{
		title: "Giá trị phản hồi",
		includeZero: true,
		interval: 10
	},
	toolTip: {
		shared: true
	},
	data: [{
			type: "bar",
			name: "Điểm trung bình",
			toolTipContent: "<b>{label}</b> <br> <span style=\"color:#4F81BC\">{name}</span>: {y}",
			dataPoints: [
				{ y: 94, label: "Độ chính xác của đơn hàng" },
				{ y: 74, label: "Đóng gói" },
				{ y: 80, label: "Số lượng" },
				{ y: 88, label: "Chất lượng" },
				{ y: 76, label: "Vận chuyển" }
			]
		},
		{
			type: "error",
			name: "Phạm vi thay đổi",
			toolTipContent: "<span style=\"color:#C0504E\">{name}</span>: {y[0]} - {y[1]}",
			dataPoints: [
				{ y: [92, 98], label: "Đơn hàng chính xác" },
				{ y: [70, 78], label: "Đóng gói" },
				{ y: [78, 85], label: "Số lượng" },
				{ y: [85, 92], label: "Chất lượng" },
				{ y: [72, 78], label: "Vận chuyển" }
			]
	}]
});
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 *