Tạo biểu đồ trực quan với Chart.js trong JavaScript

Trong thời đại dữ liệu bùng nổ như hiện nay, việc trực quan hóa dữ liệu trở thành một phần không thể thiếu trong các ứng dụng web hiện đại. Thay vì trình bày dữ liệu dưới dạng bảng số khô khan, biểu đồ giúp người dùng nắm bắt thông tin nhanh hơn, trực quan hơn và dễ phân tích hơn.

Trong số các thư viện JavaScript hỗ trợ vẽ biểu đồ, Chart.js nổi bật là một công cụ đơn giản nhưng mạnh mẽ, giúp lập trình viên dễ dàng tạo ra các biểu đồ đẹp mắt và linh hoạt trên nền tảng HTML5. Với cú pháp thân thiện, khả năng tùy biến cao và hiệu ứng mượt mà, Chart.js đã và đang được sử dụng rộng rãi trong các hệ thống dashboard, báo cáo, thống kê và nhiều ứng dụng học tập.

Trong bài viết này, chúng ta sẽ cùng tìm kiếm cách sử dụng Chart.js để tạo nên những biểu đồ trực quan, hấp dẫn và đầy hiệu quả cho website của bạn.

Giới thiệu về Chart.js

Chart.js là gì?

Chart.js là một thư viện JavaScript mã nguồn mở giúp lập trình viên dễ dàng tạo các biểu đồ 2D đẹp mắt và tương tác trên nền HTML5 Canvas. Với cú pháp đơn giản, trực quan, và khả năng tùy biến linh hoạt, Chart.js là lựa chọn lý tưởng cho cả người mới bắt đầu lẫn các dự án chuyên nghiệp.

Chart.js hoạt động hoàn toàn phía client, không yêu cầu backend hoặc server xử lý đồ họa, phù hợp để tích hợp vào mọi ứng dụng web hiện đại. Được xây dựng dựa trên Canvas API, thư viện này mang đến hiệu suất tốt và khả năng hiển thị mượt mà ngay cả khi làm việc với lượng dữ liệu vừa phải.

Các ưu điểm chính của Chart.js

• Gọn nhẹ: Dung lượng nhỏ (~60KB bản đã nén), không phụ thuộc nhiều vào các thư viện bên ngoài.

• Dễ sử dụng: API thân thiện, cấu trúc biểu đồ đơn giản chỉ với vài dòng JavaScript.

• Hỗ trợ nhiều loại biểu đồ: Line, Bar, Pie, Doughnut, Radar, Polar Area, Bubble, Scatter,...

• Tùy biến mạnh mẽ: Cho phép chỉnh màu sắc, font, nhãn, tooltip, animation,...

• Hiệu ứng tích hợp: Có sẵn các hiệu ứng chuyển động khi vẽ biểu đồ hoặc cập nhật dữ liệu.

• Responsive: Tự động co giãn biểu đồ theo kích thước màn hình hoặc thẻ chứa.

Cách cài đặt Chart.js

Bạn có thể tích hợp Chart.js vào dự án theo nhiều cách:

Qua CDN (phù hợp cho HTML thuần):

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Qua npm (dành cho dự án dùng Webpack, React, Vue, Angular,...):

npm install chart.js

Qua yarn:

yarn add chart.js

Sau khi cài đặt, bạn chỉ cần tạo một phần tử <canvas> trong HTML và dùng JavaScript để khởi tạo biểu đồ là xong.

Các loại biểu đồ cơ bản trong Chart.js

Chart.js hỗ trợ nhiều loại biểu đồ phổ biến, cho phép lập trình viên dễ dàng trình bày dữ liệu một cách trực quan và sinh động. Dưới đây là các loại biểu đồ cơ bản mà Chart.js cung cấp kèm theo mô tả và ví dụ sử dụng:

Biểu đồ đường (Line Chart)

• Mô tả: Biểu đồ đường thể hiện xu hướng thay đổi của dữ liệu theo thời gian hoặc theo thứ tự.

• Ứng dụng: Theo dõi doanh thu theo tháng, số người truy cập theo ngày,...

• Ví dụ cấu hình:

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Tháng 1', 'Tháng 2', 'Tháng 3'],
    datasets: [{
      label: 'Doanh thu',
      data: [120, 150, 180],
      borderColor: 'blue',
      fill: false
    }]
  }
});

Biểu đồ cột (Bar Chart & Horizontal Bar)

• Mô tả: Biểu đồ cột hiển thị dữ liệu dưới dạng các cột đứng (hoặc nằm ngang với horizontalBar).

• Ứng dụng: So sánh doanh số giữa các sản phẩm, xếp hạng các mục,...

Ví dụ:

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Sách', 'Vở', 'Bút'],
    datasets: [{
      label: 'Số lượng bán',
      data: [200, 150, 100],
      backgroundColor: ['red', 'green', 'blue']
    }]
  }
});

Lưu ý: Từ Chart.js v3 trở đi, loại biểu đồ cột ngang (horizontalBar) không còn là type, mà là một dạng tuỳ chỉnh của biểu đồ cột thông qua indexAxis: 'y'.

