Home > AJAX, Architecture, Design, Framework, Programming, Technologies, 技術 > XML/SWF Charts – 新一代的網站圖表工具

XML/SWF Charts – 新一代的網站圖表工具

July 26, 2006 (Wednesday) Leave a comment Go to comments

在 Web 上常常需要顯示圖表,而圖表如果是由動態資料產生的,就必需要有繪圖的 API 來幫忙製圖。以 Java 來說,大家熟知的是 JFreeChart。JFreeChart 提供的繪圖 API,在 web 環境的話,就要在 server 先把圖產生,再由 client 端顯示。這樣對 server 也是一個負擔,當很多人想要看各種不同的圖表時,系統的回應時間變慢、暫存檔的量大增,都是可以預見的。

XML/SWF Charts 是一個由 SWF (Flash) 在 client 端繪圖的 API。Server 只要準備 XML 格式的資料,圖的部份由 Flash 幫你在 client 端繪畫起來。省了 server 的 loading,也沒有暫存檔的產生,而且因為是 flash 做的,還可以有動畫特效,簡單、好用又美觀,絕對是 web 產生動態圖表的不二之選!

大家在這個連結可以看到很多範例,我不用貼圖的方式是因為貼圖沒有動畫的效果。事實上 W3Counter WUFOO 裡的圖似乎也都是用這個 API 做的,看來這個 API 已經得到 AJAX 界的肯定。

使用上其實也蠻簡單的,首先 下載 XML/SWF Charts 的 library,解開後有一個 charts.swf 和 charts_library 的資料夾。把它們放到 web 可以 access 得到的地方。在 html 或是動態網頁檔加入以下的 flash object:

<OBJECT classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0&#8243; WIDTH=”400″ HEIGHT=”250″ id=”charts” ALIGN=””> <PARAM NAME=movie VALUE=”charts.swf?library_path=charts_library&xml_source=sample.xml”> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#666666> <EMBED src=”charts.swf?library_path=charts_library&xml_source=sample.xml” quality=high bgcolor=#666666 WIDTH=”400″ HEIGHT=”250″ NAME=”charts” ALIGN=”” swLiveConnect=”true” TYPE=”application/x-shockwave-flash” PLUGINSPAGE=”http://www.macromedia.com/go/getflashplayer”&gt; </EMBED> </OBJECT>

其中 src 的部份要指向 charts.swf 的所在位置。而後面的 sample.xml 就是圖表的資料來源囉。Sample.xml 由一個固定的 xml 格式表示圖表的原始資料。以下列的圖表為列:

2001 2002 2003 2004
Region A 5 10 30 63
Region B 100 20 65 55
Region C 56 21 5 90

那麼 Data 的格式就要如下:

<chart>
    <chart_type>column</chart_type>
    <chart_data>
      <row>
         <null/>
         <string>2001</string>
         <string>2002</string>
         <string>2003</string>
         <string>2004</string>
      </row>
      <row>
         <string>Region A</string>
         <number>5</number>
         <number>10</number>
         <number>30</number>
         <number>63</number>
      </row>
      <row>
         <string>Region B</string>
         <number>100</number>
         <number>20</number>
         <number>65</number>
         <number>55</number>
      </row>
      <row>
         <string>Region C</string>
         <number>56</number>
         <number>21</number>
         <number>5</number>
         <number>90</number>
      </row>
   </chart_data>
</chart>
而產生出的圖表就是這個樣子囉:

補充一下,圖表的一些格式、設定參數,是由 chart attributes 來設定,上面的 <chart_type> 就決定了系統要畫出什麼圖表。而 chart 的資料來源也可以帶有參數,讓 server 依參數動態產生 xml data。以上就大觀念作了簡單的解釋,詳細的部份請參閱 TutorialReference,畢竟參數太多了,很難一一解說。

這樣的 web 圖表架構,其實本身就是一種 AJAX。而 XML/SWF Charts 是可以免費使用的,只是圖會是可以點的,而點選就跳到 XML/SWF Charts 的 site。如果選擇付費的話,其實也不會很貴,USD $45 就可以買到一個 domain + any subdomain。我覺得 XML/SWF Charts 很有潛力成為知名圖表工具,甚至變成 Web 的圖表標準。而它的 host,maani.us 還提供了很多有趣跟有用的工具,像有一個是 flash 做成的汽車儀表板,實在太讚了。強力推介!

technorati tags:, , , ,

Blogged with Flock

