http://rhinohorns.blogspot.com/2007/11/ampie.html 簡易製成頁面圓餅圖 - 使用 ampie

如果需要在頁面上秀個圓餅圖，拿繪圖軟體或是 PowerPoint 來畫有時略嫌麻煩，找網路服務應用有的又不支援中文顯示，此時不如利用 ampie 來自已製做。ampie 是個利用 Flash 方式產生圓餅或甜甜圈圖表的工具，免費的版本只會在圖表上顯示至該網站的連結。

簡單的使用 ampie 做一個圓餅圖，基本上需要以下 5 個檔案，

• ampie.swf，圓餅圖特效檔。
• swfobject.js，SWFObject ，一個利用 javascript 的方式讓頁面嵌進 Flash Player。
• ampie_settings.xml，關於圓餅圖呈現上的設定檔。
• ampie_data.xml，需要圓餅圖呈現的資料。
• xxx.html，就是圓餅圖出現在的那個網頁 = =。

上述檔案使用時放入自己的網頁空間中即可，接下來分別描述一下各檔撰寫時的注意之處。

= 資料 ampie_data.xml =

資料準備以 XML 的方式撰寫，

<?xml version="1.0" encoding="UTF-8"?><br /><pie><br />  <!--<br />  <message bg_color="#CCBB00" text_color="#FFFFFF"><br />    <![CDATA[You can broadcast any message to chart from data XML file]]><br />  </message><br />  --><br />  <slice title="陳" pull_out="false">11.3</slice><br />  <slice title="林">8.6</slice><br />  <slice title="黃">6.4</slice><br />  <slice title="李">5.2</slice><br />  <slice title="張">5.2</slice><br />  <slice title="王">4.2</slice><br />  <slice title="吳">4.2</slice><br />  <slice title="劉">3.2</slice><br />  <slice title="蔡">3.0</slice><br />  <slice title="楊">2.7</slice><br />  <slice title="其它" pull_out="true">46</slice><br /></pie>

也就是以「<slice title="項目名">數值</slice>」的方式一一加入各個餅塊，「pull_out」的設定如為 true 則表示該餅塊在顯示時會往外一些，不緊連其它餅塊。

= 圓餅設定 ampie_settings.xml =

設定檔部分僅列出較會常更換值的說明，其它完整的值設可參考 ampie 的 Help 或是網站範例內的各設定檔 。

<settings><br />  <!-- 維持設定為 xml --><br />  <data_type>xml</data_type><br />  <!-- 顯示的字型 --><br />  <font>Arial</font><br />  <!-- 字體大小 --><br />  <text_size>11</text_size><br />  <!-- 字體顏色 --><br />  <text_color>#000000</text_color><br /><br />  <pie><br />    <!-- 從頁面給與的顯示區塊中的何處開始顯示圓餅圖 --><br />    <x></x><br />    <y>200</y><br />    <!-- 圓餅半徑 --><br />    <radius>100</radius><br />    <!-- 內圓半徑，也就是有值則為甜甜圈圖 --><br />    <inner_radius></inner_radius><br />    <!-- 圓餅高，3D 呈現時所用 --><br />    <height>2</height><br />    <!-- 圓餅視角，3D 呈現時所用 --><br />    <angle>0</angle><br />    <!-- 圓餅區塊基本色，不設定也有內定彩虹色 --><br />    <base_color>#334455</base_color><br />    <!-- 每一區塊漸層色，以基本色去計算，可為正負值 --><br />    <brightness_step>+10</brightness_step><br />  </pie><br /><br />  <data_labels><br />    <!-- 項目名顯示內容 --><br />    <show><br />       <![CDATA[{title}: {percents}%]]><br />    </show><br />  </data_labels><br /><br />  <legend><br />    <!-- 是否顯示項目名列表、何處開始顯示、寬度 --><br />    <enabled></enabled><br />    <x></x><br />    <y></y><br />    <width></width><br />  </legend><br /><br />  <labels><br />    <!-- 圖表標題，可多 --><br />    <label><br />      <!-- 此標題由何處開始顯示 --><br />      <x>0</x><br />      <y>10</y><br />      <text_color></text_color><br />      <text_size>12</text_size><br />      <!-- 標題字內容 --><br />      <text><br />        <![CDATA[<b>台灣十大姓氏比例</b>]]><br />      </text><br />    </label><br />  </labels><br /></settings>

= 使用頁面 xxx.html =

撰寫呈現所需頁面，需要引用 swfobject.js，

<script type="text/javascript" src="swfobject.js"></script>

準備一個 div 區塊供圖表顯示，利用 swfobject 嵌入 ampie，

<!-- 區塊供顯示圖表 --><br /><div id="flashcontent"><br />    <strong>You need to upgrade your Flash Player</strong><br /></div><br /><br /><script type="text/javascript"><br />    //各項參數分別為 swf, id, width, height, version, background-color<br />    var so = new SWFObject("ampie.swf", "ampie", "480", "500", "8", "#FFFFFF");<br /><br />    //ampie.swf 路徑不包含檔名<br />    so.addVariable("path", "");<br /><br />    //設定檔路徑<br />    so.addVariable("settings_file", escape("ampie_settings.xml"));<br /><br />    //資料檔路徑<br />    so.addVariable("data_file", escape("ampie_data.xml"));        <br /><br />    so.addVariable("preloader_color", "#999999");<br /><br />    //輸出至指定的區塊 id<br />    so.write("flashcontent");<br /></script>

如此就製做完成了一張可在頁面瀏覽的圓餅圖。