簡介
HTML 標準可讓您使用圖片點擊區指定網頁圖片中的熱點。這些熱點可用於顯示懸停文字或做為連結,您甚至可以新增 JavaScript 事件處理來啟用互動。舉例來說,將滑鼠遊標懸停在下圖中的長條和軸標籤上:
這些熱門點是使用 <map>
和 <area>
HTML 元素建立而成。Chart API 可傳回製作熱點地圖所需的所有座標,如下所述。
建立圖表地圖
如果在圖表網址中加入 chof=json
參數,您會收到 JSON 字串,其中包含為圖表建立圖片對應時所需的所有資料。接著,您可以為圖表的特定部分加入連結,或將 JavaScript 函式附加至點擊事件,讓圖表更具互動性。請注意,並非所有圖表類型都支援這項設定;詳情請參閱特定圖表說明文件。
這個網頁中的工具可協助您產生圖片地圖的 HTML。您可以將這段 HTML 永久嵌入網頁中,甚至還能將程式碼複製到網頁中,然後要求並即時產生地圖 (如果網頁可讓使用者動態變更地圖)。
以下說明如何使用這項工具產生地圖:
- 取得圖表的 JSON 輸出:將
chof=json
新增至您的圖表網址、在瀏覽器中瀏覽該網址,然後複製傳回的文字。 - 將您複製的 JSON 文字貼到下方的文字方塊中,標示為「JSON Output」,然後按一下 [Make Map]。
- 將產生的地圖程式碼貼到網頁中
- 使用
<map>
元素的專屬名稱,更新產生的程式碼。 - 移除不需要的任何地圖元素,例如特定的長條、區塊、標籤或軸元素。
- 更新已產生的
<area>
元素中的 href 屬性。 - 在
<img>
元素中加入usemap="#MAP_NAME"
屬性,將MAP_NAME
換成您的地圖名稱。重要事項:請務必在 usemap 值前面加上「#」,例如:
usemap="#mymap"
。在本例中,地圖名稱為「mymap」,而非「#mymap」。
JSON 字串的格式
以下是指定 chof=json
時傳回的 JSON 格式:
- 名為 chartshape 的根物件。這個物件包含物件的陣列,每個物件都代表圖表圖片地圖中的一個區域。每個物件都具備下列屬性:
- name - 這個特定區域的名稱。一般的命名慣例為 elementtype_series#_item#。例如:bar0_0 代表在第一個序列中第一個長條說明的區域,「axis0_1」代表的是說明 X 軸上第二軸標籤的區域。
- type - 這個區域的形狀。視圖表類型而定,這部分會是下列其中一個值:RECT、Circle 或 POLY。這相當於
<area>
標記的 shape 屬性。 - coords - 說明區域的數字陣列,相當於
<area>
標記的 coords 屬性。