1. 主題：各種酷炫圖表繪製技術 Silverlight Toolkit 與 MS Chart 控制項大探索 主講人：章立民

2. 主講人 章立民簡介 章立民研究室技術總監。 17 年資歷的微軟資深講師與顧問（Since 1992），6 度獲選微軟最有價值專家。 18 年資訊圖書撰寫經歷。 經濟部資訊專業人員鑑定計畫命（審）題委員。 電腦技能基金會資料庫應用類命題委員。 職訓局 Visual Basic 能力本位教材編撰委員。 工研院製造資訊部顧問、捷和建設資訊部顧問、資誠會計師事務所資訊系統服務部顧問、磐天科技總經理……等等

3. MS Chart 控制項 Silverlight Toolkit Chart 控制項適用於 Silverlight 2.0 應用程式。 Microsoft Chart Controls for Microsoft .NET Framework 3.5適用於 .NET Framework 3.5 SP1 的 ASP.NET 和 Windows Form 應用程式。

4. Silverlight Toolkit 圖表控制項 直條圖(Column Chart) 橫條圖(Bar Chart) 折線圖(Line Chart) 圓形圖(Pie Chart) 散佈圖(Scatter Chart) 泡泡圖(Bubble Chart)

5. 圖表的結構

6. SilverlightToolkit 圖表控制項使用步驟 下載 Silverlight Toolkit (http://silverlight.codeplex.com/) 加入對下列組件的參考：Microsoft.Windows.Controls.dllMicrosoft.Windows.Controls.DataVisualization.dll 建置專案。 將 Chart 控制項托放至 XAML 介面上。 依序設定數列與其資料來源。

7. 建立一個圖表 <!-- 圖表開始 --> <charting:Chart FontSize="16" Title="橫條圖" LegendTitle="圖例"> <!-- 指定圖表類型：BarSeries --> <charting:BarSeries Width="600" Height="450" Title="數列群組” AnimationSequence="LastToFirst" > <!-- 指定圖表的數值資料 --> <charting:BarSeries.ItemsSource> <controls:ObjectCollection> <System:Double>1.549</System:Double> <System:Double>5.724</System:Double> <System:Double>3.8</System:Double> <System:Int32>8</System:Int32> </controls:ObjectCollection> </charting:BarSeries.ItemsSource> </charting:BarSeries> </charting:Chart> <!-- 圖表結束 --> 資料點

8. 數列的型別(類別) 決定圖表的類型 BarSeries BubbleSeries ColumnSeries LineSeries PieSeries ScatterSeries 繼承自DataPointSeries 類別

9. 使用多個數列 <charting:Chart x:Name="Chart1"> <charting:Chart.Series> <charting:ColumnSeries Title="成交量" IndependentValueBinding="{Binding Path=Year}" DependentValueBinding="{Binding Path=Amount}“ AnimationSequence="FirstToLast" /> <charting:LineSeriesTitle="價格" IndependentValueBinding="{Binding Path=Year}" DependentValueBinding="{Binding Path=Price}“ AnimationSequence="FirstToLast" /> </charting:Chart.Series> </charting:Chart>

10. 動態設定數列的資料來源 <charting:Chart x:Name="Chart1“ Height="488" Width="809" Title="書籍資訊"> <charting:Chart.Series> <charting:ColumnSeries Title="書籍" AnimationSequence="FirstToLast" IndependentValueBinding="{Binding Path=書名}" DependentValueBinding="{Binding Path=價格}" /> </charting:Chart.Series> </charting:Chart> ColumnSeries series1 = (ColumnSeries)(Chart1.Series[0]); series1.ItemsSource = GetSimpleBookInfos(); 實作 IEnumerable 介面者

11. 動態設定數列的資料來源 void proxy_GetStockDataCompleted( object sender, GetStockDataCompletedEventArgs e) { if (e.Error == null) { if (e.Result.Count > 0) { ObservableCollection<StockData> stockData = e.Result; // 以非同步方式執行委派。 Dispatcher.BeginInvoke(() => { chartStock.DataContext = stockData; ShowWaitAnimation(false); }); } } }

12. 如何判斷哪一個資料點被選取 數列： SelectionEnabled="True" 撰寫 SelectionChanged 事件處理常式： 資料點是一個物件(控制項)。 將被選取的資料點轉換成來源物件型別。 向下鑽研圖表

13. 如何讓圖表反應來源變更 物件的類別必須實作 INotifyPropertyChanged介面 內含物件的集合必須實作INotifyCollectionChanged 介面 ObservableCollection 集合

14. 如何讓圖表反應來源變更 public class Book : System.ComponentModel.INotifyPropertyChanged { public string BookTitle { get { return this.m_BookTitle; } set { if (value != this.m_BookTitle) { this.m_BookTitle = value; NotifyPropertyChanged("BookTitle"); } } } … public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(string propertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } }

15. 自訂圖表的外觀樣式 展示與實作 Chart ChartAreaStyle LegendStyle PlotAreaStyle TitleStyle 可以直接於圖表的範本中設定，或是個別設定。 如何設定圖例項目的外觀樣式 DataPointSeries.LegendItemStyle 如何設計資料點的樣式與範本  Blend 2

16. 自訂圖表的外觀樣式 座標軸的格式： IndependentCategoryAxis CategoryAxis DependentRangeAxis HybridAxis CategoryAxis RangeAxis NumericAxis LinearAxis

17. 善用 Chart.StylePalette Chart.StylePalette 代表 Style 物件的集合。 依序且循環套用於不同數列的所有資料點 —或—單一數列中的各個資料點 當圖表建立一個 DataPoint 執行個體的時候，就會從 StylePalette 中取得下一個樣式。

18. 善用 Chart.StylePalette <charting:Chart x:Name="Chart1"> <charting:Chart.StylePalette> <DataVisualization:StylePalette> <Style TargetType="Control"> <Setter Property="Background" Value="Blue"/> </Style> <Style TargetType="Control"> <Setter Property="Background" Value="Green"/> </Style> <Style TargetType="Control"> <Setter Property="Background" Value="Red"/> </Style> </DataVisualization:StylePalette> </charting:Chart.StylePalette> … … </charting:Chart> 範例展示

19. 善用 Chart.StylePalette <charting:Chart.StylePalette> <DataVisualization:StylePalette> <Style TargetType="charting:PieDataPoint"> <Setter Property="Background" Value="{StaticResource FillBrush1}"/> <Setter Property="Template" Value="{StaticResource PieDataPointTemplate}" /> </Style> <Style TargetType="charting:PieDataPoint"> <Setter Property="Background" Value="{StaticResource FillBrush2}"/> <Setter Property="Template" Value="{StaticResource PieDataPointTemplate}" /> </Style> </DataVisualization:StylePalette> </charting:Chart.StylePalette>

20. 善用 Chart.StylePalette TargetType=“Control” 表示每一個 Style 物件都可以套用至不同類型的資料點。 TargetType 的對象也可以是： BarDataPoint BubbleDataPoint ColumnDataPoint LineDataPoint PieDataPoint ScatterDataPoint 資料點的工具提示文字格式：DependentValueStringFormat 屬性 數列的圖表外觀 宣告或程式控制方式 可以內含於圖表的範本中。

21. ASP.NET Chart 控制項 請下載 Microsoft Chart Controls for Microsoft .NET Framework 3.5 Microsoft Chart Controls for Microsoft .NET Framework 3.5 語言套件 Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008 Microsoft Chart Controls for .NET Framework Documentation Samples Environment for Microsoft Chart Controls

22. ASP.NET Chart 控制項的特性

23. ASP.NET Chart 控制項的圖表結構

24. ASP.NET Chart 控制項 展示與實作 Demo_PracticeChart001.aspx Demo_PracticeChart002.aspx

25. ASP.NET Chart 控制項類別架構

26. 動態繫結圖表 實作 IEnumerable 介面者可作為圖表的資料來源。 Chart.DataSource 屬性 Chart.DataSourceID 屬性 Chart.DataBindTable 方法 Chart.DataBindCrossTable 方法 DataPointCollection.DataBindY 方法 DataPointCollection.DataBindXY 方法 DataPointCollection.DataBind方法 DataPointCollection.AddXY 方法

27. 動態繫結圖表 DataPointCollection.AddXY 方法 讓資料表當中的每一列成為一個數列，而每一列的欄位值則成為資料點的 Y 值

28. 如何匯出圖表數列資料 將所有或指定的數列資料匯出至一個 DataSet物件以茲再利用： 資料繫結。 儲存至檔案或資料流。 轉換成不同的格式，例如：XML。 編輯。 Chart.DataManipulator.ExportSeriesValues

29. 分割、合併與複製數列 分割數列係指從單一來源數列複製多個 Y 值到多個目標數列。 合併則表示從多個來源數列中將值複製到單一目標數列中，換句話說，合併是分割的反向操作。 複製則代表其他所有的複製操作。 // 分割數列資料 Chart1.DataManipulator.CopySeriesValues( "BubbleSeries:Y1,BubbleSeries:Y2", "ColumnSeries:Y1,LineSeries:Y1");

30. 分組數列 分組會將一個數列中一系列的資料點替換成一個分組點。每一個分組點的 X 與 Y 值係使用指定的公式與原始點的值所計算出來的。當資料非常大量而導致很難在單一圖表中繪製的時候，分組就顯得特別有用。 分組的方法 Chart.DataManipulator.GroupByAxisLabel Chart.DataManipulator.Group

31. 排序數列 Chart.DataManipulator.Sort 排序數列中的資料點。 可以一次排序一個以上的數列。 可以使用自訂的排序器 - 實作 Icomparer 介面 Chart1.DataManipulator.Sort(PointSortOrder.Ascending, "Y", "Series1"); Chart1.DataManipulator.Sort(PointSortOrder.Ascending, "Y2", "Series1"); Chart1.DataManipulator.Sort(PointSortOrder.Ascending, "AxisLabel", "Series1");

32. 搜尋資料點 DataPointCollection.FindMaxByValue DataPointCollection.FindMinByValue DataPointCollection.FindAllByValue 可以針對所傳回的 DataPoint 物件做進一步的處理，例如：變更顏色以便清楚標示。

33. 篩選資料點 您可以去篩選數列中的資料點，當進行篩選操作時，數列的資料點會被移除或標示成空的。 篩選資料點的方式： 使用日期/時間範圍。 將最大或最小以外所有的資料點移除。 使用一個常數值來比對所有的資料點。 使用自訂的篩選條件。

34. 篩選資料點 Chart.DataManipulator.Filter 可以使用自訂的篩選器 – 實作 IDataPointFilter 介面。 Chart.DataManipulator.FilterTopN 篩選出名列前茅或墊底者。 Chart1.DataManipulator.FilterTopN( int.Parse(PointNumberList.SelectedItem.Value), "Sales", "TopSales", "Y", true);

35. 空資料點的處理方式 空資料點指的就是資料點的 Y 值遺漏或是被標記成空的。由於空資料點仍然擁有 X 值，因此仍然會顯示於圖表中。

36. 空資料點的處理方式 使用 Series.EmptyPointStyle 屬性自訂空資料點的外觀樣式。 使用自訂屬性 EmptyPointValue 自訂空資料點的值。 series.EmptyPointStyle.Color = Color.Gray; series.EmptyPointStyle.BorderWidth = 2; series.EmptyPointStyle.BorderDashStyle = ChartDashStyle.Dash; series.EmptyPointStyle.MarkerSize = 7; series.EmptyPointStyle.MarkerStyle = MarkerStyle.Cross; series.EmptyPointStyle.MarkerBorderColor = Color.Black; series.EmptyPointStyle.MarkerColor = Color.LightGray; series["EmptyPointValue"] = ….; DataManipulator.InsertEmptyPoints方法

37. 互動式圖表 如何設定資料點工具提示文字 // 取得圖表中名稱為 Default 的數列。 Seriesseries = Chart1.Series["Default"]; // 設定數列的工具提示文字 series.ToolTip = "X 值 = #VALX{d}Y值 = #VALY{C}半徑 = #VALY2{P}"; 如何設定圖例項目的工具提示文字 series.LegendToolTip = "#PERCENT";

38. 互動式圖表

39. 互動式圖表 如何製作扇形區被按下時的移出效果 先決定哪一個圖表項目要觸發扇形區移出作業： series.PostBackValue = "#INDEX"; series.LegendPostBackValue = "#INDEX"; PostBackValue與 LegendPostBackValue決定了能夠在 Click事件處理常式中處理的回傳值。 於 Chart 控制項的 Click 事件處理常式中將資料點的擴充屬性 Exploded 設定成 True。

40. 互動式圖表 protected void Chart1_Click(object sender, ImageMapEventArgse) { intpointIndex = int.Parse(e.PostBackValue); Series series = Chart1.Series["My series"]; if (pointIndex >= 0 && pointIndex < series.Points.Count) { series.Points[pointIndex].CustomProperties += "Exploded=true"; } } 取得指派給已按一下 HotSpot物件的 PostBackValue屬性

41. 互動式圖表 哪些圖表項目擁有 PostBackValue 屬性

42. 互動式圖表 整合 AJAX ScriptManager + UpdatePanel 控制項 // 轉換按一下的座標。 getCoordinates是一個 JavaScript 函式。 this.Chart1.Attributes["onclick"] = ClientScript.GetPostBackEventReference(this.Chart1, "@").Replace( "'@'", "'chart:'+_getCoord(event)"); // 設定成相對位置以便取得正確的座標。 this.Chart1.Style[HtmlTextWriterStyle.Position] = "relative"; this.ClientScript.RegisterClientScriptBlock( typeof(Chart), "Chart", @"function _getCoord(event){if(typeof(event.x)=='undefined'){ return event.layerX+','+event.layerY;}return event.x+','+event.y;}", true); 結合 Timer 控制項製作即時更新圖表

43. 互動式圖表 使用 MapAreaAttributes與LegendMapAreaAttributes來設定影像地圖的用戶端屬性。 結合 JavaScript。 foreach (Series series in Chart1.Series) { for (intpointIndex = 0; pointIndex < series.Points.Count; pointIndex++) { string toolTip = "“; toolTip = "<imgsrc=RegionChart.aspx?companyname=" + series.Points[pointIndex].AxisLabel + " />"; series.Points[pointIndex].MapAreaAttributes = "onmouseover=amp;quot;DisplayTooltip('" + toolTip + "');amp;quot; onmouseout=amp;quot;DisplayTooltip('');amp;quot;"; series.Points[pointIndex].Url = "DetailedRegionChart.aspx?companyname=" + series.Points[pointIndex].AxisLabel; } }

44. 參考資料 Silverlight 2.0 精華技術手冊/使用 VC# Silverlight 2.0 精華技術手冊/使用 VB ASP.NET 3.5 圖表與實務模組大全 – 近期出版 Silverlight ToolKit 與資料存取技術手冊 – 近期出版