1695785658 javascript chart 7

Tạo biểu đồ/đồ thị xếp chồng cột hoàn toàn bằng mã JavaScript

Bởi

Việc tạo biểu đồ/đồ thị xếp chồng cột bằng mã JavaScript cho phép bạn trình bày dữ liệu một cách trực quan và rõ ràng. Sử dụng JavaScript, bạn có thể tạo ra biểu đồ với các cột xếp chồng lên nhau, mô phỏng các loại dữ liệu khác nhau. Mã JavaScript giúp bạn điều chỉnh màu sắc, kích thước và hiệu ứng của các cột, giúp tạo ra biểu đồ đẹp và dễ nhìn. Với việc tạo biểu đồ/đồ thị xếp chồng cột bằng mã JavaScript, bạn có thể trực quan hóa dữ liệu một cách dễ dàng và hấp dẫn.

Tạo biểu đồ đo truy cập bằng Chart.js.

Biểu đồ xếp chồng cột toàn phần, gọi là biểu đồ thanh xếp chồng 100%, tính chiều cao từng cột dựa trên phần trăm tổng số. Đây giúp so sánh giá trị của mỗi chuỗi dữ liệu với tổng số theo phần trăm. Biểu đồ này cũng tương tác, đáp ứng, hỗ trợ hoạt ảnh & có thể xuất dưới dạng ảnh.

Mẫu biểu đồ cột xếp chồng 100% dưới đây được minh họa bằng JavaScript. Bài viết chứa mã nguồn cho bạn có thể chỉnh sửa trong trình duyệt hoặc tải về để chạy trên máy tính.

Tham khảo: CanvasJS

Bạn có thể điều chỉnh hiển thị chú giải bằng thuộc tính “showInLegend”. Thay đổi vị trí của chú thích theo chiều dọc bằng “verticalAlign” hoặc theo chiều ngang bằng “horizontalAlign”. Bạn cũng có thể thay đổi màu sắc bằng thuộc tính “color”, chia sẻ tooltip bằng thuộc tính “shared”, và còn rất nhiều cách khác để tuỳ chỉnh.

<span >Thông tin quan trọng</span>

Code JavaScript dưới đây tạo một biểu đồ/đồ thị xếp chồng cột hoàn toàn.

“`javascript
// Lấy tham chiếu đến các phần tử HTML
const canvas = document.getElementById(“canvas”);
const context = canvas.getContext(“2d”);

// Định nghĩa các mảng dữ liệu cho cột
const labels = [“Tháng 1”, “Tháng 2”, “Tháng 3”, “Tháng 4”];
const datasets = [
{ label: “Dữ liệu A”, data: [10, 20, 30, 40], backgroundColor: “#FF5733” },
{ label: “Dữ liệu B”, data: [5, 15, 25, 35], backgroundColor: “#C70039” },
{ label: “Dữ liệu C”, data: [15, 25, 35, 45], backgroundColor: “#900C3F” }
];

// Tính toán kích thước của biểu đồ
const chartWidth = 400;
const chartHeight = 300;
const barWidth = chartWidth / labels.length;

// Vẽ biểu đồ
for (let i = 0; i < datasets.length; i++) {
const dataset = datasets[i];

for (let j = 0; j < dataset.data.length; j++) {
const dataPoint = dataset.data[j];
const barHeight = (dataPoint / 50) * chartHeight;

context.fillStyle = dataset.backgroundColor;
context.fillRect(
j * barWidth + (i * barWidth) / datasets.length,
chartHeight – barHeight,
barWidth / datasets.length,
barHeight
);
}
}

// Tạo chú thích cho các dữ liệu
for (let i = 0; i < datasets.length; i++) {
context.fillStyle = datasets[i].backgroundColor;
context.fillRect(
chartWidth + 20,
20 + 30 * i,
10,
10
);

context.fillStyle = “#000000”;
context.fillText(
datasets[i].label,
chartWidth + 35,
30 + 30 * i
);
}

// Vẽ các đường kẻ ngang
context.beginPath();
context.strokeStyle = “#000000”;
context.moveTo(0, 0);
context.lineTo(0, chartHeight);
context.lineTo(chartWidth, chartHeight);
context.stroke();

// Vẽ các nhãn của trục x
for (let i = 0; i < labels.length; i++) {
context.fillText(
labels[i],
(i * barWidth) + (barWidth / datasets.length) / 2,
chartHeight + 20
);
}
“`

