主題： 各種酷炫圖表繪製技術 S ilverlight Toolkit 與 MS Chart 控制項大探索

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 值 \t= #VALX{d}\nY值 \t= #VALY{C}\n半徑 \t= #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=\"DisplayTooltip('" + toolTip + "');\" onmouseout=\"DisplayTooltip('');\""; 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 與資料存取技術手冊 – 近期出版