本页介绍了有关使用 Chart API 创建图表的基础知识。
Google Chart 使用政策
您每天对 Google Chart API 的调用次数没有限制。但是,我们保留阻止任何我们视为滥用行为的权利。
概览
查看本文档中的图表
本文档中的所有图表图片都是使用 Chart API 实时生成的。要查看任何图片的网址,请执行以下操作:
- 如果您使用的是 Firefox,请右击该图片,然后选择“查看图片”或“属性”。
- 如果您使用的 Internet Explorer,请右击该图片,然后选择“属性”。
为了使网址更易于阅读,此文档通常会分行显示该网址。如果您正在使用 Google Chart API,则必须将网址显示在一行中。
Google Chart API 会返回一张图表图片,以响应网址 GET 或 POST 请求。该 API 可以生成多种图表,包括饼图或折线图、二维码和公式。该网址中包含您需要的图表的所有信息(例如图表数据、大小、颜色和标签)。(对于 POST 请求,则略有不同,但现在不用担心)。
若要制作最简单的图表,您的网址需要指定图表类型、数据和大小。您可以直接在浏览器中输入此网址,也可以在您的网页中使用 <img>
标记指向此网址。例如,点击以下链接即可查看饼图:
https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World
以上链接是一个基本 Chart API 网址示例。所有图表网址均采用以下格式:
https://chart.googleapis.com/chart?cht=<chart_type>&chd=<chart_data>&chs=<chart_size>&...additional_parameters...
所有网址都以 https://chart.googleapis.com/chart?
开头,后跟用于指定图表数据和外观的参数。参数是用“和”字符 (&
) 分隔的“名称=值”对,参数可以位于 ?
之后,可按任意顺序排列。所有图表都至少需要以下参数:cht
(图表类型)、chd
(数据)和 chs
(图表大小)。不过,还有其他更多参数可用于其他选项,并且您可以指定图表所支持的任意数量的其他参数。
让我们更详细地分析一下上述网址:
网址 | 组件 |
---|---|
|
|
复制此网址并将其粘贴到浏览器中,然后尝试进行一些更改:向数据中添加其他值(不要忘记在每个新数据值前添加英文逗号)。添加新标签(在每个新值前面放置 |
标记)。把图表变得更大些吧。
如何创建图表
创建图片图表的方法如下:
- 确定图表类型。如需查看图表列表,请参阅图库;图表类型由
cht
参数指定。草拟出您希望图表添加的所有组成部分(轴、标签、背景等),如有必要,还可确定各个组成部分的像素尺寸(图表总大小、图例大小等)。您应首先仔细阅读与您的图表类型对应的文档,否则可能会感到不快。 - 创建图表数据并设置其格式。数据使用
chd
参数指定。您需要决定使用哪种格式的数据:- 选择数据格式。您可以为图表数据使用简单的文本格式,这种格式易于阅读,但发送空间更大;也可以使用其中一种编码类型,这种编码类型发送较小,但会限制可以发送的值的范围。
- 决定是否必须缩放数据以适合图表。不同的格式支持不同的值范围。您可能需要对数据进行缩放,使其涵盖您的格式允许的所有值范围,以使差异更加明显。为此,您可以缩放数据以适合您使用的数据格式,也可以使用具有自定义缩放功能的文本格式。
- 根据需要对数据进行编码。如果您已选择某种编码格式,我们会提供一些 JavaScript 来帮助实现其他编码类型。
- 指定图表大小。图表大小使用
chs
参数指定。请参阅相关文档,了解格式和最大值。 - 添加其他参数。每个图表的文档都列出了可用的可选参数。常见的选项包括标签、标题和颜色。请注意,所有标签或标题文本都必须采用 UTF-8 编码。请注意,许多参数允许您输入多个值。例如,
chm
参数可让您在图表的单个数据点上添加形状。您可以使用chm
参数在多个数据点上添加形状,但执行此操作时,请不要在网址中多次指定chm
参数(例如,WRONG:chm=square&chm=circle&chm=triangle
)。相反,接受多个值的参数会在同一个参数的多个值之间使用分隔符,例如英文逗号或竖线。 对于chm
,它是一个条形,因此输出内容大致如下所示:RIGHT:chm=square|circle|triangle
。 要了解如何指定多个参数,请参见各个参数的详情页面。 - 构建网址字符串。网址以
https://chart.googleapis.com/chart?
开头,后跟所有必需(cht
、chd
、chs
)和可选参数。注意:如果您在<img>
标记中使用网址,则必须将链接中的所有&
字符更改为&
。示例:<img src="https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World" />
。 - 使用 GET 或 POST 获取图片。GET,您直接在浏览器中输入网址或在
<img>
标记中使用网址。不过,网址的长度上限为 2K,因此,如果您的数据量超过 2K,或者您喜欢流血,那么您应考虑改用 POST,具体如此处所述。 - 创建可点击区域。您可以选择为图表创建图片映射,以便为特定图表元素添加超链接或点击元素。 如需了解详情,请参阅创建图表图片映射。
图表术语词汇表
以下是我们在本文档中所使用的一些重要术语:
- 系列
- 图表中的一组相关数据。
系列的构成取决于图表类型:在折线图中,系列是指一条线;在饼图中,每个条目都是一个切片,而所有切片共同构成一个系列。在条形图中,系列是指同一组数据中的所有条形;不同的系列可以并排分组或堆叠,具体取决于条形图的类型。下图演示了一个分组条形图,其中包含两个系列,一个深蓝色,一个浅蓝色:
- 轴标签
- 每个轴上的数值或文本值。在前面的图表中,请使用标签“1 月”“2 月”“3 月”“0”“50”“100”。
图表成分
以下展示了图表的一些成分:
- 图表区域
- 显示系列图片的区域。如需了解详情,请参阅“图表组件”边栏。
- 图例
- 图表上的一小块区域,用于描述数据系列。在上图中,是列出“猫”和“狗”的部分。
- 参数
- 网址中使用的“key=value”对。例如:
chxt=x
,其中chxt
是参数名称,x
是参数值。 - GET 和 POST
- 发送图表网址的两种方法。GET 通常可通过在浏览器中输入网址或使其成为
<img>
标记的来源来完成。POST 请求创建起来较为复杂,但可以包含更多数据。使用 POST 而不是 GET 的主要原因是,POST 请求可能比 GET 请求包含更多的数据(16K 个字符与 2K 个字符)。请点击此处了解 POST。 - 竖线字符
|
字符,通常用作参数值分隔符,即用于拆分多个值的字符。英文逗号和和号 (&) 也可在图表网址中用作分隔符。- 复合图表
- 一种组合使用两种不同图表类型的图表:例如,包含折线的条形图,或包含 K 线标记的折线图。 请参阅复合图表。
优化
现在,您已经学习了制作图表的基础知识,下面是一些可供您使用的优化措施。
使用 POST
网址的长度上限为 2K,因此,如果图表的数据量超过 2K,您必须使用 POST 来代替 GET,具体如此处所述。GET 是指在浏览器网址栏中输入图表网址,或将其用作网页内 <img>
元素的来源。POST 需要使用其他语言(如 PHP 或 PERL)进行额外的编程操作。
使用 JavaScript 创建图表
您可以使用 Google Vision API 为您创建图片图表。Google 可视化 API 是一种基于 JavaScript 的 API,它提供的工具可用于创建、过滤和操作数据,或查询 Google 电子表格或其他网站以获取数据。您可以使用可视化 API 创建数据,然后让它调用 Image Charts API 来在网页上呈现图表。如需了解详情,请参阅通用图片图表文档,或在可视化库中查找带有标记(图片)的任何 Google 图表。