首先來看一看實作的效果:
PS:原始的程式中更新曲線資料時添加了過渡的效果,具體可檢視官網的示例:
<a href="http://www.visifire.com/silverlight_spline_charts_gallery.php" target="_blank">http://www.visifire.com/silverlight_spline_charts_gallery.php</a>
點選其中的一個例子,然後點選Live Updates,就可看到資料更新時的過渡效果。但是蛋疼的部落格園,不知道為什麼,我插入了我原始的xap檔案,過渡效果卻沒有了,每次更新資料時,曲線直接就出來了(中間沒有過渡行為),開始的時候以為是上傳後xap檔案有可能發生了變化,或者進行壓縮什麼的,或者浏覽器解析什麼的,于是我把上傳到部落格園的xap檔案又下載下傳下來,然後嵌入到一個htm頁面中,發現還是有過度效果的,但是為什麼在部落格園的日志中就沒有呢?整了好久還是沒有整明白,求解釋!
下面來看看具體實作的過程吧:
首先需要添加SLVisifire.Charts,FJ.Core的引用。然後開始我們正式的工作:
1.定義一個Chart,該Chart即為顯示的圖表,以及定義一個Timer,用于定時重新整理資料。
2.定義一個方法:CreateChart執行個體化Chart,并完成Chart的相關設定(如:高,寬,曲線樣式等等)
3.我們看到在建立Chart中注冊了Loaded事件,在該事件的完成函數我們設定Timer的間斷值及注冊Timer Tick事件
4.這裡我們再寫一個方法:AddChartToMapLayer,該方法用來将Chart添加到地圖中
現在準備工作已經完成,下面就調用這些方法來實作上述的功能,我們大體的功能過程是:
當滑鼠移入Graphic是就顯示其對應的Chart,移除的移除Chart,這裡我們注冊一下FeatureLayer的MouseEnter和MouseLeave事件就行,我們再背景的XAML中注冊這兩個事件。
最後在背景添加如下代碼:
背景的XAML代碼:

View Code
這樣我們便實作了上述的效果。
需要注意的幾點:
1.Chart控件第一次加載資料的動畫效果(一個點一個點添加),隻能使用一次,也就是執行個體化Chart,加載資料時會有這樣的效果,之後更新Chart控件的資料不會有類似第一次加載Chart時顯示曲線動畫效果,而是上面說的過渡效果。
2.注意設定Chart的AnimatedUpdate屬性為True,否則資料更新時繪制曲線沒有過渡的效果
3.将Chart作為ElementLayer添加到地圖中,注意設定ElementLayer的顯示位置。
總結:
以上的過程資料都是用Timer元件來定時生成的,當然這裡也可以擴充,比如你的資料也可以是通過SQL查詢得到。此外,本例沒有用到資料綁定,這是因為本文的Chart是動态生成的,每次選擇Graphic時都會重新生成Chart.是以沒有用資料綁定。當然如果你的Chart是寫死的(執行個體化一次),或者定義在背景的xaml中,那麼建議您選擇資料綁定的方式,資料綁定的方式也很簡單,例如在XAML定義如下的Chart(詳見Visifire documentation):
在背景添加如下代碼:
這樣便可以實作Chart曲線的資料綁定。
PS:有那麼一段時間沒有用Visifire了,很多又忘記了,以上算是自己的一個總結,同時很多人也問個類似的效果怎麼做,在此和大家分享一下,鑒于時間和知識的關系,疏漏和錯誤在所難免,還望各位指正。
//關于解決地圖縮放時Chart偏移的問題。
1.注冊Map的ExtentChanging事件,然後在事件完成函數中重新設定Elmentlayer的Envelop,代碼如下: