各種酷炫圖表繪製技術 Silverlight Toolkit 與 MS Chart 控制項大探索

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

主講人：章立民

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

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 應用程式。

Silverlight Toolkit 圖表控制項

直條圖 (Column Chart)橫條圖 (Bar Chart)折線圖 (Line Chart)圓形圖 (Pie Chart)散佈圖 (Scatter Chart)泡泡圖 (Bubble Chart)

圖表的結構

Silverlight Toolkit 圖表控制項使用步驟1. 下載 Silverlight Toolkit

(http://silverlight.codeplex.com/)2. 加入對下列組件的參考：

Microsoft.Windows.Controls.dllMicrosoft.Windows.Controls.DataVisualization.dll

3. 建置專案。4. 將 Chart 控制項托放至 XAML 介面上。5. 依序設定數列與其資料來源。

建立一個圖表 <!-- 圖表開始 --><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><!-- 圖表結束 -->

資料點

數列的型別 ( 類別 ) 決定圖表的類型

BarSeries BubbleSeries ColumnSeries LineSeries PieSeries ScatterSeries

繼承自DataPointSeries類別

使用多個數列<charting:Chart x:Name="Chart1"> <charting:Chart.Series> <charting:ColumnSeries Title=" 成交量 " IndependentValueBinding="{Binding Path=Year}" DependentValueBinding="{Binding

Path=Amount}“ AnimationSequence="FirstToLast" />

<charting:LineSeries Title=" 價格 "

IndependentValueBinding="{Binding Path=Year}" DependentValueBinding="{Binding Path=Price}“

AnimationSequence="FirstToLast" /> </charting:Chart.Series></charting:Chart>

動態設定數列的資料來源<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 介面者

動態設定數列的資料來源 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); }); } }}

如何判斷哪一個資料點被選取數列：

SelectionEnabled="True"撰寫 SelectionChanged 事件處理常式：

資料點是一個物件 ( 控制項 ) 。將被選取的資料點轉換成來源物件型別。向下鑽研圖表

如何讓圖表反應來源變更

物件的類別必須實作 INotifyPropertyChanged 介面

內含物件的集合必須實作INotifyCollectionChanged 介面

ObservableCollection 集合

如何讓圖表反應來源變更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)); } }}

自訂圖表的外觀樣式展示與實作Chart

ChartAreaStyleLegendStyle PlotAreaStyleTitleStyle可以直接於圖表的範本中設定，或是個別設定。

如何設定圖例項目的外觀樣式DataPointSeries.LegendItemStyle

如何設計資料點的樣式與範本 Blend 2

自訂圖表的外觀樣式座標軸的格式：

IndependentCategoryAxisCategoryAxis

DependentRangeAxisHybridAxisCategoryAxisRangeAxisNumericAxisLinearAxis

善用 Chart.StylePaletteChart.StylePalette代表 Style 物件的集合。依序且循環套用於不同數列的所有資料點

—或—

單一數列中的各個資料點 當圖表建立一個 DataPoint 執行個體的時候，就會從 StylePalette 中取得下一個樣式。

善用 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>

範例展示

善用 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>

善用 Chart.StylePaletteTargetType =“Control” 表示每一個 Style 物件都可以套用至不同類型的資料點。TargetType 的對象也可以是：

BarDataPointBubbleDataPointColumnDataPointLineDataPointPieDataPointScatterDataPoint

資料點的工具提示文字格式：DependentValueStringFormat 屬性數列的圖表外觀宣告或程式控制方式可以內含於圖表的範本中。

ASP.NET Chart 控制項

Microsoft Chart Controls for Microsoft .NET Framework 3.5Microsoft Chart Controls for Microsoft .NET Framework 3.5 語言套件Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008Microsoft Chart Controls for .NET Framework Documentation Samples Environment for Microsoft Chart Controls

請下載

ASP.NET Chart 控制項的特性完整的 VS 2088 設計階段支援 二進位與 XML 序列化

設計階段與執行階段資料繫結 空資料點處理

35 種圖表，大部分都支援 3D 形式。

支援日期、時間、貨幣…等型別

圖表區的數目沒有任何限制 提供 50 種以上的財務與統計公式

數列的數目沒有任何限制 即時的圖表處理功能

資料點的數目沒有任何限制 圖表繪製前與繪製後的事件功能

完整的外觀自訂支援 支援 AJAX 互動式功能

