Visifire下展示cube

摘要：

本文主要描述在Siverlight下使用開源圖表組件Visifire展現Cube中的資料。由於Cube結構本身很複雜所以本文使用一維的查詢結果，側重於從OLAP到Silverlight端的方法。

環境概述：

本文使用Silverlight 2，visifire版本是2.0.4
beta。Cube的SQLServer版本是2008，樣本中使用的Cube是微軟樣本CubeAdventure Works DW
2008，對於複雜的Cube查詢aspnetx建議只使用表格的形式展現，為不使圖表看上去很亂，建議使用簡單的一維數列，所以在這個Cube中本
文使用如下MDX語句作為示範：

select [Measures].[Reseller Order Count] on 0,

[Product].[Category].members on 1

from [Sales Targets]

其查詢結果如下：

為什麼要用visifire?

其實在微軟的silverlight
toolkit中已經有了圖表組件，但是筆者認為其效果不如visifire的效果好，而且visifire中的每個資料點datapoint都可以被點
擊到，這個在做BI相關項目的時候很重要，因為類似drill down/up和drill throught to
detail的操作都得依賴這個來實現。

建立Silverlight項目：

開啟Visual Studio 2008，選擇檔案，建立Silverlight項目。建立項目的同時會提示是使用asp.net
web項目來寄宿silverlight項目還是只使用一個簡單的測試頁來寄宿silverlight項目。這裡選擇asp.net web
application項目。

Silverlight本身作為瀏覽器的外掛程式是沒有System.Data
這樣的命名空間的，所以需要從資料庫或其它資料來源擷取資料的話就需要通過webservice以及類似的方式，所以，為silverlight提供資料的
webservice相關資源我們會建立在剛才的寄宿silverlight的asp.net web applition項目中。

添加Visifire到頁面中：

首先需要添加visifire引用到項目中。這裡我們只需添加一個dll檔案即可，這個檔案可以在：

http://visifire.com/download_silverlight_charts.php

下載到。下載後解壓縮可以看到如下兩個dll檔案：

其中WPFVisifire.Chart.dll是在WPF Application下使用的，SLVisifire.Charts.dll是在silverlight項目下使用的。

這裡我們在剛才建立的silverlight項目下按右鍵References，選擇Add References…，在彈出的Add
Reference表單下選擇Browse選項卡，定位到visifire下載目錄，找到SLVisifire.Charts.dll，然後單擊OK。

由於visual
studio本身是不支援silverlight控制項的設計時拖拽支援的，所以這裡需要用到Blend2。按右鍵Page.xaml檔案，選擇Open
in Expression Blend…。只要正確安裝了Blend2+SP1，那麼這個選項就會出現。

在Blend中，找到我們添加的visifire chart控制項放到Page.xaml中，具體方法如下：

如，在Blend的工具列中找到>>這樣的按鈕，單擊它，會出現Asset Library對話方塊，選擇Custom
Controls，然後單擊Chart。這個Chart就是我們要添加的Visifire
chart。現在滑鼠變成了一個十字型，在面板上勾畫一個矩形地區，至此visifire chart添加完畢。

Visifire 2以後的版本都帶了Blend設計時支援，所以在Blend裡可以看到其預留位置。此外，我們還需要給這個chart取一個名字（預設是沒有名字的），好以後在c#檔案裡可以引用到它：

我們也可以在代碼中建立chart到面板中，visifire的document中有很多範例程式碼，在此不作過多描述。

建立WebService服務：

回到visual studio中。由於資料來自於Cube，所以需要添加ADOMD.Net的引用。右鍵asp.net web
application項目，選擇Add
Reference…，找到Microsoft.AnalysisServices.AdomdClient，選擇10版本的，如：

接下來添加服務檔案，同樣右鍵asp.net web application項目，選擇Add-New Item…，在彈出的對話方塊中選擇Web Service，添加一個web服務到項目中。

開啟這個服務檔案，在頂部添加如下引用：

using Microsoft.AnalysisServices.AdomdClient;

