作者: tim

分類
程式技術

免費的圖表工具-FusionCharts Free

之前介紹過 XML/SWF Charts , 可以參考這篇: XML/SWF Charts好用繪製圖表組件 https://diary.tw/archives/316 , 這裡要介紹另一個好用的組件, FusionCharts Free (http://www.fusioncharts.com/free/), 為什麼說是 Free 呢, 因為, 他也有付費的版本, 而這個 Free 的版本是要免費給大家使用, 並且進一步使用那家公司其他的工具(再來付費), 真是不錯的好方法.

這個組件是用 flash 實作的, 提供了以下種類的圖表,

  1. 3D/2D Column & Bar Charts
  2. Line Charts
  3. 2D/3D Pie & Doughnut Charts
  4. Area Charts
  5. Stacked Charts
  6. Candlestick Charts
  7. Funnel Chart
  8. Gantt Chart

比較特別的是這個 Gantt Chart, 一般的繪圖組件, 比較少見這個類型的圖表, 十分特別, 其他的圖表也都很美觀, 而接下來我們就來進行實作吧.

該元件有支援中文, 不過輸出中文的資料檔要有 BOM, 也就是 UTF-8檔頭, 否則不能輸出正確的中文, 我們以簡單的一個 Line Chart 來看.

基本上, 要畫一個 Line Chart 使用的元件是 FCF_Line.swf 這個 flash 組件, 而餵給他的參數共有 &dataURL=data1.php&chartWidth=640&chartHeight=480, 其中的 dataURL 為另外的一支餵資料的程式, 可以是任何型態的 server 程式碼或是靜態的網頁, 而 chartWidth 及 chartHeight 則是圖表的寬高. 若是要給中文, 一定要用 UTF-8 with BOM 的方式, 才能正常顯示中文.

再來就是這個 data1.php 的內容, 基本上有幾個重點, 先看圖形根節點:

<graph
baseFont="system"
caption="年度銷售"
subcaption="台北地區"
xAxisName="月份"
showNames="1"
showValues="0"
formatNumberScale="0"
decimalPrecision="0" >

其中 baseFont 是指定字型, 若是中文, 儘量用 “system” 這個字型, 而 caption 就是圖表標題, 而 subcaption 是副標, 會在標題下方, xAxisName 是 x 軸說明, showNames 是 x 軸資料的名稱是否要顯示(本例為 1, 2, 3, .. 12), showValues 是指每個資料點上的值是否要秀出, formatNumberScale 是用來表現大數字時, 是否要用 k, m 等來表示, 如 30,000 會顯示為 30K, 而 decimalPrecision 則是指要小數點幾位.

再來是資料內容, 被包在 <graph ></graph> 這組內, 現在要 demo 是簡單版的, 就是只有一個數值要繪製, 可以直接將 name value 放成資料在上面的 graph 裡, 以此例來看, 就是這樣:

<set name="n1" value="12000" hoverText="name1" />
<set name="n2" value="19000" hoverText="name2" />
....

其中 set 是一個一個的資料, 而 name 是在 x 軸上的名稱, hoverText 是當 mouseOver 時, 會在數值點上的名稱, 整個秀出來的結果如下:

可以參考這個 sample: http://sample.diary.tw/19/chart1.php , 資料在此: http://sample.diary.tw/19/data1.php , 其中的 flash 語法如下:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="640" height="480" id="Line" >
  <param name="movie" value="./FCFCharts/FCF_Line.swf?dataURL=data1.php&chartWidth=640&chartHeight=480" />
  <param name="quality" value="high" />
  <embed src="./FCFCharts/FCF_Line.swf?dataURL=data1.php&chartWidth=640&chartHeight=480"  quality="high" width="640" height="480" name="Line" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

這樣就能順利繪出所需要的 Line Chart 折線圖了.

至於多數列的部分, 這裡再整裡一下, 多數列會面臨不能用一個 <set > 將資料標籤和資料值組包在一起, 所以需要分開作, 而且, 重點在於多數列使用的 swf 組件為 FCF_MSLine.swf, 原來的 FCF_Line.swf 只能畫單數列.

