简介
借助 HTML 标准,您可以使用图像地图来指定网页图片上的热点。这些热点可用于显示悬停文字或用作链接,甚至可以添加 JavaScript 事件处理以实现互动。例如,将鼠标悬停在下图的条形和轴标签上:
这些热点使用 <map>
和 <area>
HTML 元素创建。Chart API 可以返回为其创建热点地图所需的所有坐标,如下文所述。
为图表创建映射
如果您将参数 chof=json
添加到图表网址,将会收到一个 JSON 字符串,其中包含为图表创建图像映射所需的所有数据。然后,您可以添加指向图表特定部分的链接,或将 JavaScript 函数附加到点击事件中,以提高图表的互动性。请注意,并非所有图表类型都支持此功能;如需了解详情,请参阅具体的图表文档。
此页面上的工具可帮助您生成图像地图的 HTML。您可以将此 HTML 永久嵌入自己的页面中,甚至可以将我们的代码复制到您的页面中,然后请求并动态生成地图(如果您的页面允许用户动态更改页面上的地图)。
下文介绍了使用此工具生成映射的方法:
- 获取图表的 JSON 输出:将
chof=json
添加到图表网址,在浏览器中转到该网址,然后复制返回的文本。 - 将复制的 JSON 文本粘贴到下面的文本框中,并将其标记为“JSON 输出”,然后点击“创建映射”。
- 将生成的地图代码粘贴到您的页面中
- 使用
<map>
元素的唯一名称更新生成的代码。 - 移除您不需要的所有地图元素(例如特定的条形、切片、标签或轴元素)。
- 更新生成的
<area>
元素中的 href 属性。 - 将
usemap="#MAP_NAME"
属性添加到<img>
元素中,将其中的MAP_NAME
替换为您的地图名称。重要提示:请务必为 usemap 值添加“#”前缀,例如
usemap="#mymap"
。在本例中,映射名称为“mymap”,而不是“#mymap”。
JSON 字符串的格式
以下是指定 chof=json
时返回的 JSON 的格式:
- 名为 chartshape 的根对象。此对象存储了一组对象,其中每个对象表示图表图片映射中的一个区域。每个对象都具有以下属性:
- name - 此特定区域的名称。常规命名惯例是 elementtype_series#_item#。例如:对于描述第一个系列中第一个条形的区域,值为 bar0_0;对于描述 x 轴上第二个轴标签的区域,则为 axis0_1。
- type - 该区域的形状。根据图表类型,它将是以下值之一:RECT、Circle 或 POLY。这相当于
<area>
标记的 shape 属性。 - coords - 描述区域的数字数组;相当于
<area>
标记的 coords 属性。