建立圖表圖片點擊區

簡介

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

 

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

建立圖表地圖

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

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

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

1. 取得圖表的 JSON 輸出：將 chof=json 新增至您的圖表網址、在瀏覽器中瀏覽該網址，然後複製傳回的文字。
2. 將您複製的 JSON 文字貼到下方的文字方塊中，標示為「JSON Output」，然後按一下 [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 屬性。