加载库

此页面显示了如何加载 Google 图表库。

基本库加载

除了少数例外，所有带有 Google Charts 的网页都应该在网页的中包含以下几行<head>：

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>google.charts.load('current', {packages: ['corechart']});google.charts.setOnLoadCallback(drawChart);...
</script>

此示例的第一行加载加载器本身。无论您计划绘制多少个图表，您都只能加载一次加载器。加载加载器后，您可以调用该google.charts.load函数一次或多次以加载特定图表类型的包。

第一个参数google.charts.load是版本名称或编号，作为字符串。如果您指定'current'，这将导致加载最新的官方发布的 Google Charts。如果您想尝试下一个版本的候选版本，请'upcoming'改用。一般来说，两者之间几乎没有什么区别，除非有新版本正在进行中，否则它们将完全相同。使用的一个常见原因upcoming是您想测试 Google 将在未来一两个月内发布的新图表类型或功能。（我们在我们的论坛上宣布即将发布的版本，并建议您在发布时试用它们，以确保对您的图表所做的任何更改都是可以接受的。）

上面的示例假设您要显示corechart （条形、列、线、区域、阶梯区域、气泡、饼图、甜甜圈、组合、烛台、直方图、散点图）。如果您想要不同的或附加的图表类型，请替换或添加上述适当的包名称corechart（例如，{packages: ['corechart', 'table', 'sankey']}您可以在每个图表的文档页面的“加载”部分中找到包名称。

此示例还假设您drawChart在网页中的某处定义了一个名为 JavaScript 的函数。您可以随意命名该函数，但请确保它是全局唯一的，并且在调用 google.charts.setOnLoadCallback.

注意：以前版本的 Google Charts 使用与上述不同的代码来加载库。要更新现有图表以使用新代码，请参阅更新库加载程序代码。

这是使用基本加载技术绘制饼图的完整示例：

<head><script src="https://www.gstatic.com/charts/loader.js"></script><script>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>

加载详情

首先，您必须加载加载器本身，这是在script带有 src="https://www.gstatic.com/charts/loader.js". 此标记可以是在 head或body文档，或者在加载它，它可以动态地插入到文档或装载完成之后。

<script src="https://www.gstatic.com/charts/loader.js"></script>

加载器加载后，您可以自由调用google.charts.load. 您可以在文档script的head或标签中body调用它，您可以在文档仍在加载时或在加载完成后的任何时间调用它。

从版本 45 开始，您可以google.charts.load多次调用以加载其他包，但如果可以避免这样做会更安全。您必须每次提供相同的版本号和语言设置。

您现在可以使用旧的 JSAPI autoloadURL 参数，但此参数的值必须使用严格的 JSON 格式和 URL 编码。在 JavaScript 中，您可以 jsonObject使用以下代码进行编码： encodeURIComponent(JSON.stringify(jsonObject)).

限制

如果您使用的是 v45 之前的版本，则加载 Google Charts 的方式存在一些次要但重要的限制：

您只能调用google.charts.load 一次。但是您可以在一次调用中列出您需要的所有软件包，因此无需进行单独调用。
如果您使用的是 ChartWrapper，则必须显式加载您需要的所有包，而不是依赖 ChartWrapper 自动为您加载它们。
对于Geochart和 Map Chart，您必须同时加载旧库加载器和新库加载器。再次，这是只针对之前V45的版本，你应该不会更高版本做到这一点。

加载版本名称或编号

您google.charts.load调用的第一个参数是版本名称或编号。目前只有两个特殊版本名称，以及几个冻结版本。

当前：

这是针对最新的官方版本，每次我们推出新版本时都会发生变化。理想情况下，此版本经过良好测试且没有错误，但是一旦您对它的工作感到满意，您可能希望指定一个特定的冻结版本。

未来：

这是为下一个版本准备的，它仍在测试中，在它成为正式的

当前版本之前。请定期测试此版本，以便您在此版本正式发布之前尽快了解是否存在需要解决的问题。

