Giới thiệu Plotly.js tạo biểu đồ tương tác trong JavaScript

Javascript căn bản | 02/06/2025 by Học Javascript

Trong thời đại dữ liệu bùng nổ, việc trình bày thông tin một cách trực quan, sinh động và dễ hiểu là yếu tố then chốt để phân tích, truyền đạt và ra quyết định hiệu quả. Những biểu đồ tĩnh đơn thuần ngày càng trở nên hạn chế trong việc thể hiện dữ liệu phức tạp và có tính tương tác cao. Chính vì thế, các thư viện tạo biểu đồ tương tác trên nền tảng web đang dần trở thành xu hướng.

Một trong những công cụ mạnh mẽ và phổ biến nhất hiện nay là Plotly.js – thư viện JavaScript mã nguồn mở hỗ trợ tạo biểu đồ đẹp mắt, giàu tính tương tác mà không đòi hỏi người dùng phải có nền tảng đồ họa chuyên sâu. Với Plotly.js, việc xây dựng những biểu đồ hiện đại như biểu đồ cột, đường, tròn, heatmap, scatter 3D,... trở nên dễ dàng và linh hoạt hơn bao giờ hết.

Trong bài viết này, chúng ta sẽ cùng tìm hiểu tổng quan về Plotly.js, cách sử dụng, các loại biểu đồ phổ biến, tính năng tùy biến, và ứng dụng thực tế của nó trong việc trực quan hóa dữ liệu trên web.

Giới thiệu về Plotly.js

Plotly.js là gì?

Plotly.js là một thư viện JavaScript mã nguồn mở dùng để tạo các biểu đồ tương tác chất lượng cao ngay trên trình duyệt. Được phát triển dựa trên các công nghệ đồ họa hiện đại như D3.js, HTML, CSS, SVG, và WebGL, Plotly.js cho phép người dùng tạo nên các biểu đồ động và đẹp mắt mà không cần đến backend hay server xử lý phức tạp.

Điểm mạnh của Plotly.js là khả năng tạo ra những biểu đồ có thể phản hồi người dùng theo thời gian thực – như zoom, di chuột hiện chi tiết (tooltip), chọn lọc dữ liệu,... mà vẫn đảm bảo hiệu năng và tính thẩm mỹ cao.

Ưu điểm của Plotly.js

Tương tác mượt mà: Plotly.js hỗ trợ các tính năng như zoom, pan, hover, tooltip và cả export ảnh trực tiếp từ trình duyệt một cách nhanh chóng và trơn tru.
Đa dạng biểu đồ: Từ biểu đồ cơ bản như line, bar, pie đến biểu đồ phức tạp như heatmap, bubble, radar chart, scatter 3D, surface plot – tất cả đều được hỗ trợ.
Không cần backend: Plotly.js hoạt động hoàn toàn phía client, không cần server xử lý đồ họa.
Tích hợp linh hoạt: Plotly có thể kết hợp tốt với các framework hiện đại như React, Vue, Angular, giúp dễ dàng xây dựng các dashboard động và hiện đại.

Cách cài đặt và sử dụng

Sử dụng qua CDN (dành cho dự án HTML đơn giản):

Bạn chỉ cần nhúng đường dẫn thư viện vào trong file HTML:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

Sau đó, bạn có thể sử dụng Plotly.newPlot() để tạo biểu đồ:

<div id="myChart"></div>
<script>
  const data = [{
    x: [1, 2, 3, 4],
    y: [10, 15, 13, 17],
    type: 'scatter'
  }];

  Plotly.newPlot('myChart', data);
</script>

Cài đặt qua NPM/Yarn (dành cho ứng dụng với build system hoặc framework):

npm install plotly.js
# hoặc
yarn add plotly.js

Sau đó import và sử dụng trong mã JavaScript:

import Plotly from 'plotly.js-dist';

const data = [{
  x: [1, 2, 3],
  y: [2, 6, 3],
  type: 'bar'
}];

Plotly.newPlot('chartContainer', data);

