http://rhinohorns.blogspot.com/2007/12/amcolumn.html 製做一個網頁用的基本長條圖 - 使用 amcolumn

之前撰寫了一篇介紹如何使用 ampie 來製做頁面用的圓餅圖，這次使用其兄弟產品「amcolumn」來製做更常見到的長條圖，圓餅使用於顯示比例，而長條則用於比較。免費的版本一樣只會在圖表上顯示至該網站的連結而已。

使用 amcolumn 做一個基本的長條圖，需要以下 5 個檔案，

• amcolumn.swf，長條圖特效檔。
• swfobject.js，SWFObject ，一個利用 javascript 的方式讓頁面嵌進 Flash Player。
• amcolumn_settings.xml，關於長條圖呈現上的設定檔。
• amcolumn_data.xml，需要長條圖呈現的資料。
• xxx.html，使用長條圖的網頁。

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

= 資料 amcolumn_data.xml =

資料使用 XML 檔格式撰寫，

<?xml version="1.0" encoding="UTF-8"?><br /><chart><br />    <series><br />        <value xid="0">Xbox 360</value><br />        <value xid="1">PlayStation 3</value><br />        <value xid="2">Wii</value><br />    </series><br />    <graphs><br />        <graph gid="0" color="#778899" gradient_fill_colors="#dddddd, #556677"><br />            <value xid="0">528000</value><br />            <value xid="1">119000</value>            <br />            <value xid="2">501000</value><br />        </graph><br />    </graphs><br /></chart>

幾點說明一下：

• series 區代表各項條目。
• graphs 區則是對應各項條目的值部分，xid 必須對應到屬於的條目。
• graph 部分，color 是長條的主色，gradient_fill_colors 則可以設定漸層色，由下到上。

= 長條圖設定 amcolumn_settings.xml =

設定檔部分僅說明較會常更換的值，完整的設值可參考 amcolumn 的 Help 或是網站範例內的各設定檔註解。

<settings><br />    <!-- 長條圖設為 column --><br />    <type>column</type><br />    <!-- 資料來源設為 xml --><br />    <data_type>xml</data_type><br />    <!-- 字體 、字大小、字顏色--><br />    <font>Tahoma</font><br />    <text_size></text_size><br />    <text_color></text_color><br />    <!-- 3D 長條圖立體的深度及斜度，兩者均不設就以 2D 呈現 --><br />    <depth>15</depth><br />    <angle>25</angle><br /><br />    <column><br />        <!-- 長條的寬度 --><br />        <width>30</width><br />        <!-- 當滑鼠移至該長條上顯示說明的格式 --><br />        <balloon_text><br />            <![CDATA[{series} : {value} 部]]><br />        </balloon_text><br />    </column><br /><br />    <background><br />        <!-- 整個圖表的背景色 --><br />        <color>#ffffff</color><br />        <!-- 背景色淡化值 --><br />        <alpha></alpha><br />    </background><br /><br />    <plot_area><br />        <!-- 長條圖部分的背景色 --><br />        <color>#FFFFFF</color><br />        <!-- 背景色淡化值 --><br />        <alpha>0</alpha><br />        <!-- 長條圖顯示在圖表中的開始及結束的範圍 --><br />        <margins><br />            <left>100</left><br />            <top>40</top><br />            <right>20</right><br />            <bottom>20</bottom><br />        </margins><br />    </plot_area><br /><br />    <!-- 長條圖格線相關設定 --><br />    <grid><br />        <!-- 條目部分 --><br />        <category><br />            <color>#000000</color><br />            <alpha>5</alpha><br />            <dashed>false</dashed><br />            <dash_length>5</dash_length><br />        </category><br />        <!-- 值部分 --><br />        <value><br />            <color>#000000</color><br />            <alpha>5</alpha><br />            <dashed>false</dashed><br />            <dash_length>5</dash_length><br />            <approx_count>10</approx_count><br />        </value><br />    </grid><br /><br />    <values><br />        <category><br />            <!-- 是否顯示條目 --><br />            <enabled>true</enabled><br />        </category><br />        <value><br />            <!-- 是否顯示值軸 --><br />            <enabled>true</enabled><br />            <!-- 值軸的單位 (如 % 等) --><br />            <unit></unit><br />            <!-- 單位顯示在值的哪一邊 right/left --><br />            <unit_position>right</unit_position><br />        </value><br />    </values><br />    <br />    <!-- 長條圖底線相關設定 --><br />    <axes><br />        <!-- 條目線 --><br />        <category><br />            <color>#000000</color><br />            <alpha>0</alpha><br />            <width>1</width><br />            <!-- 刻度標線長度 --><br />            <tick_length>7</tick_length><br />        </category><br />        <!-- 值線 --><br />        <value><br />            <color>#000000</color><br />            <alpha>5</alpha><br />            <width>2</width><br />            <!-- 刻度標線長度 --><br />            <tick_length>7</tick_length><br />        </value><br />    </axes><br /><br />    <!-- 條目說明相關設定 --><br />    <balloon><br />        <br />    </balloon><br /><br />    <labels><br />        <label><br />            <!-- 標題起始位置 --><br />            <x>100</x><br />            <y>40</y><br />            <!-- 標題對齋 --><br />            <align>center</align><br />            <!-- 標題字色、字大小、內容 --><br />            <text_color></text_color><br />            <text_size></text_size><br />            <text><br />                <![CDATA[<b>2007/09 三大遊樂器月銷售表</b>]]><br />            </text><br />        </label><br />    </labels><br /></settings>

= 使用圖表頁面 xxx.html =

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

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

準備一個 div 供顯示圖表，再利用 swfobject 嵌入 amcolumn，

<!-- 區塊供顯示圖表 --><br /><div id="flashcontent1"><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("amcolumn.swf", "amcolumn", "400", "400", "8", "#FFFFFF");<br /><br />    //amconumn.swf 路徑不包含檔名<br />    so.addVariable("path", "");<br /><br />    //設定檔路徑<br />    so.addVariable("settings_file", escape("amcolumn_settings.xml"));<br /><br />    //資料檔路徑<br />    so.addVariable("data_file", escape("amcolumn_data.xml"));<br />    so.addVariable("preloader_color", "#999999");<br /><br />    //輸出區塊的 id<br />    so.write("flashcontent1");<br /></script>

這樣就能顯示一張基本形的長條圖了，amcolumn 可顯示的變化很多，可多參考其所附的範例檔及嘗試。