免軟體!讓圖表動起來(跨平台)

讀研究所是種挑戰,因為老闆和自己總是產生匪夷所思的想法。比如說論文太空虛,就會想要多用點圖表,但用圖表又太單調的話,就想要讓圖表動起來。有這種想法的人很多,可是怎麼做呢?有些商業軟體如Swiff Chart Generator可以幫你輕易做到這些,不過這樣的軟體也所費不少。今天要介紹的,是免費的amCarts

amCharts是免費的,在使用上也需要多幾個步驟,不過我個人認為還算容易,只要搞懂幾行程式,很容易就做到了。首先要決定想要畫哪種圖表。這次的範例用常見的Column & Bar chart,還有許多的範例可在amCharts的官方網站找到。下面是這一次的完成圖。





  1. 首先,到amCharts的下載區,找Column & Bar charts,下載之後解壓縮。
  2. 從amCharts的examples裡,複製amcolumn1.html檔案,改檔名為test.html檔,把下面這段:
    so.addVariable("settings_file", escape("amcolumn/amcolumn1/amcolumn_settings.xml"))

    改成
    so.addVariable("settings_file", escape("setting.xml"));
  3. 在同一個檔裡,把<script type="text/javascript" src="../amcolumn/swfobject.js"></script>
    改成
    <script type="text/javascript" src="swfobject.js"></script>
  4. 同樣一個檔,把
    var so = new SWFObject("../amcolumn/amcolumn.swf", "amcolumn", "520", "380", "8", "#FFFFFF");
    改成
    var so = new SWFObject("amcolumn.swf", "amcolumn", "520", "380", "8", "#FFFFFF");
  5. 如果你的原始資料是excel而不是xml,把這段
    so.addVariable("data_file", escape("amcolumn/amcolumn1/amcolumn_data.xml"));
    改成這段
    so.addVariable("data_file", escape("data.txt"));
  6. 如果要準備簡報,得另外開一個資料夾presentation,把test.html放過去。另外,amCharts下有一個amColumn資料夾,把整個資料夾複製到presentation底下。
  7. 剛我們改了設定檔setting.xml和資料檔data.txt。setting檔在amcolumn_1.5.2.0\amcolumn底下,叫amcolumn_settings.xml,把它複製之後,改名為setting.xml,並複製到presentation這個資料夾的根目錄。amcolumn.swf與swfobject.js也同樣複製過去。
  8. 打開setting.xml檔,找到這一段 <data_type>xml</data_type> ,改成 <data_type>csv</data_type> 。因為現在的資料格式是csv,不是xml。
  9. 現在是資料的部分。這邊有點tricky,雖然它說是csv檔,但讀的是txt,而且是有固定格式的。第一個是x軸,用;分開,第二個數字是y軸,如果有多個,一樣用;分開。範例如下:

    1949;2.54;20.21

    1950;5.51;19.73

    1951;2.53;18.43

    1952;2.53;18.08

    1953;2.68;19.01

    1954;2.78;19.57

    1955;2.77;19.58

    1956;2.79;19.43

    1957;3.09;40.83

    1958;9.01;19.73

    記得把你的資料弄好,存成data.txt,存在presentation資料夾的根目錄。
  10. 打開網頁,應該就可以看到會動的圖表了。據官方網站的說明,這個Flash chart是可以插入到PowerPoint的,不過我的Vista不幸功成身退(淚),等我修好了之後,再跟大家分享。

標籤: ,