Với cách tiếp cận đơn giản nhưng mạnh mẽ, Plotly.js là một công cụ tuyệt vời để trực quan hóa dữ liệu trên web – đặc biệt cho các nhà phát triển, nhà phân tích dữ liệu hoặc những ai đang xây dựng dashboard trực quan.

Các loại biểu đồ phổ biến với Plotly.js

Plotly.js cung cấp một loạt biểu đồ từ cơ bản đến nâng cao, phục vụ nhiều mục đích trực quan hóa dữ liệu từ báo cáo kinh doanh, thống kê, đến trực quan phân tích dữ liệu khoa học. Dưới đây là phân loại và mô tả các biểu đồ phổ biến mà Plotly.js hỗ trợ:

Biểu đồ cơ bản

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

Dùng để biểu diễn xu hướng theo thời gian hoặc chuỗi dữ liệu liên tục.
Hỗ trợ nhiều đường trên cùng một biểu đồ.
Có thể hiển thị điểm dữ liệu và tương tác tooltip chi tiết.

const trace = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  mode: 'lines+markers',
  type: 'scatter'
};

Bar chart (Biểu đồ cột)

Dùng để so sánh các nhóm dữ liệu rời rạc.
Có thể tạo bar ngang (horizontal), stacked bar, grouped bar,…

const trace = {
  x: ['A', 'B', 'C'],
  y: [20, 14, 23],
  type: 'bar'
};

Pie chart (Biểu đồ tròn)

Biểu thị tỷ lệ phần trăm của các phần trong tổng thể.
Hỗ trợ hiệu ứng hover, bấm vào phần để nổi bật.

const trace = {
  labels: ['Red', 'Blue', 'Yellow'],
  values: [30, 40, 30],
  type: 'pie'
};

Biểu đồ nâng cao

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

Biểu diễn mối quan hệ giữa hai hoặc nhiều biến số.
Hữu ích trong phân tích hồi quy, tìm mẫu (patterns).

const trace = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  mode: 'markers',
  type: 'scatter'
};

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

Giống scatter plot nhưng thêm kích thước cho từng điểm.
Dùng để biểu diễn 3 chiều thông tin (x, y, size).

const trace = {
  x: [1, 2, 3],
  y: [10, 11, 12],
  mode: 'markers',
  marker: {
    size: [40, 60, 80]
  },
  type: 'scatter'
};

Heatmap (Biểu đồ nhiệt)

Dùng để trực quan hóa ma trận dữ liệu với giá trị màu sắc.
Thường dùng trong phân tích dữ liệu, correlation, dữ liệu thời gian.

const trace = {
  z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
  type: 'heatmap'
};

Treemap (Biểu đồ cây khối)

Trực quan hóa dữ liệu phân cấp (hierarchical).
Mỗi khối biểu thị một phần của tổng thể.

const data = [{
  type: "treemap",
  labels: ["A", "B", "C", "D"],
  parents: ["", "", "", ""],
  values: [10, 20, 30, 40]
}];

Sunburst

Biểu đồ vòng phân cấp (giống Treemap nhưng hình tròn).
Thích hợp để trình bày mối quan hệ phân lớp.

const data = [{
  type: "sunburst",
  labels: ["Earth", "Land", "Water", "Asia", "Europe"],
  parents: ["", "Earth", "Earth", "Land", "Land"]
}];

Biểu đồ 3D

a. 3D Scatter

Scatter plot mở rộng theo 3 chiều không gian (x, y, z).
Dễ dàng xoay, zoom biểu đồ tương tác.

const trace = {
  x: [1, 2, 3],
  y: [2, 3, 4],
  z: [3, 4, 5],
  mode: 'markers',
  type: 'scatter3d'
};

b. 3D Surface

Biểu đồ bề mặt (surface) cho dữ liệu lưới 3D.
Dùng trong mô phỏng địa hình, sóng, nhiệt độ,…

const trace = {
  z: [[8.83,8.89,8.81],[8.89,8.94,8.85],[8.81,8.85,8.79]],
  type: 'surface'
};

