本文介绍了如何在网页中使用Google Charts进行数据可视化，重点讲解了加载Google Charts库的方法，包括加载器的引入、版本选择（current或upcoming）、包的加载以及设置的配置，如指定语言和回调函数。
Google Charts
除少数例外情况外，所有包含Google图表的网页都应在网页的<head>中包含以下几行：
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
...
</script>此示例的第一行加载加载器本身。 无论您计划绘制多少个图表，您都只能加载一次加载器。 加载加载程序后，您可以调用google.charts.load函数一次或多次来加载特定图表类型的包。
google.charts.load的第一个参数是版本名称或数字，作为字符串。如果您指定“current”，则会导致加载最新的Google图表正式版。如果您想尝试下一版本的候选人，请使用“upcoming”。一般情况下，两者之间的差异很小，除非正在进行新的发布，否则它们将完全相同。使用即将发布的一个常见原因是，您希望测试Google即将在未来一两个月内发布的新图表类型或功能。 （我们在论坛上宣布即将发布的版本，并建议您在宣布时试用它们，以确保您的图表的任何更改都是可以接受的。）
上面的示例假设您要显示corechart（条形图，柱形图，线条，区域，阶梯区域，气泡，饼图，圆环图，组合图，烛台图，直方图图，散点图）。如果您需要不同的或额外的图表类型，请替换或添加上面的corechart的相应包名称（例如，{packages：['corechart'，'table'，'sankey']}。您可以在''中找到包名称加载每个图表的文档页面的“部分”。
此示例还假定您在网页的某处定义了名为drawChart的JavaScript函数。您可以随意命名该功能，但请确保它是全局唯一的，并且在您调用google.charts.setOnLoadCallback之前引用它之前已定义。
下面是一个饼图示例
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Element');
data.addColumn('number', 'Percentage');
data.addRows([
['Nitrogen', 0.78],
['Oxygen', 0.21],
['Other', 0.01]
]);
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
chart.draw(data, null);
}
</script>
</head>
<body>
<!-- Identify where the chart should be drawn. -->
<div id="myPieChart"/>
</body>加载详情
首先，您必须加载加载器本身，这是在一个单独的脚本标记中使用src=“https://www.gstatic.com/charts/loader.js”来完成的。此标记可以位于文档的头部或主体中，也可以在加载时或加载完成后动态地插入到文档中。
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>加载程序加载后，您可以自由地调用google.chart .load。调用它的位置可以在文档头部或主体的脚本标记中，也可以在文档仍在加载或加载完成后的任何时候调用它。
从45版开始，您可以调用google.charts。加载多个包以加载其他包，但是如果您这样做，您必须每次提供相同的版本号和语言设置。
google.charts.load的第一个参数。load调用是版本名或版本号。此时只有两个特殊的版本名，以及几个冻结的版本。
-
current
这是最新的官方版本，每次我们推出一个新的版本时都会发生变化。理想情况下，这个版本经过了良好的测试，并且没有bug，但是您可能想要指定一个特定的冻结版本，而不是在您确定它可以正常工作之后。
-
upcoming
这是为下一个版本，而它仍在测试中，并在成为正式的当前版本之前。请定期测试此版本，以便您尽快知道在此版本正式发布之前是否有任何需要解决的问题。
当发布谷歌图表的新版本时，一些变化是很大的，比如全新的图表类型。其他的变化很小，比如对现有图表的外观或行为的增强。
许多谷歌图表的创建者对图表的外观和感觉进行微调，直到它完全符合他们的需要。有些创作者可能更愿意知道他们的图表永远不会改变，不管我们在未来做了什么改进。对于这些用户，我们支持冻结的谷歌图表。
冻结的图表版本由编号来标识，并在官方版本中进行了描述。要加载冻结版本，请替换current或upcoming调用google.charts.load冻结版本号:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('43', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
...
</script>预计冻结版本将无限期可用，尽管我们可能会停用具有安全问题的冻结版本。通常不提供对冻结版本的支持，除非毫无帮助地建议您升级到新版本。
加载设置
调用google.charts.load中的第二个参数。load是用于指定设置的对象。设置支持以下属性。
-
packages
由零个或多个包组成的数组。加载的每个包都有支持一组功能(通常是图表类型)所需的代码。每个图表类型的文档中都列出了您需要加载的软件包。如果使用ChartWrapper自动加载所需的包，则可以避免指定任何包。
-
language
用于自定义可能是图表一部分的文本的语言或区域设置的代码。有关详细信息，请参见locale。
-
callback
一个函数，该函数将在加载包之后调用。或者，您可以通过调用google.charts.setOnLoadCallback来指定这个函数。setOnLoadCallback，如上例所示。有关详细信息，请参见回调。
google.charts.load('current', { packages: [ 'corechart'], callback: drawChart });
扫一扫
1981
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
