Code JavaScript tạo mẫu biểu đồ/đồ thị thanh theo phạm vi

Kun cute

Biểu đồ thanh theo phạm vi được tạo bằng JavaScript dưới đây tương tự như biểu đồ cột theo phạm vi, ngoại trừ việc các thanh được đặt theo chiều ngang để nhấn mạnh những giá trị y trên trục. Chúng cũng được trình bày giữa một loạt các giá trị - cao & thấp. Mẫu biểu đồ này có tính tương tác, hỗ trợ hoạt ảnh, thu phóng, xoay & xuất dưới dạng ảnh.

Ví dụ bên dưới hiện một mẫu biểu đồ thanh theo phạm vi được tạo bằng JavaScript cùng với mã nguồn HTML mà bạn có thể chỉnh sửa trong trình duyệt hoặc lưu về máy để chạy nội bộ.

Mẫu biểu đồ Java theo phạm vi

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	title: {
		text: "Lương nhân viên ở một công ty"
	},
	axisX: {
		title: "Phòng ban"
	},
	axisY: {
		title: "Lương tính bằng USD",
		interval: 10,
		suffix: "k",
		prefix: "$"
	}, 
	data: [{
		type: "rangeBar",
		showInLegend: true,
		yValueFormatString: "$#0.#K",
		indexLabel: "{y[#index]}",
		legendText: "Lương tối thiểu và cao nhất theo bộ phận",
		toolTipContent: "<b>{label}</b>: {y[0]} to {y[1]}",
		dataPoints: [
			{ x: 10, y:[80, 115], label: "Nhà khoa học dữ liệu" },
			{ x: 20, y:[95, 141], label: "Quản lý sản phẩm" },
			{ x: 30, y:[98, 115], label: "Lập trình web" },
			{ x: 40, y:[90, 160], label: "Kỹ sư phần mềm" },
			{ x: 50, y:[100,152], label: "Đảm bảo chất lượng" }
		]
	}]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Nguồn: CanvasJS

Tùy biến biểu đồ

Dùng indexlabel làm biểu đồ dễ đọc hơn. Bạn cũng có thể thay đổi màu sắc của các thanh bằng color. Một số lựa chọn tùy biến khác bao gồm: dataPointWidth, fillOpacity…

Như bạn thấy, cách tạo biểu đồ này không quá khó. Chỉ bằng một số đoạn mã Java cơ bản, có thể tự tay thiết kế tạo nên biểu đồ trực quan cho mọi trang web.

Thứ Hai, 06/03/2023 15:43

1 ★ 2 👨 210

#JavaScript

Bạn nên đọc

Xác thực tài khoản!

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:

Số điện thoại chưa đúng định dạng!