Biểu đồ tròn (Pie & Doughnut Chart)

• Mô tả: Hiển thị tỷ lệ phần trăm các phần trong tổng thể. Pie là dạng tròn đặc, Doughnut có lỗ ở giữa.

• Ứng dụng: Tỷ lệ người dùng theo nền tảng, phân tích cơ cấu chi tiêu,...

Ví dụ:

new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['Chrome', 'Firefox', 'Safari'],
    datasets: [{
      label: 'Lượt truy cập',
      data: [60, 25, 15],
      backgroundColor: ['#ff6384', '#36a2eb', '#ffce56']
    }]
  }
});

Biểu đồ radar (Radar Chart)

• Mô tả: So sánh nhiều tiêu chí trên trục xoay quanh trung tâm.

• Ứng dụng: Đánh giá năng lực, phân tích kỹ năng, so sánh sản phẩm theo nhiều yếu tố,...

Ví dụ:

new Chart(ctx, {
  type: 'radar',
  data: {
    labels: ['HTML', 'CSS', 'JS', 'React', 'Node'],
    datasets: [{
      label: 'Kỹ năng học viên A',
      data: [8, 7, 9, 6, 5],
      backgroundColor: 'rgba(0, 123, 255, 0.3)',
      borderColor: 'blue'
    }]
  }
});

Biểu đồ phân tán (Scatter Chart)

• Mô tả: Hiển thị các điểm dữ liệu rải rác trong hệ trục XY. Mỗi điểm có giá trị x và y.

• Ứng dụng: Phân tích mối quan hệ giữa hai biến, dữ liệu khảo sát,...

Ví dụ:

new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'Điểm khảo sát',
      data: [{x: 3, y: 7}, {x: 5, y: 4}, {x: 7, y: 8}],
      backgroundColor: 'green'
    }]
  }
});

Biểu đồ bong bóng (Bubble Chart)

• Mô tả: Giống biểu đồ phân tán, nhưng mỗi điểm có thêm kích thước r (bán kính), tạo thành bong bóng.

• Ứng dụng: So sánh dữ liệu có 3 biến: X, Y và quy mô.

Ví dụ:

new Chart(ctx, {
  type: 'bubble',
  data: {
    datasets: [{
      label: 'Thông số sản phẩm',
      data: [
        {x: 4, y: 7, r: 10},
        {x: 6, y: 4, r: 15},
        {x: 3, y: 9, r: 8}
      ],
      backgroundColor: 'rgba(255, 99, 132, 0.5)'
    }]
  }
});

Mỗi loại biểu đồ trong Chart.js đều đi kèm với nhiều tùy chỉnh về giao diện, hiệu ứng và tương tác, giúp bạn linh hoạt trong việc trình bày dữ liệu một cách sinh động và dễ hiểu.

Cấu trúc cơ bản của biểu đồ Chart.js

Để tạo biểu đồ với Chart.js, bạn cần hiểu rõ cấu trúc khởi tạo và cách tổ chức dữ liệu. Dưới đây là phần trình bày chi tiết về cấu trúc biểu đồ và cách cài đặt cơ bản.

Thẻ <canvas> để vẽ biểu đồ

Chart.js sử dụng phần tử HTML5 <canvas> để vẽ đồ họa 2D. Bạn cần khai báo một thẻ canvas trong HTML, sau đó dùng JavaScript để vẽ biểu đồ trên thẻ đó.

<canvas id="myChart" width="400" height="300"></canvas>

Lưu ý: Nên đặt chiều rộng (width) và chiều cao (height) trực tiếp trong thẻ để đảm bảo tỷ lệ và hiển thị chính xác.

Cấu trúc đối tượng cấu hình config

Cấu hình biểu đồ được truyền vào hàm new Chart() gồm ba phần chính: type, data và options.

a. type – loại biểu đồ

• Xác định kiểu biểu đồ cần vẽ: 'line', 'bar', 'pie', 'doughnut', 'radar', 'scatter', 'bubble', v.v.

type: 'bar'

data – dữ liệu biểu đồ

• labels: các nhãn cho trục (thường là trục X).

• datasets: mảng chứa các tập dữ liệu, mỗi tập là một loạt giá trị tương ứng với nhãn.

Ví dụ:

data: {
  labels: ['Tháng 1', 'Tháng 2', 'Tháng 3'],
  datasets: [{
    label: 'Doanh thu',
    data: [100, 150, 200],
    backgroundColor: 'rgba(54, 162, 235, 0.6)',
    borderColor: 'blue',
    borderWidth: 1
  }]
}

Có thể khai báo nhiều datasets để vẽ nhiều đường/cột trên cùng một biểu đồ.

options – tuỳ chọn hiển thị

options cho phép điều chỉnh giao diện biểu đồ như tiêu đề, chú thích, trục, hiệu ứng, tooltip, khả năng zoom, v.v.

Ví dụ:

options: {
  responsive: true,
  plugins: {
    title: {
      display: true,
      text: 'Biểu đồ doanh thu theo tháng'
    },
    tooltip: {
      enabled: true
    }
  },
  scales: {
    y: {
      beginAtZero: true
    }
  }
}