3D Line

Vẽ đường liền mạch trong không gian 3 chiều.

const trace = {
  x: [1, 2, 3],
  y: [2, 3, 4],
  z: [3, 4, 5],
  mode: 'lines',
  type: 'scatter3d'
};

Biểu đồ thống kê

Box plot

Biểu diễn phân phối dữ liệu: trung vị, tứ phân vị, ngoại lệ.
Rất hữu ích trong so sánh nhóm dữ liệu.

const trace = {
  y: [10, 15, 13, 17, 21],
  type: 'box'
};

Violin plot

Kết hợp boxplot với mật độ phân bố xác suất.
Cung cấp cái nhìn trực quan hơn về phân phối dữ liệu.

const trace = {
  y: [10, 15, 13, 17, 21],
  type: 'violin'
};

Histogram

Dùng để biểu diễn tần suất xuất hiện của giá trị.
Hữu ích trong phân tích dữ liệu thô, phân bố giá trị.

const trace = {
  x: [1, 2, 2, 3, 3, 3, 4],
  type: 'histogram'
};

Tạo biểu đồ đầu tiên với Plotly.js

Để bắt đầu với Plotly.js, bạn không cần cài đặt phức tạp. Có thể dùng trực tiếp qua CDN hoặc tích hợp trong các dự án JavaScript hiện có. Trong phần này, chúng ta sẽ tìm hiểu cấu trúc cơ bản để tạo một biểu đồ và thử tạo một ví dụ minh họa trực quan bằng biểu đồ cột đơn giản.

Cấu trúc cơ bản khi sử dụng Plotly.js

Khi sử dụng Plotly.js, bạn cần làm việc với ba thành phần chính:

`data` – Dữ liệu của biểu đồ

Đây là mảng chứa các đối tượng trace (dữ liệu biểu diễn). Mỗi trace có thể đại diện cho một loại biểu đồ như cột, đường, điểm, v.v.

const data = [{
  x: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4'],
  y: [100, 200, 150, 300],
  type: 'bar', // hoặc 'line', 'scatter', 'pie'...
  name: 'Doanh thu'
}];

`layout` – Thiết lập bố cục, tiêu đề, trục

Cho phép tùy chỉnh hiển thị như tiêu đề, tên trục, lề, màu sắc, v.v.

const layout = {
  title: 'Doanh thu theo tháng',
  xaxis: { title: 'Tháng' },
  yaxis: { title: 'Triệu VND' }
};

`Plotly.newPlot()` – Hàm tạo và hiển thị biểu đồ

Đây là hàm dùng để kết xuất biểu đồ vào một phần tử HTML.

Plotly.newPlot('myChart', data, layout);

Ví dụ đơn giản: Biểu đồ cột thể hiện doanh thu theo tháng

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="myChart" style="width:600px;height:400px;"></div>

  <script>
    const data = [{
      x: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4'],
      y: [120, 180, 150, 220],
      type: 'bar',
      marker: {
        color: 'rgba(55,128,191,0.7)'
      },
      name: 'Doanh thu'
    }];

    const layout = {
      title: 'Biểu đồ doanh thu theo tháng',
      xaxis: {
        title: 'Tháng'
      },
      yaxis: {
        title: 'Triệu đồng'
      }
    };

    Plotly.newPlot('myChart', data, layout);
  </script>
</body>
</html>

Kết quả

Biểu đồ sẽ hiển thị các cột tương ứng với doanh thu từng tháng, có tiêu đề, tên trục, màu sắc rõ ràng và tương tác mượt mà khi rê chuột (hover).

Tùy chỉnh biểu đồ với Plotly.js

Plotly.js không chỉ mạnh mẽ về mặt hiển thị mà còn cực kỳ linh hoạt trong việc tùy chỉnh giao diện và tương tác của biểu đồ. Việc tùy chỉnh giúp biểu đồ trở nên sinh động, phù hợp với yêu cầu thẩm mỹ hoặc mục tiêu truyền đạt dữ liệu của người dùng.

Tuỳ chỉnh giao diện