graph 的部分不變, 用法相同.

再定義 x 軸, 如下:

<categories>
<category Name="Jan" />
<category Name="Feb" />
...
</categories>

再定義數列, 此例為兩列數列:

<dataset seriesName="PC" color="aabb00" anchorBorderColor="aabb00" anchorRadius="4">
<set value="12000" />
<set value="19000" />
...
</dataset>
<dataset seriesName="NB" color="00aabb" anchorBorderColor="00aabb" anchorRadius="4">
<?php
<set value="17000" />
<set value="22000" />
...
</dataset>

最後一樣用 </graph> 包起來即可, 範例在此: http://sample.diary.tw/19/chart2.php , 其資料在此: http://sample.diary.tw/19/data2.php

PS 注意以上範例的 value 都利用 php 亂數產生的, 所以每次值會不同, 而這組 swf 圖表的好處是若只要用 Line Chart 則使用 FCF_Line.swf , 而多組數列, 則用 FCF_MSLine.swf 都是獨立 swf 組件, 而且, 餵給他的參數中 dataURL=[filename] 的部分, 不需要再自組亂數在後面(避免 cache 問題, 因為他會自己加, 如下:)

那個 curr=80 就是他 flash swf 自行呼叫的加上的亂數, 比較自動一點.

結論是這組繪畫組件也十分輕量好用, 一個 swf 檔 20k 左右, 用哪一種就 embed 哪一種, 個個獨立操作, 而若不想用 dataURL 給 script 的方式, 也可以用 dataXML 將字串直接用 querystring 的方式餵給他, 就不需要再寫 script, 看實際應用方便來調整囉.

而單組和多組數列的圖表繪製使用的 swf 組件也不同, 主要由檔名就看得出來了, 就是多了 MS 的都是多組數列的哦.

有什麼問題, 大家可以一起討論看看.

分類
程式技術

IE6還這麼多人用耶

