建立圖表圖片點擊區

簡介

HTML 標準可讓您使用圖片點擊區，指定網頁圖片上的熱門位置。這些熱點可用於顯示懸停文字或做為連結，您甚至還能新增 JavaScript 事件處理功能來啟用互動功能。舉例來說，將滑鼠遊標懸停在下列圖片的長條與軸標籤上：

這些熱門位置是使用 <map> 和 <area> HTML 元素建立而成。Chart API 可傳回製作熱點地圖所需的所有座標，如下所述。

為圖表建立地圖

如果您在圖表網址中加入 chof=json 參數，您會收到 JSON 字串，其中含有建立圖表圖片對應所需的所有資料。接著，您可以新增連往圖表中特定區段的連結，或是為點擊事件附加 JavaScript 函式，讓圖表更具互動性。請注意，並非所有圖表類型都支援這項功能，詳情請參閱特定圖表的說明文件。

本頁中的工具可協助您產生圖片點擊區的 HTML。您可以將這段 HTML 永久嵌入網頁中，甚至將程式碼複製到網頁，然後立即要求並產生地圖 (如果您的網頁可讓使用者動態變更地圖)。

以下說明如何使用這個工具產生地圖：

1. 取得圖表的 JSON 輸出內容：新增 chof=json 至圖表網址，在瀏覽器中前往該網址，然後複製傳回的文字。
2. 將複製的 JSON 文字貼到下方標示為「JSON Output」(JSON 輸出) 的文字方塊，然後按一下 [Make Map] (製作地圖)。
3. 將產生的地圖程式碼貼到網頁中
4. 將產生的程式碼更新為 <map> 元素的專屬名稱。
5. 移除所有不需要的地圖元素 (例如特定長條、區塊、標籤或軸元素)。
6. 更新產生的 <area> 元素中的 href 屬性。
7. 在 <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 屬性。