Khởi tạo biểu đồ bằng new Chart(ctx, config)

• Lấy tham chiếu đến thẻ canvas:

const ctx = document.getElementById('myChart').getContext('2d');

Tạo biểu đồ:

const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Tháng 1', 'Tháng 2', 'Tháng 3'],
    datasets: [{
      label: 'Doanh thu',
      data: [100, 150, 200],
      backgroundColor: 'rgba(75, 192, 192, 0.5)',
      borderColor: 'teal',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Doanh thu theo tháng'
      }
    },
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

Như vậy, việc tạo một biểu đồ bằng Chart.js chỉ cần nắm rõ ba phần cốt lõi: cấu trúc thẻ <canvas>, dữ liệu biểu đồ (data) và cấu hình tùy chọn (options).

Tuỳ biến giao diện biểu đồ trong Chart.js

Chart.js cung cấp hệ thống tùy chỉnh giao diện rất linh hoạt, cho phép bạn tạo ra những biểu đồ đẹp mắt, dễ hiểu và phù hợp với mục đích trình bày dữ liệu. Dưới đây là các phần tùy biến chính bạn có thể áp dụng:

Đổi màu sắc, font chữ, kích thước nét vẽ

Bạn có thể điều chỉnh giao diện của từng thành phần như cột, đường, nhãn trục, tiêu đề, v.v.

Ví dụ thay đổi màu sắc và font chữ:

options: {
  plugins: {
    title: {
      display: true,
      text: 'Biểu đồ doanh thu',
      color: '#2c3e50',
      font: {
        size: 20,
        family: 'Arial'
      }
    },
    legend: {
      labels: {
        color: '#34495e',
        font: {
          size: 14
        }
      }
    }
  }
}

Ví dụ thay đổi nét vẽ (kích thước đường, màu đường):

datasets: [{
  label: 'Lợi nhuận',
  data: [50, 80, 120],
  borderColor: 'red',
  borderWidth: 3,
  backgroundColor: 'rgba(255, 99, 132, 0.2)',
  tension: 0.4 // Bo cong đường
}]

Cài đặt trục tọa độ, lưới (grid), tooltip, legend

Tuỳ chỉnh trục (scales):

scales: {
  x: {
    grid: {
      color: '#eee'
    },
    ticks: {
      color: '#333'
    }
  },
  y: {
    beginAtZero: true,
    grid: {
      color: '#ddd',
      borderDash: [5, 5]
    },
    ticks: {
      stepSize: 20,
      color: '#333'
    }
  }
}

Tuỳ chỉnh tooltip (gợi ý khi hover):

plugins: {
  tooltip: {
    backgroundColor: 'rgba(0,0,0,0.7)',
    titleColor: '#fff',
    bodyColor: '#f1c40f',
    borderColor: '#f39c12',
    borderWidth: 1
  }
}

Tuỳ chỉnh legend (chú thích biểu đồ):

plugins: {
  legend: {
    display: true,
    position: 'top',
    labels: {
      font: {
        size: 14
      },
      color: '#2d3436'
    }
  }
}

Thêm animation và interaction

Chart.js hỗ trợ hiệu ứng động khi tải biểu đồ hoặc khi có dữ liệu mới.

Ví dụ:

options: {
  animation: {
    duration: 1000,
    easing: 'easeOutBounce'
  },
  interaction: {
    mode: 'nearest',
    intersect: false
  }
}

options: {
  onClick: (e, elements) => {
    if (elements.length > 0) {
      const index = elements[0].index;
      alert(`Bạn đã click vào điểm dữ liệu số ${index + 1}`);
    }
  }
}

datasets: [{
  data: [50, 75, 100],
  backgroundColor: ['#e74c3c', '#f1c40f', '#2ecc71'],
  borderColor: ['#c0392b', '#f39c12', '#27ae60'],
  borderWidth: 2
}]

chart.data.labels.push("Tháng 7"); // Thêm nhãn trục X mới
chart.data.datasets[0].data.push(120); // Thêm giá trị mới cho dataset đầu tiên
chart.update(); // Cập nhật lại biểu đồ

chart.update();

chart.data = {
  labels: ["T1", "T2", "T3"],
  datasets: [{
    label: "Doanh thu",
    data: [100, 200, 300],
    backgroundColor: "#3498db"
  }]
};
chart.update();

chart.data.labels.pop(); // Xoá nhãn cuối
chart.data.datasets[0].data.pop(); // Xoá giá trị cuối của dataset đầu
chart.update();

chart.data.datasets = [];
chart.update();

options: {
  onClick: function (event, elements) {
    if (elements.length > 0) {
      const index = elements[0].index;
      const label = chart.data.labels[index];
      const value = chart.data.datasets[0].data[index];
      alert(`Bạn đã click vào: ${label} - Giá trị: ${value}`);
    }
  }
}

options: {
  onHover: function (event, chartElement) {
    if (chartElement.length) {
      event.target.style.cursor = 'pointer';
    } else {
      event.target.style.cursor = 'default';
    }
  }
}