Đoạn mã trên tạo một biểu đồ/đồ thị xếp chồng cột hoàn toàn sử dụng JavaScript. Biểu đồ này có thể hiển thị các cột dữ liệu cho các tháng và ngăn chúng xếp chồng lên nhau. Mỗi cột được đại diện bằng một mảng dữ liệu. Mã JavaScript tính toán kích thước và vị trí của các cột và vẽ chúng trên canvas. Cuối cùng, nó thêm các thông tin chú thích và các trục x vào biểu đồ.

<span >Thông báo</span>

Ngoài ra, bạn còn có thể dùng các lớp .badge-primary, .badge-secondary, .badge-success, .badge-info, .badge-warning, .badge-danger, .badge-light và .badge-dark để thiết kế huy hiệu trong Bootstrap 5. Dưới đây là hướng dẫn chi tiết:

Badge thường được dùng để hiển thị thông tin bổ sung đánh dấu các mục mới hoặc chưa đọc. Để tạo Badge, bạn chỉ cần thêm <span class = "badge"> vào các link, nav…

Khi phần thông tin bổ sung bị trống, Badge sẽ được thu gọn thông qua selector :empty

Badge thường dùng trong một số trường hợp như ảnh dưới đây:

Badge cơ bản

Badge theo ngữ cảnh

Sử dụng class .badge cùng với lớp ngữ cảnh (như .bg-secondary) trong các phần tử <span> để tạo các badge chữ nhật với màu sắc tương ứng. Xem ví dụ sau để hiểu rõ hơn:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ về Bootstrap - Quản Trị Mạng</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h1>Các ví dụ về Badge</h1>
  <h2>Heading ví dụ <span >Mới</span></h2>
  <h3>Các bài báo chưa đọc <span >5</span></h3>
  <h4>Bạn có tin nhắn mới <span >20+</span></h4>
  <h5>Một số ví dụ khác <span >HOT</span></h5>
</div>

</body>
</html>

Sẽ cho kết quả như sau:

Badge theo ngữ cảnh

Pill Badge

Ngoài các Badge hình chữ nhật bo góc, bạn có thể tạo những Badge mềm mại hơn với việc sử dụng thêm class .rounded-pill trong <span> tương ứng:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ về Bootstrap - Quản Trị Mạng</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h1>Các ví dụ về Badge</h1>
  <h2>Heading ví dụ <span >Mới</span></h2>
  <h3>Các bài báo chưa đọc <span >5</span></h3>
  <h4>Bạn có tin nhắn mới <span >20+</span></h4>
  <h5>Một số ví dụ khác <span >HOT</span></h5>
</div>

</body>
</html>

Với file HTML trên, bạn sẽ có được các Badge như sau:

Pill Badge

Viết JavaScript để tạo biểu đồ cột xếp chồng hoàn toàn.

Bạn có thể đặt Badge ở trạng thái hoạt động vào bên trong phần điều hướng của website hoặc 1 nút bất kỳ. Chỉ cần đặt nó bên cạnh link hoặc nút theo như ví dụ sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ về Bootstrap - Quản Trị Mạng</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h2>Badge bên trong Nút</h2>
  <button type="button" >
    Tin nhắn <span >4</span>
  </button>
  <button type="button" >
    Thông báo <span >7</span>
  </button>
</div>

</body>
</html>

Kết quả sẽ có giao diện như sau:

Badge lồng trong nút

Kết thúc bài này, chúng ta đã biết cách sử dụng Badge trong một số tình huống cơ bản. Hãy tiếp tục theo các bài học tiếp theo để nắm rõ hơn cách sử dụng Badge một cách nhuần nhuyễn hơn bạn nhé.

Nguồn: Bài 12: Badge trong Bootstrap 5