slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
主題: 各種酷炫圖表繪製技術 S ilverlight Toolkit 與 MS Chart 控制項大探索 PowerPoint Presentation
Download Presentation
主題: 各種酷炫圖表繪製技術 S ilverlight Toolkit 與 MS Chart 控制項大探索

Loading in 2 Seconds...

play fullscreen
1 / 44

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


  • 190 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '主題: 各種酷炫圖表繪製技術 S ilverlight Toolkit 與 MS Chart 控制項大探索' - hyunki-noh


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

主題:各種酷炫圖表繪製技術

Silverlight Toolkit 與 MS Chart 控制項大探索

主講人:章立民

slide2
主講人 章立民簡介
  • 章立民研究室技術總監。
  • 17 年資歷的微軟資深講師與顧問(Since 1992),6 度獲選微軟最有價值專家。
  • 18 年資訊圖書撰寫經歷。
  • 經濟部資訊專業人員鑑定計畫命(審)題委員。
  • 電腦技能基金會資料庫應用類命題委員。
  • 職訓局 Visual Basic 能力本位教材編撰委員。
  • 工研院製造資訊部顧問、捷和建設資訊部顧問、資誠會計師事務所資訊系統服務部顧問、磐天科技總經理……等等
ms chart
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
Silverlight Toolkit 圖表控制項
  • 直條圖(Column Chart)
  • 橫條圖(Bar Chart)
  • 折線圖(Line Chart)
  • 圓形圖(Pie Chart)
  • 散佈圖(Scatter Chart)
  • 泡泡圖(Bubble Chart)
silverlight toolkit1
SilverlightToolkit 圖表控制項使用步驟
  • 下載 Silverlight Toolkit (http://silverlight.codeplex.com/)
  • 加入對下列組件的參考:Microsoft.Windows.Controls.dllMicrosoft.Windows.Controls.DataVisualization.dll
  • 建置專案。
  • 將 Chart 控制項托放至 XAML 介面上。
  • 依序設定數列與其資料來源。
slide7
建立一個圖表

<!-- 圖表開始 -->

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

<!-- 圖表結束 -->

資料點

slide8
數列的型別(類別) 決定圖表的類型
  • BarSeries
  • BubbleSeries
  • ColumnSeries
  • LineSeries
  • PieSeries
  • ScatterSeries

繼承自DataPointSeries

類別

slide9
使用多個數列

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

slide10
動態設定數列的資料來源

<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 介面者

slide11
動態設定數列的資料來源

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);

});

}

}

}

slide12
如何判斷哪一個資料點被選取
  • 數列:
    • SelectionEnabled="True"
    • 撰寫 SelectionChanged 事件處理常式:
  • 資料點是一個物件(控制項)。
  • 將被選取的資料點轉換成來源物件型別。
  • 向下鑽研圖表
slide13
如何讓圖表反應來源變更
  • 物件的類別必須實作 INotifyPropertyChanged介面
  • 內含物件的集合必須實作INotifyCollectionChanged 介面
    • ObservableCollection 集合
slide14
如何讓圖表反應來源變更

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));

}

}

}

slide15
自訂圖表的外觀樣式
  • 展示與實作
  • Chart
    • ChartAreaStyle
    • LegendStyle
    • PlotAreaStyle
    • TitleStyle
    • 可以直接於圖表的範本中設定,或是個別設定。
  • 如何設定圖例項目的外觀樣式
    • DataPointSeries.LegendItemStyle
  • 如何設計資料點的樣式與範本  Blend 2
slide16
自訂圖表的外觀樣式
  • 座標軸的格式:
    • IndependentCategoryAxis
      • CategoryAxis
    • DependentRangeAxis
      • HybridAxis
      • CategoryAxis
      • RangeAxis
      • NumericAxis
      • LinearAxis
chart stylepalette
善用 Chart.StylePalette
  • Chart.StylePalette
  • 代表 Style 物件的集合。
  • 依序且循環套用於不同數列的所有資料點 —或—單一數列中的各個資料點
  • 當圖表建立一個 DataPoint 執行個體的時候,就會從 StylePalette 中取得下一個樣式。
chart stylepalette1
善用 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 stylepalette2
善用 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 stylepalette3
善用 Chart.StylePalette
  • TargetType=“Control” 表示每一個 Style 物件都可以套用至不同類型的資料點。
  • TargetType 的對象也可以是:
    • BarDataPoint
    • BubbleDataPoint
    • ColumnDataPoint
    • LineDataPoint
    • PieDataPoint
    • ScatterDataPoint
  • 資料點的工具提示文字格式:DependentValueStringFormat 屬性
  • 數列的圖表外觀
  • 宣告或程式控制方式
  • 可以內含於圖表的範本中。
