Googlecharts 简明教程
Google Charts - Configuration Syntax
在此章节中,我们将展示使用 Google Chart API 绘制图表所需的配置。
In this chapter we’ll showcase the configuration required to draw a chart using Google Chart API.
Step 1: Create HTML Page
使用 Google Chart 库创建一个 HTML 页面。
Create an HTML page with the Google Chart libraries.
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>
在此, container div 用于包含使用 Google Chart 库绘制的图表。在此,我们使用 google.carts.load 方法加载最新版本的 corecharts API。
Here container div is used to contain the chart drawn using Google Chart library. Here we are loading the latest version of corecharts API using google.charts.load method.
Step 2: Create configurations
Google Chart 库使用非常简单的配置,采用 json 语法。
Google Chart library uses very simple configurations using json syntax.
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);
此处,data 表示 json 数据,options 表示 Google Chart 库用于使用 draw() 方法在容器 div 中绘制图表的配置。现在,我们将配置各种参数以创建必需的 json 字符串。
Here data represents the json data and options represents the configuration which Google Chart library uses to draw a chart withing container div using draw() method. Now we’ll configure the various parameter to create the required json string.
title
配置图表选项。
Configure the options of the chart.
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
'width':550,
'height':400};
DataTable
配置要显示在图表上的数据。DataTable 是一个特殊的表结构集合,其中包含图表数据。数据表列表示图例,行表示相应数据。addColumn() 方法用于添加列,其中第一个参数表示数据类型,第二个参数表示图例。addRows() 方法用于相应地添加行。
Configure the data to be displayed on the chart. DataTable is a special table structured collection which contains the data of the chart. Columns of data table represents the legends and rows represents the corresponding data. addColumn() method is used to add a column where first parameter represents the data type and second parameter represents the legend. addRows() method is used to add rows accordingly.
// 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]
]);
Step 3: Draw the chart
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);
Example
以下是一个完整的示例:
Following is the complete example −
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>
在 Google Chart 库完全加载后,以下代码调用 drawChart 函数绘制图表。
Following code call drawChart function to draws chart when Google Chart library get loaded completely.
google.charts.setOnLoadCallback(drawChart);