当我们发布新版本的 Google Charts 时，一些变化很大，比如全新的图表类型。其他更改很小，例如对现有图表的外观或行为的增强。

许多 Google 图表创建者会微调图表的外观和风格，直到完全符合他们的要求。一些创作者可能会更自在地知道他们的图表永远不会改变，无论我们将来做出什么改进。对于这些用户，我们支持冻结的Google 图表。

冻结图表版本由编号标识，并在我们的官方版本中进行了描述。要加载冻结版本，请替换current 或upcoming在您的调用中google.charts.load使用冻结版本号：

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>google.charts.load('43', {packages: ['corechart']});google.charts.setOnLoadCallback(drawChart);...
</script>

预计冻结版本将无限期地保持可用，但我们可能会停用存在安全问题的冻结版本。我们通常不会提供对冻结版本的支持，除非无益地建议您升级到更新的版本。

负载设置

调用中的第二个参数google.charts.load 是用于指定设置的对象。设置支持以下属性。

包裹

零个或多个包的数组。加载的每个包都将具有支持一组功能所需的代码，通常是一种图表。您需要加载的一个或多个包在每种图表类型的文档中列出。如果您使用ChartWrapper 自动加载所需的内容，则可以避免指定任何包。

语

用于自定义可能是图表一部分的文本的语言或区域设置的代码。有关更多详细信息，请参阅语言环境。

打回来

加载包后将调用的函数。或者，您可以通过调用来指定此函数，google.charts.setOnLoadCallback 如上例所示。有关更多详细信息，请参阅回调。

  google.charts.load('current', { packages: [ 'corechart'], callback: drawChart });

地图API密钥

(v45) 此设置可让您指定可用于 Geochart和 Map Chart 的键。您可能希望这样做而不是使用默认行为，这可能会导致您的用户的服务偶尔受到限制。在此处了解如何设置您自己的密钥以使用“Google Maps JavaScript API”服务：获取密钥/身份验证。您的代码将如下所示：

  var myMapsApiKey = 'SomeMagicToSetThis';google.charts.load('45', { packages: [ 'geochart'], mapsApiKey: myMapsApiKey  });

安全模式

(v47) 当设置为 true 时，所有从用户提供的数据生成 HTML 的图表和工具提示将通过去除不安全的元素和属性来清理它。或者 (v49+)，可以使用接受相同加载设置的快捷方式在安全模式下加载库，但始终加载“当前”版本：

  google.charts.safeLoad({ packages: ['corechart'] });

语言环境

区域设置用于自定义国家或语言的文本，影响货币、日期和数字等值的格式。

默认情况下，Google Charts 加载了“en”语言环境。您可以通过在加载设置中明确指定区域设置来覆盖此默认值。

要加载为特定语言环境设置格式的图表，请使用如下language设置：

  // Load Google Charts for the Japanese locale.//选择适合自己的语言google.charts.load('current', {'packages':['corechart'], 'language': 'ja'});

按照此链接查看实时示例。

打回来

在您可以使用任何加载的包之前，google.charts.load您必须等待加载完成。仅仅等待文档完成加载是不够的。由于此加载完成可能需要一些时间，因此您需要注册一个回调函数。有三种方法可以做到这一点。callback在您的google.charts.load调用中指定一个设置，或者调用 setOnLoadCallback传递一个函数作为参数，或者使用调用返回的 Promise google.charts.load。

请注意，对于所有这些方式，您都需要提供函数定义，而不是调用函数。您提供的函数定义可以是命名函数（因此您只需提供其名称）或匿名函数。当包完成加载时，将不带参数调用此回调函数。在调用回调之前，加载器还将等待文档完成加载。

如果要绘制多个图表，可以使用注册多个回调函数setOnLoadCallback，也可以将它们合并为一个函数。了解有关如何在一页上绘制多个图表的更多信息。

  google.charts.setOnLoadCallback(drawChart1);google.charts.setOnLoadCallback(drawChart2);// ORgoogle.charts.setOnLoadCallback(function() { // Anonymous function that calls drawChart1 and drawChart2drawChart1();drawChart2();});

