JavaScript là ngôn ngữ lập trình phổ biến cho việc phát triển các ứng dụng web. Việc tạo biểu đồ/đồ thị thanh trong JavaScript rất dễ dàng. Đầu tiên, bạn cần tạo một HTML canvas để vẽ biểu đồ. Sau đó, sử dụng thư viện hoặc bộ công cụ như Chart.js để thiết kế và vẽ biểu đồ/đồ thị theo yêu cầu. Bạn có thể tùy chỉnh các phạm vi, dữ liệu đầu vào, màu sắc, loại biểu đồ và nhiều yếu tố khác. JavaScript cung cấp cho bạn sức mạnh và linh hoạt trong việc tạo biểu đồ / đồ thị thanh theo phạm vi.
Viết JavaScript để tạo mẫu biểu thanh theo phạm vi trên đồ thị.
Biểu đồ thanh theo phạm vi bằng JavaScript tương tự biểu đồ cột. Nhưng thanh được đặt ngang để nhấn mạnh giá trị trục y. Biểu đồ này có tính tương tác, hỗ trợ hoạt ảnh, thu phóng, xoay và xuất dưới dạng ảnh.
Dưới đây là một ví dụ về một biểu đồ cột được tạo bằng JavaScript, cùng với mã nguồn HTML bạn có thể chỉnh sửa trực tiếp trên trình duyệt hoặc lưu về máy để chạy cục bộ.
“`html
Mẫu Biểu đồ Thanh
“`
Bạn có thể sao chép đoạn mã này vào trình duyệt hoặc lưu thành một tệp tin HTML để chạy biểu đồ cục bộ.
<!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 ></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>Nguồn: Thư viện CanvasJS
Tùy biến biểu đồ
Sử dụng “indexlabel” để tạo 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ố tùy chọn tùy biến khác bao gồm: “dataPointWidth”, “fillOpacity”…
Như bạn có thể thấy, việc tạo biểu đồ này không quá phức tạp. Chỉ cần sử dụng một số đoạn mã Java cơ bản, bạn có thể tự tay thiết kế và tạo ra biểu đồ trực quan cho bất kỳ trang web nào.
Nguồn: Code JavaScript để tạo biểu đồ/đồ thị thanh theo phạm vi.
var chartData = [
{ range: “0-20”, value: 15 },
{ range: “21-40”, value: 35 },
{ range: “41-60”, value: 45 },
{ range: “61-80”, value: 65 },
{ range: “81-100”, value: 85 }
];
var chart = document.getElementById(“chart”);
var chartBars = document.createElement(“ul”);
chartData.forEach(function(data) {
var chartBar = document.createElement(“li”);
chartBar.style.width = data.value * 2 + “px”;
chartBar.innerHTML = data.range;
chartBars.appendChild(chartBar);
});
chart.appendChild(chartBars);