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 });

可视化数据网页开发Google Charts（一）:加载库相关推荐

可视化数据网页开发Google Charts（十二）:折线图
Line Chart 概述在浏览器中使用SVG或VML呈现的折线图.当鼠标悬停在点上时显示工具提示. 弯曲的线条您可以通过设置curveType选项来平滑线条,生成此图表的代码如下.注意使用cur ...
Google推荐图片加载库Glide使用总结
在泰国举行的谷歌开发者论坛上,谷歌为我们介绍了一个名叫Glide的图片加载库,作者是bumptech.这个库被广泛的运用在google的开源项目中,包括2014年google I/O大会上发布的官方a ...
（原创）详解Glide图片加载库常用方法
Glide作为安卓开发常用的图片加载库,有许多实用而且强大的功能,那么,今天就来总结一番,这次把比较常见的都写出来,但并不是全部哦. 在介绍之前,先来说说什么是Glide吧: 在泰国举行的谷歌开发者论 ...
Cesium开发基础篇 | 02加载地形数据
Cesium中的地形图层类前面我们主要学习了cesium内置接口如何操作影像数据,但是在一些应用场景中我们需要操作地形数据,例如模拟逼真的三维场景.与高程相关的一些空间分析和计算等.Cesium提供 ...
如何采用离线的 Google Map API 加载离线谷歌地图的方法
原文转自:http://www.arceyes.com/bbs/thread-18476-1-1.html 如何采用离线的 Google Map API 加载离线谷歌地图的方法一.下载示例数据这里 ...
Coil - Google推荐的协程图片加载库
随着Kotlin的转正,Glide不再是最佳选择.看一下Google极力推荐的Coil框架. GitHub:Coilhttps://coil-kt.github.io/coil/ Pangu-Immo ...
android实现新闻内容显示功能,Android开发实现自定义新闻加载页面功能实例
本文实例讲述了Android开发实现自定义新闻加载页面功能.分享给大家供大家参考,具体如下: 一.概述: 1.效果演示: 2.说明:在新闻页面刚加载的时候,一般会出现五种状态未知状态(STATE_U ...
android listview预加载动画,Android开发Activity页面预加载
概述某些业务场景下,为了提高用户体验,我们可能需要在前一个页面就将下一个页面的数据准备好,减少用户后续操作的时间.因为Activity在设计上采用了低耦合,高度的隔离使得传统的预加载Activity ...
视频教程 | 3D版切水果游戏开发实战5：加载美术资源
在我们的前4期开发实战中,我们写代码使用的切割物体都是Egret Pro自带的实体,如:球体.椎体.立方体等,今天我们就来讲讲如何将游戏场景中的切割对象换成美术提供的水果和切刀素材. 核心内容比较简单 ...

可视化数据网页开发Google Charts（一）:加载库

Google Charts

加载详情

current

upcoming

加载设置

packages

language

callback

可视化数据网页开发Google Charts（一）:加载库相关推荐

最新文章

热门文章