图表使用入门

本页介绍了有关使用 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（图表大小）。不过，还有其他更多参数可用于其他选项，并且您可以指定图表所支持的任意数量的其他参数。

让我们更详细地分析一下上述网址：

网址 组件

黄色饼形图表

https://chart.googleapis.com/chart?
  cht=p3&
  chs=250x100&
  chd=t:60,40&
  chl=Hello|World
https://chart.googleapis.com/chart?
这是所有图表请求的基准网址。
cht=p3
图表类型：此处是 3D 饼图。
chs=250x100
图表尺寸（宽度 x 高度），以像素为单位。如需查看最大值，请点击此处。
chd=t:60,40
图表数据。这些数据采用简单的文本格式，但也有其他格式。
chl=Hello|World
切片标签。
&
各参数之间使用“&”符号分隔。注意：在 HTML 中嵌入网址时（例如，作为 <img> 标记的 src 属性），您应将参数之间的 & 替换为 &amp; 字符。这包括使用 PHP 或某种其他语言生成网页 HTML 时的情况。 不过，在浏览器中输入网址或在代码中调用网址时（例如通过 PHP 或 Perl 提取网址时），您应使用 & 标记。

复制此网址并将其粘贴到浏览器中，然后尝试进行一些更改：向数据中添加其他值（不要忘记在每个新数据值前添加英文逗号）。添加新标签（在每个新值前面放置 | 标记）。把图表变得更大些吧。

返回页首

如何创建图表

创建图片图表的方法如下：

  1. 确定图表类型。如需查看图表列表，请参阅图库；图表类型由 cht 参数指定。草拟出您希望图表添加的所有组成部分（轴、标签、背景等），如有必要，还可确定各个组成部分的像素尺寸（图表总大小、图例大小等）。您应首先仔细阅读与您的图表类型对应的文档，否则可能会感到不快。
  2. 创建图表数据并设置其格式。数据使用 chd 参数指定。您需要决定使用哪种格式的数据：
    • 选择数据格式。您可以为图表数据使用简单的文本格式，这种格式易于阅读，但发送空间更大；也可以使用其中一种编码类型，这种编码类型发送较小，但会限制可以发送的值的范围。
    • 决定是否必须缩放数据以适合图表。不同的格式支持不同的值范围。您可能需要对数据进行缩放，使其涵盖您的格式允许的所有值范围，以使差异更加明显。为此，您可以缩放数据以适合您使用的数据格式，也可以使用具有自定义缩放功能的文本格式。
    • 根据需要对数据进行编码。如果您已选择某种编码格式，我们会提供一些 JavaScript 来帮助实现其他编码类型。
  3. 指定图表大小。图表大小使用 chs 参数指定。请参阅相关文档，了解格式和最大值。
  4. 添加其他参数。每个图表的文档都列出了可用的可选参数。常见的选项包括标签、标题和颜色。请注意，所有标签或标题文本都必须采用 UTF-8 编码。请注意，许多参数允许您输入多个值。例如，chm 参数可让您在图表的单个数据点上添加形状。您可以使用 chm 参数在多个数据点上添加形状，但执行此操作时，请不要在网址中多次指定 chm 参数（例如，WRONG：chm=square&chm=circle&chm=triangle）。相反，接受多个值的参数会在同一个参数的多个值之间使用分隔符，例如英文逗号或竖线。 对于 chm，它是一个条形，因此输出内容大致如下所示：RIGHT: chm=square|circle|triangle。 要了解如何指定多个参数，请参见各个参数的详情页面。
  5. 构建网址字符串。网址以 https://chart.googleapis.com/chart? 开头，后跟所有必需（cht、chd、chs）和可选参数。注意：如果您在 <img> 标记中使用网址，则必须将链接中的所有 & 字符更改为 &amp;。示例：<img src="https://chart.googleapis.com/chart?chs=250x100&amp;chd=t:60,40&amp;cht=p3&amp;chl=Hello|World" />。
  6. 使用 GET 或 POST 获取图片。GET，您直接在浏览器中输入网址或在 <img> 标记中使用网址。不过，网址的长度上限为 2K，因此，如果您的数据量超过 2K，或者您喜欢流血，那么您应考虑改用 POST，具体如此处所述。
  7. 创建可点击区域。您可以选择为图表创建图片映射，以便为特定图表元素添加超链接或点击元素。 如需了解详情，请参阅创建图表图片映射。

返回页首

图表术语词汇表

以下是我们在本文档中所使用的一些重要术语：

系列
图表中的一组相关数据。 系列的构成取决于图表类型：在折线图中，系列是指一条线；在饼图中，每个条目都是一个切片，而所有切片共同构成一个系列。在条形图中，系列是指同一组数据中的所有条形；不同的系列可以并排分组或堆叠，具体取决于条形图的类型。下图演示了一个分组条形图，其中包含两个系列，一个深蓝色，一个浅蓝色：
显示两个系列的条形图表：猫和狗。
轴标签
每个轴上的数值或文本值。在前面的图表中，请使用标签“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 图表。