支援資料的複製、合併、分割、排序、搜尋與篩選

狀態管理

支援資料匯出 二進位資料流

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

ASP.NET Chart 控制項

展示與實作Demo_PracticeChart001.aspxDemo_PracticeChart002.aspx

ASP.NET Chart 控制項類別架構

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

動態繫結圖表DataPointCollection.AddXY 方法

讓資料表當中的每一列成為一個數列，而每一列的欄位值則成為資料點的 Y 值

如何匯出圖表數列資料將所有或指定的數列資料匯出至一個 DataSet 物件以茲再利用：

資料繫結。儲存至檔案或資料流。轉換成不同的格式，例如： XML 。編輯。

Chart.DataManipulator.ExportSeriesValues

分割、合併與複製數列分割數列係指從單一來源數列複製多個 Y 值到多個目標數列。合併則表示從多個來源數列中將值複製到單一目標數列中，換句話說，合併是分割的反向操作。複製則代表其他所有的複製操作。

// 分割數列資料 Chart1.DataManipulator.CopySeriesValues( "BubbleSeries:Y1,BubbleSeries:Y2", "ColumnSeries:Y1,LineSeries:Y1");

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

Chart.DataManipulator.GroupByAxisLabelChart.DataManipulator.Group

排序數列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");

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

篩選資料點

您可以去篩選數列中的資料點，當進行篩選操作時，數列的資料點會被移除或標示成空的。篩選資料點的方式：

使用日期 / 時間範圍。 將最大或最小以外所有的資料點移除。使用一個常數值來比對所有的資料點。使用自訂的篩選條件。

篩選資料點Chart.DataManipulator.Filter

可以使用自訂的篩選器 – 實作 IDataPointFilter 介面。

Chart.DataManipulator.FilterTopN篩選出名列前茅或墊底者。

Chart1.DataManipulator.FilterTopN( int.Parse(PointNumberList.SelectedItem.Value), "Sales", "TopSales", "Y", true);

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

X Y

Monday 978

Tuesday 345

Wednesday

Thursday 567

Friday 778

Saturday 46

Sunday 78

空資料點的處理方式使用 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 方法

互動式圖表

// 取得圖表中名稱為 Default 的數列。Series series = Chart1.Series["Default"];

// 設定數列的工具提示文字series.ToolTip = "X 值 \t= #VALX{d}\nY 值 \t= #VALY{C}\n半徑 \t= #VALY2{P}";

series.LegendToolTip = "#PERCENT";

如何設定資料點工具提示文字

如何設定圖例項目的工具提示文字

互動式圖表關鍵字 被替換成

#VALX 資料點的 X 值。#VAL, #VALY, #VALY2, #VALY3…

資料點的 Y 值。

#SER 數列名稱。#LABEL 資料點標籤。#INDEX 資料點順序編號。#PERCENT 資料點 Y 值的百分比。#TOTAL 數列中所有 Y 值的加總。#LEGENDTEXT 圖例文字。

互動式圖表如何製作扇形區被按下時的移出效果

1. 先決定哪一個圖表項目要觸發扇形區移出作業：series.PostBackValue = "#INDEX";series.LegendPostBackValue = "#INDEX";

2. 於 Chart 控制項的 Click 事件處理常式中將資料點的擴充屬性 Exploded 設定成 True 。

PostBackValue 與 LegendPostBackValue 決定了能夠在 Click 事件處理常式中處理的回傳值。

互動式圖表 protected void Chart1_Click(object sender, ImageMapEventArgs e) { int pointIndex = 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 屬性

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

Title.PostBackValue LegendCell.PostBackValue

Axis.PostBackValue LegendCellColumn.PostBackValue

CustomLabel.PostBackValue

LegendItem.PostBackValue

DataPointCustomProperties.PostBackValue

Annotation.PostBackValue

IChartMapArea.PostBackValue

StripLine.PostBackValue

MapArea.PostBackValue

互動式圖表整合 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 控制項製作即時更新圖表

互動式圖表使用 MapAreaAttributes 與LegendMapAreaAttributes 來設定影像地圖的用戶端屬性。結合 JavaScript 。

foreach (Series series in Chart1.Series) { for (int pointIndex = 0; pointIndex < series.Points.Count; pointIndex++) { string toolTip = "“; toolTip = "<img src=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; } }

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