剛在看這篇文章: IE 6在臺市占率仍超過5成 (http://www.ithome.com.tw/itadm/article.php?c=56054), 發現其實我的想法比較偏向所謂的用戶原始的瀏覽器用什麼, 就會持續用下去的這個狀況, 也就是說, 用戶應該在 XP 就會用 IE6, 在 Vista 就會用 IE7, 在 Windows 7自然用 IE8, 而其中的許多數據也都相當耐人尋味.

用戶自己會選擇使用什麼瀏覽器的, 自然是比較了解電腦, 或是會自己安裝軟體的用家, 而且通常應該要原來固定使用的瀏覽器發生什麼大問題, 或效能不好, 或速度慢等原因, 才會面臨升級或是換瀏覽器的狀況.

不過這也讓我想看一下這個網站的比例狀況(2009/07), 我列出來給大家參考:
狀況如下:

IE6 29.1%
IE7 17.9%
IE8 9.6%
FX3.5 6.8%
FX3.0 10%
SAFARI 3.5%
OTHER 23.1%

其中果然 IE6 佔了大多數, 到 29.1% (相對於上文的報導是沒有那麼高), 而整個 IE 也有 56.6%, 另外 Firefox 則是有 16.8%, Safari 則是 3.5%, 其他的部分包含較小量版本的 IE, FX, 及一些有的沒的, 共有 23.1% (這個也還蠻多的, 真有趣), 整理或圖形如下:

基本上, 網站其實就是要照顧到所有用戶使用的環境來設計功能及呈現, 才不會影響用戶的來訪, 不過, 最重要的是大家都要依照標準來做就對了, 才不會顧此失彼, 這樣也就沒什麼太大的相容性問題!

順便附上 OS 比例也供參考:

經緯度轉換(換算)(papago)

這個是一個簡單的事啦. 只是 papago 只接受度分秒的方式輸入座標, 有點鳥, 因為有時要用十進位方式輸入或查詢, 所以需要做個小轉換.

其實公式不過就是這樣, 將度分秒(60進位)換成十進位, 公式很單純, 小學生也都會:

x度 y分 z秒 = x + y/60 + z/3600 度

也就是這一回事而已. 為了讓自己方便, 也讓大家方便, 乾脆做個小工具來操作好了, 注意, 是 WGS84 的格式, 若有其他格式, 請參考中研院線上轉換程式(也是線上直接算: http://webgis.sinica.edu.tw/cgi-tran/webtrans.htm)

另外也說明一下 google maps 可以接受的格式, 例如台北101的座標為: 25.033493, 121.564101, 用文字說明是

北緯 25.033493度, 東經 121.564101度,

用60進位則為

北緯 25度 2分 0.574799999999982秒, 東經 121度 33分 50.76359999997749秒

利用 google maps 的連結, 參數為 q 給定的方式, 根據這兩種格式都可以連到, 如下:
http://maps.google.com/?q=25.033493,121.564101
http://maps.google.com/?q=25 2 0.5748, 121 33 50.7636

這兩種方式, 連向的位置是完全一樣的, 當然前題是 google maps 也是用 WGS84 的格式.

sample 放到這裡: http://sample.diary.tw/18/maps.htm

另外是 google maps 無法由瀏覽地圖直接查經緯度, 可以利用這個方便一點: http://www.mygeoposition.com/

google maps 名人地圖

才寫完”時空的魅力” https://diary.tw/archives/868 這篇, google maps 又有新服務了, 與其說是新服務, 不如說是新應用.

google maps 上面, 若是多加了”名人”來加持一下, 相信會很有趣, 就是因為這樣的應用情境, 所以 google maps 把名人地圖搬上來的確很吸引人, 利用名人的推薦, google maps 的地圖空間概念, 整合起來, 可閱性的確高很多, 來看看如何操作:

首先連到: http://maps.google.com.tw/

再來連結下面有個”探索全球”:

再來就會出現”台灣台北”的這個預設地點(當然可以選其他國家的城市看看囉), 並且出現許多名人的介紹, 可以點擊看看有什麼好吃, 好玩的資訊, 右側的地圖就會出現囉, 例如隋棠, 用一個很有趣的名模標籤, 標示了一些隋棠的地圖, 這樣一來, 大家就可以按圖索驥去試看看囉.

這樣的一個應用, 真的好玩又有趣.

相關閱讀,
google news 相關新聞: http://news.google.com.tw/news/story?um=1&ned=tw&cf=all&ncl=dmqtVPOHEZmlIuMjzXBODh-Ye8XHM
Google名人地圖標記 從虛擬搬上現實 http://www.bnext.com.tw/FocusDay_2099

時空的魅力

乍看這個標題, 可能大家會覺得怪怪的. 不過其實是看這個有感而發: http://www.flickr.com/map?place_id=kfD.4gubAZwCvKcDlA , 是的, 正是 flickr on maps.

這個連結是在台灣地區的 flickr 相片, 而且選取的邏輯應該是有較多留言(comments)的, 所以相片可看性較高. 品質也較為理想. 不過這樣並不是這篇文章要說的主題, 但無論如何, 大家有空可以去看看這個 flickr 的功能, 在指定地區上來看相片.

話說, 內容的產出, 無論是相片, 文章, 影音, 若是能有更多的附加分類及檢視方式, 相信會有更多的可讀性, 再加上更多人, 更多內容的串連, 傳統利用分類(category), 標籤(tag), 關鍵字(keyword)來將內容做分類, 並加以檢視, 以提升可閱讀性, 但再回頭看一下本篇文章的標題, 我想諸位聰明的讀者就明白我想寫些什麼了.

其實, 利用地圖這樣的功能來呈現內容這件事, 現在已經是顯學了, 許多內容產出的網站, 無不多加一個地圖來增加這個功能, 讓所謂的內容描述在地圖上的資訊更能量化, 而對於圖資提供商而言, 也是很不錯的一個內容補強工具的應用行為, 所以工具和內容互補很有意思的共生狀況.

之前寫過一篇 geotagging 的文章, 在這裡: Flickr geotagging功能上線囉 https://diary.tw/archives/323 應該是剛開始上線的時候, 其實這種呈現方式真的很方便, 把圖放在地圖上, 或稱在地圖上放圖這件事.

前面所言為”空”這件事, 也就是地理資訊, 接下來要談的是”時”這件事, 因為所有的 blog 系統, 相簿, 相片檔案, 影音檔案等, 都會有時間資訊, 而細緻一點的說法, 時間資訊也有所謂的上傳時間及該內容的發生時間(這裡並不想討論這麼細), 有了時間資訊, 就可以將時間軸也納入所謂的 metadata 中了, 這個時間參數很單純, 但是呈現的方式卻很可能很複雜, 像是 google earth 有個歷史功能, 可以看以前的圖資, 只要拉動時間軸就行了, 不過時間軸比較好的呈現方式, 目前看起來是 plurk.com 的時間河流的方式, 一方面, 時間像河流一樣前進著, 一方面, 可以將多重內容的相對時間整理起來, 利用相對位置的呈現方式, 將時間這個很抽象的參數表現出來.

而接下來, 就是如何同時表現這兩項功能於單一介面上了, 其實之所以定題目為”時空的魅力”這件事, 就是要將”時”和”空”的這種參數呈現出來, “時”可以用時間軸, 而”空”可以用地圖(未來不知會不會有真的”空”, 也就是再多加上高度這樣的參數), 這樣的內容呈現方式, 相信對於了解地理, 歷史, 人文, 政治, 各式各樣的學問(或是說資訊), 都應該會有很大的幫助, 利用這樣的呈現強化方法, 把原來單調, 而各內容間沒有相關的部分, 串連起來, 對於這些內容將會有更全盤的認識及了解.

分類
.net

String.Substring的Exception

真是很常見的一個 exception, 就是利用 String.Substring 這個函數來取 Left, Mid, Right 的功能, 不過會有 exception 要自行避開的問題.

常常我們用 String.Substring(0, 5) 來當做 Left(string, 5) 的功能, 不過, 若是字串長度本身就短於 5 時, 就會發生一個 ArgumentOutOfRangeException 的 exception, 可以先參閱 msdn 的說明: http://msdn.microsoft.com/zh-tw/library/aka44szs(VS.80).aspx

當然, 我們可以容易地去避免這個問題, 利用字串長度和取出長度的比較較小的值為準, 如下寫法:

string strA = "12345678";
string strB;

strB = strA.Substring(0, strA.Length < 10 ? strA.Length : 10);
// or 
strB = strA.Substring(0, Math.Min(strA.Length, 10));

不過, 無論如何都很妙, 要來先做判斷的事, 但我們可以利用一個更簡單的方式(若不想要用判定法), 可以利用含入 Microsoft.VisualBasic 的 reference 來使用, 可以這樣寫:

strB = Microsoft.VisualBasic.Strings.Left(strA, 10);

其實就已經會處理掉那個 10 會造成參數錯誤的 exception, 而 Mid, Right 也都是一樣的作法, 當然啦, 還是可以利用原來的 String.Length 的判定方式來寫, 不過寫 c# 就是沒辦法有現成的功能, 要嘛自己寫, 要嘛就要比較一下有沒有參數超過的問題, 要嘛, 就是 Microsoft.VisualBasic.Strings 下的方法來用囉!

分類
好用軟體

如何在windows 7(x64)下擷取DV Video

由於安裝了 Windows 7 (x64) 來測試應用狀況, 最近剛好遇到要 capture DV Video, 於是找半天, 在 os 內建的 “windows movie maker”, 結果沒有找到, 但是有 “Windows DVD 製作程式”. 查了 help 發現這個事實:

於是上網找了 windows movie maker 2.6 for vista 的版本來安裝 (link), 安裝倒沒問題, 不過找不到”從視訊裝置擷取” 這個選項:

所以可能是 windows movie maker for vista 在 windows 7 下沒辦法從 dv 擷取 video 出來吧, 於是只好再找看其他的 solution.

從這篇文章發現(link), 原來 live 工具組裡有個 Live Windows Movie Maker:

http://img.wlxrs.com/BJek85RRl3BJdDNE2TfInw/zh-cht/overview.jpg

於是趕快抓來用看看: http://download.live.com/moviemaker, 不過很有可能新版還沒有來得及趕上線, 於是出了個 live movie maker 搶鮮版更新, 在這裡: http://www.microsoft.com/downloads/details.aspx?FamilyID=e7446634-e033-4053-acd3-a7a18ea8a1a2&displaylang=zh-tw 是將原來的使用限期由 2009/6/30 延長至 2009/12/31, 所以也就一併更新一下. 接下來的應用就很單純了, 可以利用 live movie maker 來擷取 dv 內的 video, 也就順利地解決了在 windows 7 (x64) 下截取 dv 內的 video 問題了.

擷取完成, 再配合在 windows 7 內附的 windows dvd 製作程式, 就可以順利燒出 dvd 了耶. 還真不錯哦.

記得不用再去抓 windows movie maker 2.6 for vista 了, 會遭遇無法擷取的問題. 若有人可以擷取的話, 也請留言告知一下, 看是否是什麼環境的問題, 例如是 x32 的版本還是哪裡我沒有注意到的地方.

[2012/11/12 19:59]更新一下連結, movie maker 2011 整合在這個安裝包裡了: http://www.microsoft.com/zh-tw/download/details.aspx?id=29223

分類
手機大未來

Windows Marketplace for Mobile 研討會

昨天去聽這場研討會 – “手機應用創新開發與線上軟體商店研討會”, 請參考這篇: https://diary.tw/archives/836, 這場研討會, 一開始主要在談有關 windows marketplace for mobile 的註冊方式及費用方式.

目前已知的狀況如下, 若開發者是個人, 可以在公司名稱上填入自己的名字, 而在年底前註冊, 可享有 us99 驗證 5個 windows mobile app, 之後(也就是明年起), 將會恢復每個 app us99. 而參與的學員反應多數覺得費用有點貴. (獲利的拆帳是微軟30%, 開發商70%)

其實就使用者付費的角度來看, 付這個 us99的費用, 只是一個入門的門檻而已, 其實類比到 iphone app store 也是類似的狀況. 簡單地說, 站在一個用戶的角度來看, 會想看到線上 windows marketplace or iphone app store 裡, 有一堆很爛很奇怪的軟體嗎? 而這個入門費用, 其實也只是一個不高的門檻, 若能因此而獲得更多在架上軟體的品質保障, 何樂而不為呢?

另外, 再反過來說, 這也是一個賺錢或是說線上開店的投資準備, 能將這個軟體送上去審核檢驗, 再上架宣傳, 並讓用戶來下載安裝購買, 其實不用透過 windows marketplace 也能做, 自己架的網站就能做了吧, 但為什麼要上在這裡呢? 因為微軟(或 iphone app store)準備好了一個平台, 也準備好了一個收費機能, 更重要的, 是他們都會做大筆的宣傳及行銷. 我們類比到台灣的 yahoo 拍賣來看好了, 其實是個流量很大的拍賣網站, 雖然說是拍賣, 但上面也不乏不是拍賣的東西, 全新的商品, 專業的店家, 比比皆是, 所以其實也是個”百貨公司”的操作概念而已.

好啦, 寫這麼多, 也就不過是說明一下關於這個線上的 windows marketplace for mobile 的收費狀況的一些想法. 後面的講師及開發程式介紹, 內容也都十分充實而且實用, 我就不再多做贅述.

分類
好用軟體

sparky更新1.3.1

看起來是個小更新而已, 原來的 1.3.0 還在 https://addons.mozilla.org/en-US/firefox/addon/5362 是去年 11月的, 可以參考這篇: https://diary.tw/archives/709 , 不過我是因為 Firefox 的 sparky toolbar 通知才知道的, 應該不是主要更新.

連結在此: https://addons.mozilla.org/en-US/firefox/addons/policy/0/5362/54890?confirmed

有在使用 sparky (alexa toolbar for Firefox ) 的用戶可以更新一下囉!

分類
程式技術

好用的CSS STYLE截圖

基本上, 這是一個小技巧, 早主要是應用在一個計數器圖片下載優化的作用. 以往會利用多個圖片分別製作出 1, 2, 3, 4, 5, …. 9, 0 共十張圖片來進行計數器的圖片結果輸出, 但若是一個 8位數的數字, 將會需要下載 8次(當然, 重覆的話會減少下載次數). 然而, 有一種新的方式, 就是利用 CSS 的 STYLE 將其要輸出的圖檔, 將 1, 2, 3, 4, 5, … 9, 0 做成一張橫的長條圖, 例如:

(圖片引用自: http://counter.fc2.com/tw/point02.html#p2-2)

而利用這個技巧, 將所需要輸出的單一數字部分, 只截出對應的位置即可, 這樣一來便可以有效節省 client 對 server 的 request , 也降低這種小型圖檔在 client 及 server 間的 traffic.

這篇文章將說明如何利用這樣的技巧, 其實很簡單, 主要是利用了 <div></div> 這個 tag, 配合以下 4個屬性即可達成:

  1. background-image
  2. background-position
  3. width
  4. height

也就是將圖檔, 利用 background-image 引入在 div 之中, 而 div 則利用了 width 及 height 指定了長寬, 最後再利用 background-position 來移動圖檔即可, 如下:

 

這個 2 數字, 是利用這個 HTML:

<div style=”width: 17px; height: 21px; background-image: url(https://diary.tw/attach/1/1144413904.gif); background-position: -34px 0px;”>&nbsp;</div>

來達成的, 實際上用圖示來說明就像是這樣:

也就是其中的 width, height 指定為對應這個數字 2 的截圖大小, 為 17*21, 而 backgroud-position 則是將圖的位置由 0, 0, 移動座標為 -34, 0, 也就是往左移 34px (這張圖為 170*21, 所以每個數字佔用 17px, 若要取出 2這個數字, 則往左移動 2*17=34, 因為是往左移 34px, 所以是 position 是 -34px). 而超出 div 的 width, height 的部分, 也自然就不會顯示, 因為這是 div 的 background 背景圖.

若是要秀出 307 則使用如下語法:

<div style=”float: left; width: 17px; height: 21px; background-image: url(https://diary.tw/attach/1/1144413904.gif); background-position: -51px 0px;”>&nbsp;</div>
<div style=”float: left; width: 17px; height: 21px; background-image: url(https://diary.tw/attach/1/1144413904.gif); background-position: 0px 0px;”>&nbsp;</div>
<div style=”float: left; width: 17px; height: 21px; background-image: url(https://diary.tw/attach/1/1144413904.gif); background-position: -119px 0px;”>&nbsp;</div>

如下:

 

上面有多了 float: left; 主要是為了讓這些 div 能 inline 連在一起, 不然會變直的.

接下來可以應用的就很多了, 例如某張大圖, 裡面有4個區域要拿出來做網頁用, 可以利用這個功能, 將其全部的一張大圖, 拿來截切出來放在網頁上, 例如這張大圖:

要取出其中的 4個部分, 可以利用以下語法, 例如:

同步中心:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -231px -198px;”>&nbsp;</div>

Windows CardSpace:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -4px -100px;”>&nbsp;</div>

Java:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -157px -3px;”>&nbsp;</div>

iSCSI啟動器:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -82px -3px;”>&nbsp;</div>

這樣是不是很有趣又很方便呢? client 只需要 download 一次, 便能將所需要的圖檔都下載完成, 配合一點點的 CSS code 作法, 就能有效利用, 真是一舉兩得呢!

[2009/6/17 10:15]
根據高人指點, 這個是 CSS Sprites 的一個技巧, 詳情可以參考: http://waterlily-lsl.com/modules/article/view.article.php/170/c2

[2016/3/30 6:26]

另外可以參考這篇 w3c schools 的教學文章: http://www.w3schools.com/css/css_image_sprites.asp