Trong series này:

Thư viện Web phổ biến Bootstrap 5 Tailwind CSS Chart.js — Vẽ biểu đồ Mermaid.js — Sơ đồ từ văn bản anime.js — Animation Three.js — Đồ hoạ 3D trên web Swiper.js — Slider và Carousel
Sửa trang này

Chart.js — Vẽ biểu đồ

Chart.js là gì?

Chart.js là thư viện JavaScript tạo biểu đồ đẹp, responsive trên <canvas>. Hỗ trợ 8 loại biểu đồ phổ biến: bar, line, pie, doughnut, radar, polar area, bubble, scatter.

CDN:

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

Cú pháp cơ bản:

new Chart(document.getElementById('myChart'), {
  type: 'bar',        // Loại biểu đồ
  data: { ... },      // Dữ liệu
  options: { ... }    // Tuỳ chỉnh
});

Bar Chart & Line Chart

    Kết quả 
    <!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Chart.js - Bar & Line</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
  body { font-family: sans-serif; padding: 1rem; background: #f8f9fa; }
  .charts { display: flex; gap: 1rem; flex-wrap: wrap; }
  .chart-box { background: white; border-radius: 8px; padding: 1rem; flex: 1 1 280px; box-shadow: 0 1px 6px rgba(0,0,0,.1); }
  h4 { margin: 0 0 .75rem; color: #444; font-size: .9rem; }
</style>
</head>
<body>
<div class="charts">
  <div class="chart-box">
    <h4>📊 Lượng truy cập theo tháng</h4>
    <canvas id="barChart"></canvas>
  </div>
  <div class="chart-box">
    <h4>📈 Doanh thu 2 năm</h4>
    <canvas id="lineChart"></canvas>
  </div>
</div>
<script>
const months = ['T1','T2','T3','T4','T5','T6'];

new Chart(document.getElementById('barChart'), {
  type: 'bar',
  data: {
    labels: months,
    datasets: [{
      label: '2024',
      data: [1200, 1900, 1500, 2100, 1800, 2400],
      backgroundColor: 'rgba(68,114,196,.7)',
      borderColor: '#4472c4',
      borderWidth: 1.5,
      borderRadius: 4,
    }]
  },
  options: {
    responsive: true,
    plugins: { legend: { display: false } },
    scales: { y: { beginAtZero: true } }
  }
});

new Chart(document.getElementById('lineChart'), {
  type: 'line',
  data: {
    labels: months,
    datasets: [
      {
        label: '2023',
        data: [800, 1100, 900, 1300, 1100, 1500],
        borderColor: '#ed7d31',
        backgroundColor: 'rgba(237,125,49,.1)',
        fill: true, tension: 0.35, pointRadius: 4,
      },
      {
        label: '2024',
        data: [1100, 1600, 1400, 1900, 1700, 2200],
        borderColor: '#4472c4',
        backgroundColor: 'rgba(68,114,196,.1)',
        fill: true, tension: 0.35, pointRadius: 4,
      }
    ]
  },
  options: { responsive: true, scales: { y: { beginAtZero: true } } }
});
</script>
</body>
</html>

    Doughnut & Radar

      Kết quả 
      <!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Chart.js - Doughnut & Radar</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
  body { font-family:sans-serif; padding:1rem; background:#f8f9fa; }
  .charts { display:flex; gap:1rem; flex-wrap:wrap; }
  .chart-box {
    background:white; border-radius:8px; padding:1rem;
    flex:1 1 240px; box-shadow:0 1px 6px rgba(0,0,0,.1);
    display:flex; flex-direction:column; align-items:center;
  }
  h4 { margin:0 0 .75rem; color:#444; font-size:.9rem; align-self:flex-start; }
  canvas { max-height: 220px; }
</style>
</head>
<body>
<div class="charts">
  <div class="chart-box">
    <h4>🍩 Phân bổ ngân sách</h4>
    <canvas id="doughnutChart"></canvas>
  </div>
  <div class="chart-box">
    <h4>🕷️ Đánh giá kỹ năng</h4>
    <canvas id="radarChart"></canvas>
  </div>
</div>
<script>
new Chart(document.getElementById('doughnutChart'), {
  type: 'doughnut',
  data: {
    labels: ['Marketing','Phát triển','Hỗ trợ','Hành chính'],
    datasets: [{
      data: [30, 45, 15, 10],
      backgroundColor: ['#4472c4','#2ecc71','#f39c12','#e74c3c'],
      borderWidth: 2,
    }]
  },
  options: { responsive: true, cutout: '65%', plugins: { legend: { position: 'bottom' } } }
});

new Chart(document.getElementById('radarChart'), {
  type: 'radar',
  data: {
    labels: ['HTML','CSS','JavaScript','React','Node.js','SQL'],
    datasets: [
      {
        label: 'Kỹ năng',
        data: [90, 80, 85, 70, 60, 65],
        borderColor: '#4472c4', backgroundColor: 'rgba(68,114,196,.2)',
        pointBackgroundColor: '#4472c4',
      }
    ]
  },
  options: { responsive: true, scales: { r: { min: 0, max: 100 } } }
});
</script>
</body>
</html>

      Bình luận