silverlight以資料庫內容動態繪製圖表

在這個範例當中，我們將為讀者展示如何透過asp.net與silverlight的結合，讓開發人員得以自由的在頁面上繪製圖表。過去，我們可能需要採購國外昂貴的軟體元件，或是自行開發以ajax技術為核心的動態圖表產生程式，這不僅要花費不少的時間，且必須和動態圖表產生時所需要處理的gdi+打交道，另外圖表呈現到前端頁面時的顯示效果也不盡理想(即使用了ajax技術都會有一點閃爍的感覺)。

然而，asp.net開發人員辛苦的過去即將結束，從現在這個範例中，您將會看到另一種未來的可能性，當您翻開這一章，會發現原來透過asp.net加上silverlight來繪製圖表是這樣的簡單，而且整個呈現出的效果與過去ajax時代所動態組出的圖表在品質上更是有過之而無不及，整體的開發時程、產品品質、維護和管理成本的降低，總而言之，您的asp.net開發效益都將因為silverlight的加入而大大的提公升，不多說了…繼續往下看吧。

功能展示

關於動態繪圖功能

這是乙個對asp.net開發人員來說相當有意義的範例，您會從這個範例看到未來web應用程式發展的可能性。

不知道您是否像筆者一樣，過去花了不少的時間在和asp.net上的動態圖表呈現打交道，歷經了多種不同的做法，終於到現在，有乙個令筆者滿意的結果。

透過silverlight與asp.net的整合，再加上《董大偉silverlight權威講座》一書所提供的dynamicxaml控制項，不需要學gdi+、不用動態產生圖片、不需要管什麼複雜的泛型處理函式、連ajax也不用學了，透過silverlight動態產生圖表直接變得相當的簡單。

不僅如此，當您看到下面的範例和程式碼之後，相信您也會覺得，透過我們提供的dynamicxaml控制項，未來在web上繪圖，對您的專案來說絕對是乙個大大的加分，而不是像過去一樣，得花上那麼大的成本。

展示畫面

我們先看程式執行的結果：

這樣的功能怎麼完成的呢?我們立刻來看。

功能實作

抓取資料庫繪製圖表

當使用者按下畫面的『以資料庫資料繪製圖表』鈕時，執行到的是底下的程式碼：

'以資料庫資料繪製圖表
protected sub button6_click(byval sender as object, byval e as system.eventargs)
'開啟資料庫
dim db as new mdbaccess("accessdb.mdb")
'讀取table1的內容放置於dt (datatable)
dim dt as data.datatable = db.readdatatable("select * from table1")
'清空canvas
me.dynamicxaml1.clearcanvas("canvas1")
'繪製圖表座標
me.dynamicxaml1.line(30, 10, 30, 450,"black")
me.dynamicxaml1.line(30, 450, 600, 450,"black")
for y as integer = 450to 30 step -50
'座標數值
me.dynamicxaml1.drawstring(5, y - 10, 0, 0, 12,"blue", right("00" & 450 - y, 3))
'座標線條
me.dynamicxaml1.line(30, y, 600, y,"3,3", 2, "gray")
next
'繪製長條圖
dim value as integer
'第一組數字
value = dt.rows(0).item(1) → 開始以資料庫抓取到的數值繪圖
me.dynamicxaml1.rectangle(100, 450 - value, 20, value, "red", "black", 0.7)
me.dynamicxaml1.drawstring(100, 450 - value - 12,0, 0, 9, "black", value)
'第二組數字
value = dt.rows(0).item(2)
me.dynamicxaml1.rectangle(200, 450 - value, 20, value, "blue", "black", 0.7)
me.dynamicxaml1.drawstring(200, 450 - value - 12, 0, 0, 9, "black", value)
'第三組數字
value = dt.rows(0).item(3)
me.dynamicxaml1.rectangle(300, 450 - value, 20, value, "brown", "black", 0.7)
me.dynamicxaml1.drawstring(300, 450 - value - 12, 0, 0, 9, "black", value)
'第四組數字
value = dt.rows(0).item(4)
me.dynamicxaml1.rectangle(400, 450 - value, 20, value, "green", "black", 0.7)
me.dynamicxaml1.drawstring(400, 450 - value - 12, 0, 0, 9, "black", value)
end sub

抓取資料→繪圖→結束，就是這樣，簡單明瞭，幾乎不用多作解釋的程式碼。

由於dynamicxaml的非同步繪圖支援，所以我們只需要把數值表示的長度轉成座標，然後繪製rectangle並且透過drawstring方法顯示圖表上的數值文字，就可以輕鬆的抓取後端資料庫中的內容，以動態的完成圖表，您甚至還可以清除重新畫一次呢：

動態繪製圖表功能

至於上圖畫面底下的繪製線條、矩形、橢圓、以及用來繪製文字等測試按鈕的程式碼如下：

當使用者按下畫面的『以資料庫資料繪製圖表』鈕時，執行到的是底下的程式碼：

protected sub button1_click(byval sender as object, byval e as system.eventargs)

'繪製線條

dim x, y, width, height as integer

x = txb_x.text

y = txb_y.text

width = txb_width.text

height = txb_height.text

me.dynamicxaml1.line(x, y, x + width, y + height, ddl_color.selectedvalue)

end sub

protected sub button2_click(byvalsender as object, byval eas system.eventargs)

'繪製矩形

me.dynamicxaml1.rectangle(txb_x.text, txb_y.text, txb_width.text, txb_height.text,

ddl_color.selectedvalue, ddl_bordercolor.selectedvalue)

end sub

protected sub button3_click(byval sender as object, byval e as system.eventargs)

'繪製橢圓

me.dynamicxaml1.ellipse(txb_x.text, txb_y.text, txb_width.text, txb_height.text,

ddl_color.selectedvalue, ddl_bordercolor.selectedvalue)

end sub

protected sub button4_click(byval sender as object, byval e as system.eventargs)

'繪製文字

dim elename as string = "a" & now.ticks

me.dynamicxaml1.drawpathstring(elename, txb_x.text, txb_y.text, txb_width.text,

txb_height.text, txb_textsize.text, ddl_color.selectedvalue, ddl_color.selectedvalue,

me.txb_words.text,"新細明體")

end sub

protected sub button5_click(byval sender as object, byval e as system.eventargs)

'清空canvas

me.dynamicxaml1.clearcanvas()

end sub

您會發現也都是透過dynamicxaml控制項來完成，我們可以隨意的在silverlight物件的canvas上繪圖：

您會發現整個繪製動作明顯比過去以asp.net甚至asp.net ajax來的順暢很多。而且都是即時完成，相信這樣的效果會讓web solutions的開發人員感到驚豔。

當然，如果您是asp、php、jsp…的使用著。恐怕目前還在與傳統的動態圖檔產生打交道吧…asp.net的開發人員真的顯然要幸運的多很多。

轉於《董大偉silverlight權威講座--asp.net整合秘技與獨家案例剖析》

silverlight以資料庫內容動態繪製圖表

資料庫基礎以命令方式建立資料庫

以Oracle資料庫為目標的資料庫高階（一）

資料庫備份以ORACLE為例子

silverlight以資料庫內容動態繪製圖表

資料庫基礎 以命令方式建立資料庫

以Oracle資料庫為目標的資料庫高階（一）

資料庫備份 以ORACLE為例子

相關推薦

資料庫基礎以命令方式建立資料庫

資料庫備份以ORACLE為例子