asp net chart
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
asp net chart3
ASP.NET Chart 控制項
  • 展示與實作

Demo_PracticeChart001.aspx

Demo_PracticeChart002.aspx

slide26
動態繫結圖表
  • 實作 IEnumerable 介面者可作為圖表的資料來源。
  • Chart.DataSource 屬性
  • Chart.DataSourceID 屬性
  • Chart.DataBindTable 方法
  • Chart.DataBindCrossTable 方法
  • DataPointCollection.DataBindY 方法
  • DataPointCollection.DataBindXY 方法
  • DataPointCollection.DataBind方法
  • DataPointCollection.AddXY 方法
slide27
動態繫結圖表
  • DataPointCollection.AddXY 方法
    • 讓資料表當中的每一列成為一個數列,而每一列的欄位值則成為資料點的 Y 值
slide28
如何匯出圖表數列資料
  • 將所有或指定的數列資料匯出至一個 DataSet物件以茲再利用:
    • 資料繫結。
    • 儲存至檔案或資料流。
    • 轉換成不同的格式,例如:XML。
    • 編輯。
  • Chart.DataManipulator.ExportSeriesValues
slide29
分割、合併與複製數列
  • 分割數列係指從單一來源數列複製多個 Y 值到多個目標數列。
  • 合併則表示從多個來源數列中將值複製到單一目標數列中,換句話說,合併是分割的反向操作。
  • 複製則代表其他所有的複製操作。

// 分割數列資料

Chart1.DataManipulator.CopySeriesValues(

"BubbleSeries:Y1,BubbleSeries:Y2",

"ColumnSeries:Y1,LineSeries:Y1");

slide30
分組數列
  • 分組會將一個數列中一系列的資料點替換成一個分組點。每一個分組點的 X 與 Y 值係使用指定的公式與原始點的值所計算出來的。當資料非常大量而導致很難在單一圖表中繪製的時候,分組就顯得特別有用。
  • 分組的方法
    • Chart.DataManipulator.GroupByAxisLabel
    • Chart.DataManipulator.Group
slide31
排序數列
  • 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");

slide32
搜尋資料點
  • DataPointCollection.FindMaxByValue
  • DataPointCollection.FindMinByValue
  • DataPointCollection.FindAllByValue
  • 可以針對所傳回的 DataPoint 物件做進一步的處理,例如:變更顏色以便清楚標示。
slide33
篩選資料點
  • 您可以去篩選數列中的資料點,當進行篩選操作時,數列的資料點會被移除或標示成空的。
  • 篩選資料點的方式:
    • 使用日期/時間範圍。
    • 將最大或最小以外所有的資料點移除。
    • 使用一個常數值來比對所有的資料點。
    • 使用自訂的篩選條件。
slide34
篩選資料點
  • Chart.DataManipulator.Filter
    • 可以使用自訂的篩選器 – 實作 IDataPointFilter 介面。
  • Chart.DataManipulator.FilterTopN
    • 篩選出名列前茅或墊底者。

Chart1.DataManipulator.FilterTopN(

int.Parse(PointNumberList.SelectedItem.Value),

"Sales",

"TopSales",

"Y",

true);

slide35
空資料點的處理方式
  • 空資料點指的就是資料點的 Y 值遺漏或是被標記成空的。由於空資料點仍然擁有 X 值,因此仍然會顯示於圖表中。
slide36
空資料點的處理方式
  • 使用 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方法
slide37
互動式圖表
  • 如何設定資料點工具提示文字

// 取得圖表中名稱為 Default 的數列。

Seriesseries = Chart1.Series["Default"];

// 設定數列的工具提示文字

series.ToolTip = "X 值 \t= #VALX{d}\nY值 \t= #VALY{C}\n半徑 \t= #VALY2{P}";

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

series.LegendToolTip = "#PERCENT";

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

先決定哪一個圖表項目要觸發扇形區移出作業:

series.PostBackValue = "#INDEX";

series.LegendPostBackValue = "#INDEX";

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

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

slide40
互動式圖表

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屬性

slide41
互動式圖表
  • 哪些圖表項目擁有 PostBackValue 屬性
slide42
互動式圖表
  • 整合 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 控制項製作即時更新圖表
slide43
互動式圖表
  • 使用 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;

}

}

slide44

參考資料

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