實際輸出 HTML 範例
<img src='pieimage.aspx?name=pie_customers' usemap='#dea88afea25748bda1ae28aa3e260d1a' border='0' />
<map name="dea88afea25748bda1ae28aa3e260d1a">
<area shape="poly" coords="200,150,399,145,400,150," href="pie_orders.aspx?customerid=ALFKI"
title="客戶名稱:三川實業有限公司 訂單金額:518.7 點擊察看該客戶訂單的詳細情況" />
<area shape="poly" coords="200,150,397,125,399,135,399,145," href="pie_orders.aspx?customerid=ANATR"
title="客戶名稱:東南實業 訂單金額:2581.95 點擊察看該客戶訂單的詳細情況" />
...
</map>
設計重點
- 使用
img usemap 關聯 map 元素。
- HTML 無扇形熱點類型，採用
shape="poly" 多邊形近似 (座標為扇形邊界頂點)。
coords 格式：x1,y1,x2,y2,...。title 提供滑鼠懸停提示，href 設定超連結。- 明細頁面 (
pie_orders.aspx) 同樣採用此架構。
軟體設計：文件物件模型
- 餅圖物件：定義整體位置/大小 (外接矩形)，容器角色。
- 餅圖項目：封裝數值、提示文字、超連結、起始/結束角度。
程式結構圖