Visual Studio會為我們預設添加一個Hello World方法，刪除它，然後加入如下代碼：

 

[WebMethod]

public List<ChartItem> GetResult()

{

List<ChartItem> result = new List<ChartItem>();

AdomdConnection conn = new AdomdConnection();

conn.ConnectionString = "provider=msolap ;Integrated Security =SSPI
;Data Source= localhost ;Catalog = Adventure Works DW 2008 ;";

conn.Open();

AdomdCommand comm = new AdomdCommand();

comm.Connection = conn;

comm.CommandText = "select [Measures].[Reseller Order Count] on
0,[Product].[Category].[Category].members on 1 from [Sales Targets]";

AdomdDataReader dr = comm.ExecuteReader();

while (dr.Read())

{

ChartItem ci = new ChartItem();

ci.Title = dr[0].ToString();

ci.Value = double.Parse(dr[1].ToString());

result.Add(ci);

}

return result;

}

傳回型別是List<ChartItem>，其中ChartItem是自訂的一個類，代碼如下：

public class ChartItem

{

public string Title { get; set; }

public double Value { get; set; }

}

 

資料的查詢過程和查詢資料庫的大同小異，只不過是針對Cube有專門的AdomdConnection和AdomdCommand等對象。接受結
果用CellSet是比較多的，但是這裡由於只用了一維的數列，結構相對比較簡單，所以用AdomdDataReader來接收就足夠了。然後
dr.Read()迴圈建立ChartItem對象添加到類型為List<ChartItem>的結果result中。

關於ADOMD.NET請參考筆者的這篇文章：

ADOMD.NET 9 簡記---ADOMDConnection

本文中用到的是10，不過根據aspnetx的經驗9跟10的變化不大（我懷疑甚至是沒有）。

至此，服務建立完畢，瀏覽下這個服務，如果能返回類似如下介面就說明服務運行正常：

另外，我們需要記錄下這個服務的地址，這個地址我們可以通過按右鍵剛才建立的Web Service檔案選擇View in Browser，然後在彈出的瀏覽器介面中看到：

複製下這個地址，後面要用到。

Visifire讀取Webservice資料並且展現：

回到silverlight項目，右鍵silverlight項目，選擇Add Service Reference…（注意這裡跟剛才添加引用不同，這裡是加入服務參考）。在彈出的介面中，Address裡填入剛才複製的地址，然後點擊Go。系統會檢測到這個地址下有哪些服務，選擇我們剛才建立的服務，Namespace這裡我們選擇預設，然後單擊OK。

然後，開啟Page.xaml.cs，添加如下引用：

using SLVisifire.ServiceReference1;

using Visifire.Charts;

添加第一個引用是為了建立服務執行個體的時候不需要太囉嗦，第二個引用的目的是使用visifire下的如下類：DataSeries和DataPoint。前者是可以作為visifire chart執行個體的資料來源（序列），其本身是一個集合，後者就是它其中的元素。

最後，在Page裡用如下代碼替換現有代碼：

 

public Page()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(Page_Loaded);

}

void Page_Loaded(object sender, RoutedEventArgs e)

{

WebService1SoapClient wc = new WebService1SoapClient();

wc.GetResultCompleted += new EventHandler<GetResultCompletedEventArgs>(wc_GetResultCompleted);

wc.GetResultAsync();

}

void wc_GetResultCompleted(object sender, GetResultCompletedEventArgs e)

{

DataSeries ds = new DataSeries();

foreach (ChartItem item in e.Result)

{

DataPoint dp = new DataPoint();

dp.AxisXLabel = item.Title;

dp.YValue = item.Value;

ds.DataPoints.Add(dp);

}

chtTest.Series.Add(ds);

}

 

至此，項目建立完畢，運行項目，我們就可以看到如下介面：

實際的效果是帶動畫的，要比靜態圖片效果好。

[本文相關項目檔案下載]

總結：

本文大體描述了在silverlight中使用visifire顯示Cube中的資料的一般方法，下文中筆者將繼續圍繞這一話題藉助visifire實現更多展現功能。