Google Charts - Cú pháp cấu hình
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 đồ trong bộ chứa 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 lệnh gọi hàm drawChart để vẽ biểu đồ khi thư viện Google Chart được tải xong.
google.charts.setOnLoadCallback(drawChart);Kết quả
Xác minh kết quả.