Plotly cung cấp nhiều tùy chọn để kiểm soát cách biểu đồ hiển thị.

Màu sắc, đường nét, font chữ

Bạn có thể tùy chỉnh từng trace (dữ liệu) riêng biệt:

const data = [{
  x: ['Q1', 'Q2', 'Q3', 'Q4'],
  y: [120, 150, 100, 180],
  type: 'bar',
  name: 'Doanh số',
  marker: {
    color: 'rgba(222,45,38,0.8)',
    line: {
      color: 'rgba(0,0,0,1)',
      width: 2
    }
  }
}];

Trong phần layout, bạn có thể chỉnh phông chữ:

const layout = {
  title: {
    text: 'Doanh số theo quý',
    font: {
      family: 'Arial, sans-serif',
      size: 24,
      color: '#333'
    }
  },
  xaxis: {
    title: 'Quý'
  },
  yaxis: {
    title: 'Triệu VND'
  }
};

Kích thước, padding

const layout = {
  width: 800,
  height: 500,
  margin: {
    l: 60,
    r: 30,
    t: 80,
    b: 60
  }
};

Thêm tương tác

Plotly hỗ trợ rất nhiều tương tác mà bạn có thể tùy chỉnh dễ dàng.

Tooltip tùy chỉnh (hoverinfo, hovertemplate)

const data = [{
  x: ['A', 'B', 'C'],
  y: [10, 20, 30],
  type: 'bar',
  hovertemplate: 'Tên: %{x}<br>Giá trị: %2025 triệu<extra></extra>'
}];

Zoom, pan, click event

Plotly.newPlot('myChart', [trace1, trace2], {
  grid: {rows: 1, columns: 2, pattern: 'independent'},
  title: 'Biểu đồ so sánh'
});

Plotly hỗ trợ tự động zoom/pan bằng chuột, và bạn có thể xử lý sự kiện bằng JS:

const myChart = document.getElementById('myChart');

myChart.on('plotly_click', function(data){
  alert('Bạn đã click vào: ' + data.points[0].x);
});

Kết hợp nhiều biểu đồ

Bạn có thể vẽ nhiều loại biểu đồ trong cùng một biểu đồ tổng hợp.

Subplots – Nhiều biểu đồ trong một layout

Plotly.newPlot('myChart', [trace1, trace2], {
  grid: {rows: 1, columns: 2, pattern: 'independent'},
  title: 'Biểu đồ so sánh'
});

Biểu đồ kết hợp: cột + đường

const trace1 = {
  x: ['Tháng 1', 'Tháng 2', 'Tháng 3'],
  y: [100, 150, 200],
  type: 'bar',
  name: 'Doanh thu'
};

const trace2 = {
  x: ['Tháng 1', 'Tháng 2', 'Tháng 3'],
  y: [90, 140, 210],
  type: 'scatter',
  mode: 'lines+markers',
  name: 'Dự đoán'
};

Plotly.newPlot('myChart', [trace1, trace2], {
  title: 'So sánh thực tế và dự đoán'
});

Ứng dụng thực tế của Plotly.js

Plotly.js không chỉ là một thư viện biểu đồ mạnh mẽ mà còn là công cụ thực tế được sử dụng rộng rãi trong các hệ thống phân tích dữ liệu, trực quan hóa báo cáo và các nền tảng học máy. Với khả năng tạo biểu đồ tương tác đẹp mắt và hiệu năng tốt, Plotly.js có nhiều ứng dụng thực tiễn trong nhiều lĩnh vực khác nhau.

Dashboard tương tác phân tích doanh thu

Plotly.js là lựa chọn lý tưởng để xây dựng dashboard phân tích doanh thu với giao diện trực quan, dễ hiểu. Một dashboard có thể bao gồm:

Biểu đồ cột hiển thị doanh thu theo tháng/quý.
Biểu đồ tròn phân tích tỷ lệ doanh thu theo danh mục sản phẩm.
Biểu đồ đường thể hiện xu hướng tăng/giảm doanh số theo thời gian.
Bộ lọc ngày, sản phẩm, khu vực giúp người dùng xem dữ liệu tùy chọn.