通过 Promise 回调

注册回调的另一种方法是使用从google.charts.load调用返回的 Promise 。为此，您可以then() 使用如下所示的代码添加对该方法的调用。

  google.charts.load('upcoming', {packages: ['corechart']}).then(drawChart);

使用 Promise 的一个好处是，您可以通过链接更多.then(anotherFunction)调用轻松绘制更多图表。使用 Promise 还将回调与该回调所需的特定包联系起来，如果您想通过另一个 google.charts.load().

更新库加载器代码

以前版本的 Google Charts 使用不同的代码来加载库。下表显示了旧的库加载器代码与新的。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("visualization", "1", {packages:["corechart"]});google.setOnLoadCallback(drawChart);
</script>

新的库加载器代码

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>google.charts.load('current', {packages: ['corechart']});google.charts.setOnLoadCallback(drawChart);
</script>

要更新现有图表，您可以用新代码替换旧的库加载器代码。但是，请记住上述加载库的限制。

Google Earth Engine（GEE）——图表概述（记载图表库）相关推荐

Google Earth Engine(GEE)——User memory limit exceeded（2）
上一次我们已经知道如何去进行避免这种错误的发生,有关详细内容,如果单单只是解决这个问题我们用到的是limit 和 first,上一次的博客在这里: (207条消息) Google Earth Engi ...
Google Earth Engine(GEE) 01-中输入提示快捷键Ctrl+space无法使用的问题
Google Earth Engine(GEE) 01-中输入提示快捷键Ctrl+space无法使用的问题 GEE中 Ctrl+space组合键用于代码输入快捷提示,能够提高编码的准确度和速度,但是, ...
Google Earth Engine(GEE)批量下载代码（以 NDVI数据为例）
下载数据先准备工作(具体细节都能查到):科学上网谷歌邮箱,谷歌邮箱注册GEE账号. 一:导入需要下载边界shp文件. 标题找到自己的shp文件,导入除了sbx文件的所有文件. 导入成功命名ass ...
使用Google Earth Engine (GEE)实现MODIS数据批量下载
使用Google Earth Engine GEE实现MODIS数据批量下载前言下载数据代码批量执行run任务关注公众号,分享GIS知识.ArcGIS教程.SCI论文与科研日常等前言上图是 ...
基于google earth engine(GEE)下载研究区域影像
基于google earth engine(GEE)下载研究区域影像当研究需要Landsat数据时,我们可以通过USGS官网或者地理空间数据云平台下载.由于地理空间数据云目前无法下载到较新的数据,可 ...
Google Earth Engine (GEE) ——卫星影像的监督分类（svm）
问题 GEE 提供哪些机器学习技术? 如何对卫星图像进行监督分类? 如何评估分类器的准确性? 如何手动创建自己的几何图形? 目标练习查找无云图像和使用手绘几何导入学习训练和应用分类算法所需的基本功 ...
Google Earth Engine(GEE)——可视化动态图
代码: var geometry = /* color: #d63000 *//* shown: false *//* displayProperties: [{"type": & ...
关于google earth engine(GEE)的一些想法与大胆预测
我接触GEE有两年了,GEE留给我的印象是:无所不能. 不管是从庞大的数据量,还是包含遥感的各类算法:随机森林.SVM.CNN,都让人惊讶. 从GEE的云端操作来看,传统遥感需要几个月做出来的全国ND ...
google earth engine GEE批量 run下载插件
在Google earth engine中,批量导出文件经常遇到多个文件下载的情况,只能一个个点击RUN.这里介绍一款插件,Open Earth Engine extension .该插件的作者是Ma ...
Google Earth Engine(GEE)——LandScan人口数据集
LandScan人口数据 LandScan计划于1997年在橡树岭国家实验室(ORNL)启动,以满足为后果评估改进人口估计的需要.例如,全球范围内的自然和人为灾害使大量的人口处于危险之中,而且往往没有 ...

Google Earth Engine（GEE）——图表概述（记载图表库）

加载库