http://www.amcharts.com/

開發網站時,難免需要資料圖表,如果有多樣化又實用、可以互動的圖表那就更好啦

amChart使用教學(1) - 以amstock為例:

下載的壓縮檔內主要檔案有 :

1. amstock_setting.xml  :   設定chart呈現模式
    細部設定請參閱線上文件。

2. swfobject.js 
    SWFObject v1.5: Flash Player detection and embed

3. amstock.swf :  flash執行檔

4. data.csv  :  draw chart的資料來源
    若不設定data.csv亦可,作法如下 : 
            從javascript把資料包成csv格式,再呼叫flashMovie.setData()動態載入。 
            關於flashMovie.setData()詳細使用方法請參考線上API。
    
   何謂csv格式(comma-separated values),舉例如下:      
     以逗號區隔,一筆資料的結束是以\n斷行
     ex.
date1,openPrice1,closePrice1,volume1\n
date2,openPrice2,closePrice2,volume2\n
...

5. index.html : amChart初始化與呈現的容器

<script type="text/javascript" src="../../amstock/swfobject.js"></script>
<div id="flashcontent">
<strong>You need to upgrade your Flash Player</strong>
</div>
<script type="text/javascript">
        // <![CDATA[

        //初始化amChart
var so = new SWFObject("../../amstock/amstock.swf", "amstock", "800", "500", "8", "#FFFFFF");
so.addVariable("path", ""); //swf檔位置,在同資料夾下的話帶入""即可
so.addVariable("settings_file", encodeURIComponent("amstock_settings.xml"));//載入配置檔
so.write("flashcontent");//將配置寫入flashcontent實體
// ]]>
</script>

 


arrow
arrow
    全站熱搜

    ppkkykei 發表在 痞客邦 留言(0) 人氣()