Ví dụ: Một công ty có thể dùng Plotly.js để tạo dashboard theo dõi doanh số theo vùng miền, nhóm sản phẩm, và đánh giá hiệu quả từng chiến dịch bán hàng theo thời gian thực.

Trình bày dữ liệu thống kê thời gian thực

Plotly.js có thể hiển thị biểu đồ cập nhật thời gian thực bằng cách kết hợp với setInterval, WebSocket, hoặc API backend.

Ứng dụng phổ biến:

Biểu đồ hiển thị nhiệt độ, độ ẩm trong các hệ thống IoT.
Theo dõi giá cổ phiếu, tiền điện tử, hay tình trạng server.
Giám sát dữ liệu mạng, lưu lượng truy cập website.

setInterval(() => {
  Plotly.extendTraces('chartDiv', {
    y: [[Math.random() * 10]]
  }, [0]);
}, 1000);

Biểu đồ phân tích dữ liệu học máy

Trong lĩnh vực Data Science và Machine Learning, Plotly.js giúp trực quan hóa:

Kết quả phân cụm (cluster) bằng scatter plot 3D.
Đường cong học tập (learning curves) bằng line chart.
So sánh phân phối dữ liệu với histogram, box plot, violin plot.
Biểu đồ tương quan (correlation heatmap) thể hiện mối quan hệ giữa các biến.

Ví dụ: Khi huấn luyện mô hình, người dùng có thể dùng biểu đồ đường để xem sai số (loss) theo epoch, hoặc dùng biểu đồ scatter để xem cách phân cụm của thuật toán KMeans.

Kết hợp với Flask/Django/Node.js tạo báo cáo động

Plotly.js có thể dễ dàng tích hợp vào các web framework như:

Flask hoặc Django (Python)
Express.js (Node.js)
Laravel (PHP)

Thông qua đó, dữ liệu từ cơ sở dữ liệu (MySQL, PostgreSQL, MongoDB...) sẽ được phân tích và đẩy vào frontend, hiển thị qua biểu đồ Plotly.

Ví dụ:

Tạo báo cáo phân tích người dùng hàng tháng trên trang quản trị.
Trình bày biểu đồ đánh giá hiệu quả quảng cáo trong hệ thống CRM.
Kết hợp React + Plotly để tạo biểu đồ động trong dashboard quản lý nhân sự.

# Flask server render
@app.route("/chart")
def chart():
    data = get_revenue_by_month()
    return render_template("dashboard.html", data=json.dumps(data))

Kết bài

Trong kỷ nguyên dữ liệu số hiện nay, việc trực quan hóa dữ liệu một cách hiệu quả không chỉ giúp người xem dễ hiểu hơn mà còn hỗ trợ phân tích và ra quyết định nhanh chóng. Plotly.js nổi bật như một công cụ mạnh mẽ, linh hoạt và dễ sử dụng để xây dựng các biểu đồ tương tác chất lượng cao ngay trên trình duyệt, không cần đến backend phức tạp.

Với sự hỗ trợ đa dạng các loại biểu đồ – từ cơ bản, nâng cao, thống kê, đến cả biểu đồ 3D – cùng khả năng tương tác phong phú (zoom, hover, tooltip, click,...), Plotly.js phù hợp cho nhiều mục đích khác nhau: từ báo cáo kinh doanh, dashboard phân tích, đến trực quan hóa mô hình học máy hay các demo khoa học sinh động.

Dù bạn là người mới bắt đầu hay lập trình viên giàu kinh nghiệm, Plotly.js chắc chắn sẽ là một người bạn đồng hành đáng tin cậy trong hành trình đưa dữ liệu trở nên sống động và dễ hiểu hơn. Nếu bạn đang tìm kiếm một thư viện trực quan hóa dữ liệu dễ học, dễ dùng nhưng mạnh mẽ, thì Plotly.js là một lựa chọn không thể bỏ qua.