基本折線圖表

有沒有辦法用Flex製作出像WordPress那樣實用的網站流量統計圖表?答案是可以的,可且方法很簡單喔!

基本折線圖表練習

首先,我們得先把曲線圖的面板給放上去,這就是我們折線圖介面的程式:

<mx:Panel title="折線圖練習" height="40%" width="50%" layout="horizontal"> 
  <mx:LineChart id="linechart" height="100%" width="100%" paddingLeft="5" paddingRight="5" 
    showDataTips="true" dataProvider="{expensesAC}"> 
    <mx:horizontalAxis> 
      <mx:CategoryAxis categoryField="Date"/> 
      </mx:horizontalAxis> 
    <mx:series> 
      <mx:LineSeries yField="Vistor" form="segment" displayName="來訪人次"/> 
    </mx:series> 
  </mx:LineChart> 
  <mx:Legend dataProvider="{linechart}"/> 
</mx:Panel>

上面的程式,並沒有任何的資料,因此我們現在必須對程式作資料繫結的動作,所以我們在<mx:LineChart>裡面為它指定了dataProvider="{expensesAC}",也就是說,晚一點的時候,我們會把expensesAC的資料給丟進去;showDataTips="true"的屬性設定,則是在設定是否要顯示資料細節內容,我們在這邊將它設定為true,這樣當你的滑鼠指到資料點的時候,就會出現該點的細節內容。

現在我們該準備我們所需要的資料了!於是我在Application下面加上<mx:script>的語法內容,裡面放入了我所要繫結的資料:

<mx:Script> 
  <![CDATA[ 
    import mx.collections.ArrayCollection; 
    [Bindable] 
    private var expensesAC:ArrayCollection = new ArrayCollection( [ 
      { Date: "1/15", Vistor: 20}, 
      { Date: "1/14", Vistor: 18}, 
      { Date: "1/15", Vistor: 30}, 
      { Date: "1/16", Vistor: 10}, 
      { Date: "1/17", Vistor: 19}, 
      { Date: "1/18", Vistor: 35}, 
      { Date: "1/19", Vistor: 28}, 
      { Date: "1/20", Vistor: 46} ]); 
    ]]> 
</mx:Script>

在這裡,我只有放上兩個資料,一個是日期,一個是來訪者(因為我們要模擬記錄來訪者流量);如果你想要再增加也是可以,但是目前我只放上這幾筆資料。

加上我們之前繫結的語法,我們的資料內容已經成功繫結到 <mx:LineChart>這個元件上面,但是要讓他成功顯示還需要更多的設定,<mx:CategoryAxis categoryField="Date"/>設定的是我們X軸上的值,在這裡,我們把它設定成日期;而<mx:LineSeries yField="Vistor" form="segment" displayName="來訪人次"/>則是在設定折線,記得要把 yField="Vistor"放上去,這個意思是「把Vistor的值丟到這裡」,displayName的屬性,其實是滑鼠移上去以後會出現的title說明。最後,只要再把<mx:Legend dataProvider="{linechart}"/>的說明小框框給放進去就可以了,執行之後,你就可以看到效果還不賴的圖表喔!滑鼠移上去之後,你會發現功能還真是不少呢!

圖表的作法,你可以根據自己的需求來搭配資料庫或是其他相關程式,它都可以有非常好的顯示效果,當然這樣一來圖表的製作也就會較有難度囉!

Advertisements

2 thoughts on “基本折線圖表

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s