Advertisements
  1. July 26, 2006 (Wednesday) at 10:36

    這東西才是報表的王道啊…不過若要給老闆看的報表還是得列印出來,那就動畫效果全失了…

  2. July 26, 2006 (Wednesday) at 21:52

    這就是圖表的王道啊!
    不知道是否可以和Blog結合。

  3. July 26, 2006 (Wednesday) at 22:24

    和 blog 結合? WordPress 的 blog stat 正是用 XML/SWF Charts !!
    只是要在 blog post 上用它會有些限制,hosting service 不會讓人亂用 flash 的,殘念呀!

  4. September 28, 2006 (Thursday) at 23:16

    XML/SWF Charts好用繪製圖表組件

    這真的是很不錯的圖表組件, 而且使用容易, 安裝容易, 很方便呢!
    請參考: http://diary.tw/tim/36

  5. felix
    October 16, 2006 (Monday) at 15:35

    玩了一下,是很好用,不過好像中文沒辦法顯示也,不知道有沒有方法可以改,不然再好看老板也是不要。

  6. April 24, 2007 (Tuesday) at 16:26
  7. chihwen
    July 24, 2007 (Tuesday) at 23:45

    這篇有提到 http://diary.tw/tim/36
    將 font 設置為 system 即可順利顯示中文

  8. chihwen
    July 25, 2007 (Wednesday) at 0:22

    http://www.google.com/search?ie=UTF-8&oe=UTF-8&q=font&btnG=Search&domains=www.maani.us%2Fxml_charts%2F&sitesearch=www.maani.us%2Fxml_charts%2F

    一、顯示中文的重點在於必須以 UTF-8 編碼存檔,並以給予適當的字型,該字型必須存在於 clinet 端中,如下說明。

    http://www.maani.us/xml_charts/index.php?menu=Reference&submenu=axis_value
    http://www.maani.us/xml_charts/index.php?menu=Reference
    http://www.maani.us/xml_charts/index.php?menu=Reference&submenu=draw

    Special Characters

    To display special characters or languages other than English:

    1. Type the special characters in the source file, and apply a font to it that can display the characters:

    special_text

    Replace special_font with the name of a font that can display the special characters. This must be a font other than Arial, and the font name must be typed exactly the way it is referred to by the operating system. Replace special_text with the text containing the special characters. The special characters must appear correctly here.

    2. Save the source file with UTF-8 encoding. When saving the file, examine the saving options that the text editor offers. One option should be a checkbox to make the file UTF-8. If your text editor doesn’t provide this option, then find another editor that does.

    3. View the chart on a machine that has the same special font already installed.

    二、或者採用內嵌字型的作法,不過這就要購買版權了。

    http://www.maani.us/xml_charts/index.php?menu=Chart_in_SWF
    http://www.maani.us/xml_charts/index.php?menu=License

    Embedding Other Fonts

    When displaying a chart directly in a web page, the only embedded font available is Arial bold. To work around this limitation, and add more embedded fonts, insert your chart inside another flash (swf) file as described above, embed other fonts in it, then display this new flash file in the web page instead. You may substitute the default Arial font with any other font, or embed multiple fonts in the same way as described above.

    The chart can’t detect embedded fonts automatically. It’s necessary to tell it to use only embedded fonts by adding this variable at the root level in the flash file that includes the chart:

    embed_fonts = true;

  9. May 9, 2010 (Sunday) at 20:42

    Hello!, interessant publication.. I post on your blog because you probably can to help me. I know, it’s not the exactly exactly place to publish but … I want to have a 100% free hosting service that is ok to accept PHP and Msql. Do you believe that I can find a first-class source or at the best a good free hosting list or something like that… etc… for what I wish ? just 1 thing: Do you know totally free ads free hosting ?? With wich tool have you built your website ? See you

  10. June 14, 2013 (Friday) at 15:49

    Awesome! Its truly awesome paragraph, I have got much clear idea concerning from this article.

  11. July 1, 2013 (Monday) at 0:24

    Good way of telling, and good article to get facts about my presentation subject
    matter, which i am going to convey in academy.

  12. July 2, 2013 (Tuesday) at 14:49

    An intriguing discussion is definitely worth comment.
    There’s no doubt that that you should write more on this issue, it might not be a taboo subject but usually people don’t speak about such subjects.
    To the next! Many thanks!!

  13. August 31, 2013 (Saturday) at 4:52

    Its such as you learn my mind! You appear to grasp a lot approximately this,
    like you wrote the e book in it or something.
    I believe that you could do with some p.c. to force the message home a little bit,
    however other than that, this is wonderful blog. A fantastic read.
    I’ll definitely be back.

  14. January 18, 2014 (Saturday) at 16:40

    Very nice post. I just stumbled upon your weblog and
    wanted to say that I’ve really enjoyed surfing around your weblog posts.
    In any case I will be subscribing for your feed and I’m hoping you
    write again soon!

  1. July 26, 2006 (Wednesday) at 8:26
  2. October 10, 2011 (Monday) at 19:51

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

%d bloggers like this: