Google Charts - Hướng dẫn nhanh
Google Chartslà một thư viện biểu đồ dựa trên JavaScript thuần túy nhằm nâng cao các ứng dụng web bằng cách thêm khả năng lập biểu đồ tương tác. Nó hỗ trợ một loạt các biểu đồ. Biểu đồ được vẽ bằng SVG trong các trình duyệt tiêu chuẩn như Chrome, Firefox, Safari, Internet Explorer (IE). Trong IE 6 kế thừa, VML được sử dụng để vẽ đồ họa.
Đặc trưng
Sau đây là các tính năng nổi bật của thư viện Google Charts.
Compatability - Hoạt động dường như dễ dàng trên tất cả các trình duyệt và nền tảng di động chính như android và iOS.
Multitouch Support- Hỗ trợ cảm ứng đa điểm trên các nền tảng dựa trên màn hình cảm ứng như android và iOS. Lý tưởng cho iPhone / iPad và điện thoại / máy tính bảng thông minh dựa trên Android.
Free to Use - Mã nguồn mở và được sử dụng miễn phí cho mục đích phi thương mại.
Lightweight - Thư viện lõi loader.js, là thư viện cực kỳ nhẹ.
Simple Configurations - Sử dụng json để xác định các cấu hình khác nhau của biểu đồ và rất dễ học và sử dụng.
Dynamic - Cho phép sửa đổi biểu đồ ngay cả sau khi tạo biểu đồ.
Multiple axes- Không bị giới hạn trục x, y. Hỗ trợ nhiều trục trên biểu đồ.
Configurable tooltips- Chú giải công cụ xuất hiện khi người dùng di chuột qua bất kỳ điểm nào trên biểu đồ. googlecharts cung cấp bộ định dạng có sẵn chú giải công cụ hoặc bộ định dạng gọi lại để kiểm soát chú giải công cụ theo chương trình.
DateTime support- Xử lý ngày giờ đặc biệt. Cung cấp nhiều điều khiển có sẵn đối với các danh mục ngày tháng.
Print - In biểu đồ bằng trang web.
External data- Hỗ trợ tải dữ liệu động từ máy chủ. Cung cấp quyền kiểm soát dữ liệu bằng cách sử dụng các chức năng gọi lại.
Text Rotation - Hỗ trợ xoay nhãn theo bất kỳ hướng nào.
Các loại biểu đồ được hỗ trợ
Thư viện Google Charts cung cấp các loại biểu đồ sau:
| Sr.No. | Loại biểu đồ & Mô tả |
|---|---|
| 1 | Line Charts Được sử dụng để vẽ biểu đồ dựa trên đường / spline. |
| 2 | Area Charts Được sử dụng để vẽ biểu đồ khu vực khôn ngoan. |
| 3 | Pie Charts Dùng để vẽ biểu đồ hình tròn. |
| 4 | Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines Dùng để vẽ biểu đồ phân tán. |
| 5 | Bubble Charts Được sử dụng để vẽ biểu đồ dựa trên bong bóng. |
| 6 | Dynamic Charts Được sử dụng để vẽ biểu đồ động, nơi người dùng có thể sửa đổi biểu đồ. |
| 7 | Combinations Được sử dụng để vẽ kết hợp nhiều loại biểu đồ. |
| số 8 | 3D Charts Dùng để vẽ biểu đồ 3D. |
| 9 | Angular Gauges Dùng để vẽ biểu đồ loại công tơ mét. |
| 10 | Heat Maps Dùng để vẽ bản đồ nhiệt. |
| 11 | Tree Maps Dùng để vẽ bản đồ cây. |
Trong các chương tiếp theo, chúng ta sẽ thảo luận chi tiết từng loại biểu đồ được đề cập ở trên với các ví dụ.
Giấy phép
Google Charts là mã nguồn mở và được sử dụng miễn phí. Theo liên kết: Điều khoản dịch vụ .
Trong chương này, chúng ta sẽ thảo luận về cách thiết lập thư viện Google Charts để sử dụng trong phát triển ứng dụng web.
Cài đặt Google Charts
Có hai cách để sử dụng Google Charts.
Download - Tải xuống cục bộ từ https://developers.google.com/chart và sử dụng nó.
CDN access- Bạn cũng có quyền truy cập vào CDN. CDN sẽ cung cấp cho bạn quyền truy cập trên khắp thế giới vào các trung tâm dữ liệu khu vực mà trong trường hợp này, máy chủ Google Charthttps://www.gstatic.com/charts.
Sử dụng Google Chart đã tải xuống
Bao gồm tệp JavaScript googlecharts trong trang HTML bằng cách sử dụng tập lệnh sau:
<head>
<script src = "/googlecharts/loader.js"></script>
</head>Sử dụng CDN
Chúng tôi đang sử dụng các phiên bản CDN của thư viện Google Chart trong suốt hướng dẫn này.
Bao gồm tệp JavaScript của Google Chart trong trang HTML bằng cách sử dụng tập lệnh sau:
<head>
<script src = "https://www.gstatic.com/charts/loader.js"></script>
</head>Trong chương này, chúng tôi sẽ giới thiệu cấu hình cần thiết để vẽ biểu đồ bằng Google Chart API.
Bước 1: Tạo trang HTML
Tạo một trang HTML với các thư viện Biểu đồ của Google.
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
</body>
</html>Đây containerdiv được sử dụng để chứa biểu đồ được vẽ bằng thư viện Google Chart. Tại đây, chúng tôi đang tải phiên bản mới nhất của API corecharts bằng phương thức google.charts.load.
Bước 2: Tạo cấu hình
Thư viện Google Chart sử dụng các cấu hình rất đơn giản bằng cú pháp json.
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Ở đây dữ liệu đại diện cho dữ liệu json và các tùy chọn đại diện cho cấu hình mà thư viện Google Chart sử dụng để vẽ một biểu đồ withing container div bằng cách sử dụng phương thức draw (). Bây giờ chúng ta sẽ cấu hình tham số khác nhau để tạo chuỗi json cần thiết.
tiêu đề
Định cấu hình các tùy chọn của biểu đồ.
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
'width':550,
'height':400};Bảng dữ liệu
Định cấu hình dữ liệu được hiển thị trên biểu đồ. DataTable là một bộ sưu tập có cấu trúc bảng đặc biệt chứa dữ liệu của biểu đồ. Các cột của bảng dữ liệu đại diện cho các chú giải và các hàng đại diện cho dữ liệu tương ứng. Phương thức addColumn () được sử dụng để thêm một cột trong đó tham số đầu tiên đại diện cho kiểu dữ liệu và tham số thứ hai đại diện cho chú giải. Phương thức addRows () được sử dụng để thêm các hàng cho phù hợp.
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);Bước 3: Vẽ biểu đồ
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Thí dụ
Sau đây là ví dụ đầy đủ -
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014', 'width':550, 'height':400};
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById ('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Sau đây gọi mã hàm drawChart để vẽ biểu đồ khi thư viện Google Chart được tải hoàn tất.
google.charts.setOnLoadCallback(drawChart);Kết quả
Xác minh kết quả.
Biểu đồ khu vực được sử dụng để vẽ biểu đồ dựa trên khu vực. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ dựa trên diện tích sau đây.
| Sr.No. | Loại biểu đồ & Mô tả |
|---|---|
| 1 | Khu vực cơ bản
Biểu đồ khu vực cơ bản |
| 2 | Khu vực có giá trị âm
Biểu đồ vùng có giá trị âm. |
| 3 | Khu vực xếp chồng lên nhau
Biểu đồ có các khu vực xếp chồng lên nhau. |
| 4 | Phần trăm diện tích
Biểu đồ với dữ liệu theo tỷ lệ phần trăm. |
| 5 | Khu vực thiếu điểm
Biểu đồ với các điểm còn thiếu trong dữ liệu. |
| 6 | Trục ngược
Khu vực sử dụng các trục ngược. |
Biểu đồ thanh được sử dụng để vẽ biểu đồ dựa trên thanh. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ dựa trên thanh sau đây.
| Sr.No. | Loại biểu đồ & Mô tả |
|---|---|
| 1 | Thanh cơ bản
Biểu đồ thanh cơ bản |
| 2 | Biểu đồ thanh được nhóm
Biểu đồ thanh được nhóm. |
| 3 | Thanh xếp chồng
Biểu đồ thanh có thanh xếp chồng lên nhau. |
| 4 | Thanh xếp chồng phủ định
Biểu đồ thanh với ngăn xếp âm. |
| 5 | Phần trăm Thanh xếp chồng
Biểu đồ thanh với dữ liệu theo tỷ lệ phần trăm. |
| 6 | Biểu đồ thanh vật liệu
Biểu đồ thanh lấy cảm hứng từ Material Design. |
| 7 | Biểu đồ thanh với nhãn dữ liệu
Biểu đồ thanh với các nhãn dữ liệu. |
Biểu đồ bong bóng được sử dụng để vẽ biểu đồ dựa trên bong bóng. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ dựa trên bong bóng sau đây.
| Sr.No. | Loại biểu đồ & Mô tả |
|---|---|
| 1 | Bong bóng cơ bản
Biểu đồ bong bóng cơ bản. |
| 2 | Biểu đồ bong bóng có nhãn dữ liệu
Biểu đồ bong bóng với các nhãn dữ liệu. |
Biểu đồ lịch được sử dụng để vẽ các hoạt động trong một khoảng thời gian dài như tháng hoặc năm. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ dựa trên lịch sau đây.
| Sr.No. | Loại biểu đồ & Mô tả |
|---|---|
| 1 | Lịch cơ bản
Biểu đồ Lịch cơ bản. |
| 2 | Lịch với màu sắc tùy chỉnh
Biểu đồ lịch tùy chỉnh. |
Biểu đồ hình nến được sử dụng để hiển thị giá trị mở và đóng cửa trên một phương sai giá trị và thường được sử dụng để đại diện cho cổ phiếu. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ dựa trên hình nến sau đây.
| Sr.No. | Loại biểu đồ & Mô tả |
|---|---|
| 1 | Nến cơ bản
Biểu đồ nến cơ bản. |
| 2 | Chân nến với màu sắc tùy chỉnh
Biểu đồ hình nến tùy chỉnh. |
Biểu đồ cột được sử dụng để vẽ biểu đồ dựa trên cột. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ dựa trên cột sau đây.
| Sr.No. | Loại biểu đồ & Mô tả |
|---|---|
| 1 | Cột cơ bản
Biểu đồ cột cơ bản. |
| 2 | Cột được nhóm
Biểu đồ cột được nhóm. |
| 3 | Cột xếp chồng
Biểu đồ cột có cột được xếp chồng lên nhau. |
| 4 | Cột xếp chồng phủ định
Biểu đồ cột với ngăn xếp âm. |
| 5 | Phần trăm cột xếp chồng
Biểu đồ cột với dữ liệu theo tỷ lệ phần trăm. |
| 6 | Biểu đồ cột vật liệu
Biểu đồ cột lấy cảm hứng từ Material Design. |
| 7 | Biểu đồ cột có nhãn dữ liệu
Biểu đồ cột với nhãn dữ liệu. |
Biểu đồ kết hợp giúp hiển thị từng chuỗi dưới dạng một loại điểm đánh dấu khác với danh sách sau: đường, vùng, thanh, chân nến và vùng bậc. Để gán loại điểm đánh dấu mặc định cho chuỗi, hãy sử dụng thuộc tính seriesType. Thuộc tính chuỗi sẽ được sử dụng để chỉ định các thuộc tính của từng chuỗi riêng lẻ. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, chúng ta hãy xem ví dụ hoàn chỉnh.
Cấu hình
Chúng tôi đã sử dụng ComboChart lớp để hiển thị biểu đồ dựa trên kết hợp.
//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));Thí dụ
googlecharts_combination_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Fruit', 'Jane', 'John', 'Average'],
['Apples', 3, 2, 2.5],
['Oranges', 2, 3, 2.5],
['Pears', 1, 5, 3],
['Bananas', 3, 9, 6],
['Plums', 4, 2, 3]
]);
// Set chart options
var options = {
title : 'Fruits distribution',
vAxis: {title: 'Fruits'},
hAxis: {title: 'Person'},
seriesType: 'bars',
series: {2: {type: 'line'}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ComboChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Kết quả
Xác minh kết quả.
Biểu đồ là một biểu đồ nhóm dữ liệu số thành các nhóm, hiển thị các nhóm dưới dạng các cột được phân đoạn. Chúng được sử dụng để mô tả sự phân phối của tập dữ liệu như tần suất các giá trị rơi vào các phạm vi. Google Charts tự động chọn số lượng nhóm cho bạn. Tất cả các nhóm đều có chiều rộng bằng nhau và có chiều cao tỷ lệ với số điểm dữ liệu trong nhóm. Biểu đồ tương tự như biểu đồ cột ở các khía cạnh khác. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ dựa trên biểu đồ sau.
| Sr.No. | Loại biểu đồ & Mô tả |
|---|---|
| 1 | Biểu đồ cơ bản
Biểu đồ Histogram cơ bản. |
| 2 | Kiểm soát màu sắc
Màu tùy chỉnh của Biểu đồ Histrogram. |
| 3 | Kiểm soát nhóm
Nhóm tùy chỉnh của biểu đồ chương trình. |
| 4 | Nhiều dòng
Biểu đồ Histrogram có nhiều chuỗi. |
Biểu đồ đường được sử dụng để vẽ biểu đồ dựa trên đường. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ dựa trên đường sau đây.
| Sr.No. | Loại biểu đồ & Mô tả |
|---|---|
| 1 | Dòng cơ bản
Biểu đồ đường cơ bản. |
| 2 | Với các điểm có thể nhìn thấy
Biểu đồ với các điểm dữ liệu có thể nhìn thấy. |
| 3 | Màu nền có thể tùy chỉnh
Biểu đồ với màu nền tùy chỉnh. |
| 4 | Màu đường có thể tùy chỉnh
Biểu đồ với màu đường tùy chỉnh. |
| 5 | Trục có thể tùy chỉnh và nhãn đánh dấu
Biểu đồ với trục tùy chỉnh và nhãn đánh dấu. |
| 6 | Ghế chéo
Biểu đồ đường hiển thị các hình chữ thập tại điểm dữ liệu khi lựa chọn. |
| 7 | Kiểu đường có thể tùy chỉnh
Biểu đồ với màu đường tùy chỉnh. |
| số 8 | Biểu đồ đường có đường cong
Biểu đồ với các đường cong mịn. |
| 9 | Biểu đồ dòng nguyên liệu
Biểu đồ đường lấy cảm hứng từ Material Design. |
| 10 | Biểu đồ đường X hàng đầu
Biểu đồ đường lấy cảm hứng từ Material Design với Trục X ở trên cùng của biểu đồ. |
Biểu đồ Google Map sử dụng API Google Maps để hiển thị Bản đồ. Giá trị dữ liệu được hiển thị dưới dạng điểm đánh dấu trên bản đồ. Giá trị dữ liệu có thể là tọa độ (cặp vĩ độ) hoặc địa chỉ thực. Bản đồ sẽ được chia tỷ lệ tương ứng để nó bao gồm tất cả các điểm đã xác định.
| Sr.No. | Loại biểu đồ & Mô tả |
|---|---|
| 1 | Bản đồ cơ bản
Bản đồ Google cơ bản. |
| 2 | Bản đồ sử dụng Vĩ độ / Kinh độ
Bản đồ có các vị trí được chỉ định bằng Vĩ độ và Kinh độ. |
| 3 | Tùy chỉnh điểm đánh dấu
Điểm đánh dấu tùy chỉnh trong bản đồ. |
Sơ đồ tổ chức giúp hiển thị hệ thống phân cấp các nút, được sử dụng để mô tả các mối quan hệ cấp trên / cấp dưới trong một tổ chức. Ví dụ: cây gia đình là một loại biểu đồ tổ chức .. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, chúng ta hãy xem ví dụ hoàn chỉnh.
Cấu hình
Chúng tôi đã sử dụng OrgChart lớp để hiển thị biểu đồ dựa trên tổ chức.
//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));Thí dụ
googlecharts_organization_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['orgchart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
['Alice', 'Robert', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
// Set chart options
var options = {allowHtml:true};
// Instantiate and draw the chart.
var chart = new google.visualization.OrgChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Kết quả
Xác minh kết quả.
Biểu đồ hình tròn được sử dụng để vẽ biểu đồ dựa trên hình tròn. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ dựa trên hình tròn sau đây.
| Sr.No. | Loại biểu đồ & Mô tả |
|---|---|
| 1 | Bánh cơ bản
Biểu đồ hình tròn cơ bản. |
| 2 | Biểu đồ bánh rán
Biểu đồ Donut. |
| 3 | Biểu đồ hình tròn 3D
Biểu đồ hình tròn 3D. |
| 4 | Biểu đồ hình tròn với các lát bùng nổ
Biểu đồ hình tròn với các lát cắt nổ. |
Biểu đồ sankey là một công cụ trực quan hóa và được sử dụng để mô tả dòng chảy từ một tập giá trị này sang tập giá trị khác. Các đối tượng kết nối được gọi là nút và các kết nối được gọi là liên kết. Các phím tắt được sử dụng để hiển thị ánh xạ nhiều đến nhiều giữa hai miền hoặc nhiều đường dẫn thông qua một tập hợp các giai đoạn.
| Sr.No. | Loại biểu đồ & Mô tả |
|---|---|
| 1 | Biểu đồ Sankey cơ bản
Biểu đồ Sankey cơ bản. |
| 2 | Biểu đồ Sankey đa cấp
Biểu đồ Sankey đa cấp. |
| 3 | Tùy chỉnh biểu đồ Sankey
Biểu đồ Sankey tùy chỉnh. |
Biểu đồ Sankey, Biểu đồ phân tán, Biểu đồ vùng theo bước, Bảng, Đường thời gian, Bản đồ hình cây, Đường xu hướng được sử dụng để vẽ biểu đồ dựa trên phân tán. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ dựa trên phân tán sau đây.
| Sr.No. | Loại biểu đồ & Mô tả |
|---|---|
| 1 | Phân tán cơ bản
Biểu đồ phân tán cơ bản. |
| 2 | Biểu đồ phân tán vật liệu
Biểu đồ phân tán vật liệu. |
| 3 | Biểu đồ tán xạ trục Y kép
Biểu đồ phân tán vật chất có trục Y kép. |
| 4 | Biểu đồ tán xạ trục X hàng đầu
Biểu đồ phân tán vật liệu có Trục X ở trên cùng. |
Biểu đồ khu vực theo bước là biểu đồ khu vực dựa trên bước. Chúng ta sẽ thảo luận về các loại biểu đồ khu vực bước sau.
| Sr.No. | Loại biểu đồ & Mô tả |
|---|---|
| 1 | Biểu đồ bước cơ bản
Biểu đồ Khu vực Bước Cơ bản. |
| 2 | Biểu đồ bước xếp chồng
Biểu đồ vùng có bậc xếp chồng. |
| 3 | Biểu đồ bước xếp chồng 100%
Biểu đồ khu vực có bước xếp chồng 100%. |
Biểu đồ bảng giúp hiển thị một bảng có thể được sắp xếp và phân trang. Các ô trong bảng có thể được định dạng bằng cách sử dụng chuỗi định dạng hoặc bằng cách chèn trực tiếp HTML làm giá trị ô. Các giá trị số được căn phải theo mặc định; giá trị boolean được hiển thị dưới dạng dấu kiểm hoặc dấu chéo. Người dùng có thể chọn các hàng đơn bằng bàn phím hoặc chuột. Tiêu đề cột có thể được sử dụng để sắp xếp. Hàng tiêu đề vẫn cố định trong khi cuộn. Bảng kích hoạt các sự kiện tương ứng với tương tác của người dùng. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, chúng ta hãy xem ví dụ hoàn chỉnh.
Cấu hình
Chúng tôi đã sử dụng Table lớp để hiển thị biểu đồ dựa trên Bảng.
//table chart
var chart = new google.visualization.Table(document.getElementById('container'));Thí dụ
googlecharts_table_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['table']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var options = {
showRowNumber: true,
width: '100%',
height: '100%'
};
// Instantiate and draw the chart.
var chart = new google.visualization.Table(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Kết quả
Xác minh kết quả.
Các mốc thời gian mô tả cách một nhóm tài nguyên được sử dụng theo thời gian. Chúng ta sẽ thảo luận về các loại biểu đồ Dòng thời gian sau đây.
| Sr.No. | Loại biểu đồ / Mô tả |
|---|---|
| 1 | Biểu đồ thời gian cơ bản
Biểu đồ thời gian cơ bản |
| 2 | Biểu đồ thời gian với nhãn dữ liệu
Biểu đồ thời gian với nhãn dữ liệu |
| 3 | Biểu đồ tiến trình không có nhãn hàng
Biểu đồ tiến trình không có nhãn hàng |
| 4 | Màu biểu đồ thời gian
Biểu đồ tiến trình tùy chỉnh |
TreeMap là một biểu diễn trực quan của cây dữ liệu, trong đó mỗi nút có thể không có hoặc nhiều nút con và một nút cha (ngoại trừ nút gốc). Mỗi nút được hiển thị dưới dạng một hình chữ nhật, có thể được kích thước và tô màu theo các giá trị mà chúng ta gán. Kích thước và màu sắc có giá trị so với tất cả các nút khác trong biểu đồ. Sau đây là một ví dụ về biểu đồ dạng cây. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, chúng ta hãy xem ví dụ hoàn chỉnh.
Cấu hình
Chúng tôi đã sử dụng TreeMap lớp để hiển thị biểu đồ dạng cây.
//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));Thí dụ
googlecharts_treemap.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript" src = "https://www.google.com/jsapi">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['treemap']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 0, 0],
['Asia', 'Global', 0, 0],
['Australia', 'Global', 0, 0],
['Africa', 'Global', 0, 0],
['USA', 'America', 52, 31],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['France', 'Europe', 42, -11],
['Germany', 'Europe', 31, -2],
['Sweden', 'Europe', 22, -13],
['China', 'Asia', 36, 4],
['Japan', 'Asia', 20, -12],
['India', 'Asia', 40, 63],
['Egypt', 'Africa', 21, 0],
['Congo', 'Africa', 10, 12],
['Zaire', 'Africa', 8, 10]
]);
var options = {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
};
// Instantiate and draw the chart.
var chart = new google.visualization.TreeMap(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Kết quả
Xác minh kết quả.
Đường xu hướng là một đường chồng lên biểu đồ để hiển thị hướng tổng thể của dữ liệu. Google Charts có thể tự động tạo đường xu hướng cho Biểu đồ Sankey, Biểu đồ phân tán, Biểu đồ vùng bậc, Bảng, Đường thời gian, Bản đồ hình cây, Đường xu hướng, Biểu đồ thanh, Biểu đồ cột và Biểu đồ đường .. Chúng ta sẽ thảo luận về các loại biểu đồ đường xu hướng sau.
| Sr.No. | Loại biểu đồ & Mô tả |
|---|---|
| 1 | Biểu đồ đường xu hướng cơ bản
Biểu đồ đường xu hướng cơ bản. |
| 2 | Biểu đồ đường xu hướng hàm mũ
Biểu đồ đường xu hướng hàm mũ. |
| 3 | Biểu đồ đường xu hướng đa thức
Biểu đồ đường xu hướng đa thức. |