Giới thiệu
AnyChart là một thư viện JavaScript mạnh mẽ và linh hoạt để tạo biểu đồ trực quan và tương tác cho các ứng dụng web. Thư viện cung cấp nhiều loại biểu đồ khác nhau, bao gồm Pie and Donut , Column , Bar , Line , Scatter , Cherry , Area , Range Column , Win/Loss Sparklines , Pareto Charts, v.v. AnyChart cũng hỗ trợ nhiều tính năng nâng cao như chú thích, tương tác, xuất biểu đồ sang các định dạng hình ảnh khác nhau, v.v.
Homepage: https://www.anychart.com/
Bài viết này sẽ hướng dẫn bạn cách cài đặt và sử dụng AnyChart, đồng thời cung cấp một số ví dụ cơ bản để giúp bạn bắt đầu.
Cài đặt
Để tạo 1 chart đầu tiên, bạn cần thêm thư viện anychart:<script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-base.min.js" type="text/javascript"></script><div id="container" style="width: 500px; height: 400px;"></div><!doctype html>
<html>
<head>
<script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-base.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="container" style="width: 500px; height: 400px;"></div>
</body>
</html>anychart.onDocumentLoad(function () {
// create an instance of a pie chart
var chart = anychart.pie();
// set the data
chart.data([
["Chocolate", 5],
["Rhubarb compote", 2],
["Crêpe Suzette", 2],
["American blueberry", 2],
["Buttermilk", 1]
]);
// set chart title
chart.title("Top 5 pancake fillings");
// set the container element
chart.container("container");
// initiate chart display
chart.draw();
});Giải thích
Pie chart yêu cầu thư viện Core, Pie, và Doughnut modules
<script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-pie.min.js"></script><script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-base.min.js"></script>Hàm anychart.onDocumentLoad được gọi khi toàn bộ trang được tải, bao gồm images, CSS, scripts, .... (AnyChart OnDocumentLoad)
var chart = anychart.pie();: Tạo một biểu đồ hình tròn mới bằng cách gọi hàm anychart.pie(). Biến chart sẽ lưu trữ biểu đồ này để bạn có thể tùy chỉnh nó sau này.
Dữ liệu cho biểu đồ được thiết lập bằng cách sử dụng hàm chart.data()
[]: Mảng chứa dữ liệu cho biểu đồ. Mỗi phần tử trong mảng là một mảng con chứa tên và giá trị của một điểm dữ liệu.
chart.title("Top 5 pancake fillings");: Dòng này đặt tiêu đề cho biểu đồ
chart.container("container");: Dòng này thiết lập vùng chứa cho biểu đồ
chart.draw();: vẽ biểu đồ
Kết quả: https://run.plnkr.co/preview/clwbzpm7700062a6s2vu3nj4p/Column Chart
Dưới đây là ví dụ về Column Chartanychart.onDocumentLoad(function() {
// create a chart and set the data
var chart = anychart.column([
["Winter", 2],
["Spring", 7],
["Summer", 6],
["Fall", 10]
]);
// set chart title
chart.title("AnyChart Basic Sample");
// set chart container and draw
chart.container("container").draw();
});Giải thích
Tương tự như Pie Chart, Column chart yêu cầu thư viện Core, asic Cartesian modules
<script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-cartesian.min.js"></script><script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-base.min.js"></script>Hàm anychart.column() được sử dụng để tạo biểu đồ cột. Hàm này nhận một mảng dữ liệu làm đối số.
Array data được cung cấp trong ngoặc vuông [].
Cú phápData Fields: x, value
Mỗi phần tử trong mảng là một mảng con chứa hai giá trị:
- Giá trị đầu tiên: Là tên của danh mục (ví dụ: "Winter", "Spring", "Summer", "Fall").
- Giá trị thứ hai: Là giá trị số cho danh mục đó (ví dụ: 2, 7, 6, 10).
Line Chart
Bên cạnh cách sử dụng mảng các mảng (array of arrays), AnyChart còn cho phép thiết lập dữ liệu biểu đồ đường (line chart) thông qua mảng các object.
Ưu điểm của phương pháp này là:
- Dễ dàng đọc, hiểu và định dạng dữ liệu.
- Cho phép cấu hình từng điểm dữ liệu riêng lẻ.
anychart.onDocumentLoad(function() {
// create a chart and set the data
// as Array of Objects
var chart = anychart.line([
{x: "Winter", value: 5},
{x: "Spring", value: 9, marker: {enabled: true, type: "star5", fill: "Gold"}},
{x: "Summer", value: 7},
{x: "Fall", value: 1}
]);
chart.title("AnyChart: Array of Objects");
chart.container("container").draw();
});Multiseries Chart
Line Chart
Multiple Series Charts) là loại biểu đồ trong AnyChart cho phép hiển thị nhiều tập dữ liệu khác nhau trên cùng một biểu đồ. Điều này giúp so sánh trực quan các giá trị của nhiều biến hoặc nhóm dữ liệu khác nhau.
anychart.onDocumentLoad(function() {
// create a chart and set the data
// as Array of Arrays
var chart = anychart.line()
chart.data({header: ["#", "Euro (€)", "USD ($)", "Pound (£)"],
rows:[
["Winter", 5, 7, 4],
["Spring", 7, 9, 6],
["Summer", 9, 12, 8],
["Fall", 12, 15, 9]
]});
chart.title("AnyChart: Multi-Series Array of Arrays");
chart.legend(true);
chart.container("container").draw();
});
*{
margin: 0;
padding: 0;
}
body, html, #container{
width: 100%;
height:100%;
}
anychart.onDocumentLoad(function() {
// create a chart and set the data
// as Array of Arrays
var chart = anychart.line()
chart.data({header: ["#", "Euro (€)", "USD ($)", "Pound (£)"],
rows:[
{x: "Winter", usd: 5, eur: 7, pound: 4},
{x: "Spring", usd: 7, eur: 9, pound: 6},
{x: "Summer", usd: 9, eur: 12, pound: 8},
{x: "Fall", usd: 12, eur: 15, pound: 9}
]});
chart.title("AnyChart: Multi-Series Array of Arrays");
chart.legend(true);
chart.container("container").draw();
});
Nhận xét
Đăng nhận xét