在Windows Phone 7上使用Silverlight Toolkit Chart
「你們開發的程式是否有辦法支援在手機上直接看圖表，讓我可以快速掌握我業務或整體的進度？」。
這句話不知道大家是否跟我一樣熟悉呢！隨著iPhone、Android平台的熱絡，SAP、Saleforce、CRM軟體等，
它們也已經陸陸續續發佈到AppStore或Google Market上支援企業用戶的使用。
那Windows Phone 7？「當然可以」。其實透過一些Silverlight開發的網頁程式裡，不管是投資股票、遊戲
、報表分析、戰情室等個案，其實要在WP7上做圖表不是不可能的。因此，可以參考下列的文件：
<Phone-y charts [Silverlight/WPF Data Visualization Development Release 4 and Windows Phone 7 Charting sample!] >。
隨著釋放出Silverlight 4 Toolkit新的版本後，Data Visualization也支援Windows Phone 7了，由於WP7主要建立於
Silverlight 3之上，所以Silveright 4 Toolkit也為此做了一些調整來支援WP7上的應用。上述文件裡，有提供一個簡
單的範例說明，透過Silverlight 4 Toolkit可實作出Chart的功能。但對我學習者而言呢，還是讓我們按步就班吧。
*首先要先了解幾個實作Chart在WP7專案裡必要的元件
﹥System.Windows.Controls：
定義所有控件基本元素的命名空間，在Silverlight也提供了：<Silverlight 提供可執行許多功能的子控制項>。
Silverlight Toolkit裡面蠻多的元件也會使用到該dll檔所提供的底層元件，因此，在使用下方提到的DataVisualizatoin時，
別忘了把該dll檔加進來。
﹥System.Windows.Controls.DataVisualization.Toolkit：
可參考<各種酷炫圖表繪製技術 Silverlight Toolkit 與 MS Chart 控制項大探索 - 章立民研究室>詳細的說明。
該命名空間定義了數個Chart控制項，以下將透過列表的方法說明提供那些類別的Chart：
| 類型 |
| 直條圖(Column Chart) |
| 橫條圖(Bar Chart) |
| 折線圖(Line Chart) |
| 圖形圖(Pie Chart) |
| 散佈圖(Scatter Chart) |
| 泡泡圖(Bubble Chart) |
[注意]
根據<Windows Phone 7 + Silverlight Toolkit Data Visualization>裡提到的一段話：
「Do not use the version of that assembly found in the Silverlight 4 Toolkit April 2010 release.
David Anson's version has a bug fix in it which is critical to using the charts on the phone.」
因此，在加入Systemm.WindowsControls.DataVisualation.Toolkit.dll檔時，記得使用上述範例的dll檔。
那就來個最簡單的Chart Control範例吧：
(一) 靜態產生Chart Control：
(1) 建新一個新的WP7專案，把Microsoft.Windows.Controls.dll與System.Windows.Controls.DataVisualization.Toolkit加入參考；
(2) 將使用到的DLL檔，加入到XAML檔案中；
1: //設定xaml中使用Tag相對應的DLL檔
2: xmlns:chartToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;
3: assembly=System.Windows.Controls.DataVisualization.Toolkit"
4:
5: //設定該專案中製作於提供xaml可用的類別
6: xmlns:local="clr-namespace:myChartControlsSample"
(3) 加入指定Chart Control(以Pie Chart為例)，把下列程式碼撰寫於於XAML中；
1: //PeiData為自訂的類別，原因是PieSeries需要設定的二個屬性：IndependentValueBinding與DependentValueBinding
2:
3: <chartToolkit:Chart Title="網站瀏量來源比例" LegendTitle="Country" IsTabStop="False">
4: <chartToolkit:Chart.Series>
5: <chartToolkit:PieSeries IndependentValueBinding="{Binding First}" DependentValueBinding="{Binding Second}">
6: <chartToolkit:PieSeries.ItemsSource>
7: <local:ObjectCollection>
8: <local:PeiData First="TW" Second="0.5"></local:PeiData>
9: <local:PeiData First="CN" Second="0.2"></local:PeiData>
10: <local:PeiData First="US" Second="0.15"></local:PeiData>
11: <local:PeiData First="JP" Second="0.15"></local:PeiData>
12: </local:ObjectCollection>
13: </chartToolkit:PieSeries.ItemsSource>
14: </chartToolkit:PieSeries>
15: </chartToolkit:Chart.Series>
16: <chartToolkit:Chart.Axes>
17: <chartToolkit:CategoryAxis Orientation="Y" Title="瀏覽率" ShowGridLines="True" FontSize="22"></chartToolkit:CategoryAxis>
18: <chartToolkit:CategoryAxis Orientation="X" Title="國家簡稱" ShowGridLines="True" FontSize="22"></chartToolkit:CategoryAxis>
19: </chartToolkit:Chart.Axes>
20: </chartToolkit:Chart>
特別注意以下二個屬性，它們主要用於設定Series在使用資料時，所指定的數據來源。
‧IndenpendentValueBinding：用於設定數據集合裡做為獨立識別的依據。
‧DependentValueBinding ：用於設定數據集合裡做為對應數值的資料。
(4) 結果
(二) 動態配合程式產生Chart Control所需要的Data Source：
(1) 在xaml中加上一個Chart控件
1: <chartToolkit:Chart x:Name="ChartControl1" Title="貨品消售量比例" LegendTitle="類型" IsTabStop="False">
2: </chartToolkit:Chart>
(2) 透過下列程式段，加入Chart使用的Series
1: string[] gGoodsList = new string[] {"水餃","陽春麵","肉粽","蛋花湯","乾麵" };
2:
3: private void Init()
4: {
5: List<PeiData> tDataList = new List<PeiData>();
6: for (int i = 1; i < 5; i++)
7: {
8: PeiData tData = new PeiData();
9: tData.First = gGoodsList[i - 1];
10: tData.Second = i * 0.5;
11: tDataList.Add(tData);
12: }
13: //建立Series類別，準備放入相對應的ItemSource、擷取的值與顯示欄位
14: PieSeries tPeiSeries = new PieSeries();
15: tPeiSeries.ItemsSource = tDataList;
16: tPeiSeries.IndependentValueBinding = new System.Windows.Data.Binding("First");
17: tPeiSeries.DependentValueBinding = new System.Windows.Data.Binding("Second");
18: tPeiSeries.AnimationSequence = AnimationSequence.LastToFirst;
19:
20: //設定Axis來對Chart內容增加標籤說明
21: CategoryAxis tCategory = new CategoryAxis();
22: tCategory.Orientation = AxisOrientation.X;
23: tCategory.Title = "物量類型";
24: tCategory.ShowGridLines = true;
25:
26: CategoryAxis tValue = new CategoryAxis();
27: tValue.Orientation = AxisOrientation.Y;
28: tValue.Title = "銷售比例";
29: tValue.ShowGridLines = true;
30:
31: ChartControl1.Axes.Add(tCategory);
32: ChartControl1.Axes.Add(tValue);
33:
34: ChartControl1.Series.Add(tPeiSeries);
35: }
(3) 結果
===
以上是分享實作Chart在自己常見的案例上，其實該篇的說明沒有完全說明所有的控件的使用，主要是因為
二個DLL檔都是在實作Silverlight針對Chart上必定會使用的。因此，相關於這二個dll的使用，可以另外參考
別的說明。
老實說這篇不太仔細說明相關的原理，只是分享一下Chart如何在WP7上的實作，主要是因為我發現Chart的應用，
不只有上述說明的內容而已，因為它還可以另外設定它的Resource、Style與相關的特殊應用。因此，順帶一提，
如果閱讀上述提及的參考文件上有遇到一些問題，個人覺得有幾個關鍵的技術需要去了解：
(1) Silverlight針對Stype、Theme與Resource提供自訂的設計
(2) Silverlight針對Data處理的概念
這二點是個人在閱讀過程中，因為沒有熟悉Silverlight一些基本觀念，造成在閱讀上的困境。分享給大家。
References：
‧Phone-y charts [Silverlight/WPF Data Visualization Development Release 4 and Windows Phone 7 Charting sample!] (必讀)
‧Windows Phone 7 RTM charting using the Silverlight Control Toolkit (必讀)
‧Archive for the 'Windows Phone' category - Jeff Wilcox (相關WP7 Control應用，必讀)
‧Silverlight Toolkit - Data Visualization
‧Windows Phone 7 + Silverlight Toolkit Data Visualization (清楚的實作範例)
‧Chart Controls for WPF ship in the Toolkit
‧Drawing charts in the Windows Phone 7 using Silverlight's graphical API
‧各種酷炫圖表繪製技術 Silverlight Toolkit 與 MS Chart 控制項大探索 - 章立民研究室
‧Silverlight Toolkit Samples (豐富的範例)
‧使用Silverlight Toolkit绘制图表(上)--柱状图 & 使用Silverlight Toolkit绘制图表(下)--饼图,折线图,散点图 (中文範例說明)
‧Microsoft Public License (Ms-PL)
[WPF]
‧Windows Presentation Foundation - SlideShare
[Forums]
‧WP7 chart control - Silverlight for Windows Phone forums (重要)
‧Chart Control for Phone - Windows Phone Forums
[第三方工具]
‧Setting up WP7 Project Environment &Windows Phone 7 Chart & Your First Windows Phone Chart
silverlightchart
以前没有接触过，因项目需要，这里给今日学习过程给简单的记录一下：
Chart在任何一个与统计有关的项目中都是必不可少的。Silverlight自带了Chart控件，也有不少第三方支持的控件，之前Visifire还不收费的，但现在已经收费了，于是就将就用自带的控件吧。
1：拖拽控件
先拖拽一个Chart控件，在前台命名为x:Name="MyChartOfColumnSeries"。它可以承载各种不同的绘图方式（Column Series,Line Series,Pie Series...）
2:数据源
public class ChartData
{
public string xProperty { get; set;}
public int yNumber { get; set; }
}
List<ChartData> myListOfChartData = new List<ChartData>();
myListOfChartData.Add(new ChartData{xProperty="1",yNumber=1});
myListOfChartData.Add(new ChartData { xProperty = "2", yNumber= 2 });
myListOfChartData.Add(new ChartData { xProperty = "3", yNumber= 3 });
myListOfChartData.Add(new ChartData { xProperty = "4", yNumber= 9 });
myListOfChartData.Add(new ChartData { xProperty = "5", yNumber= 13 });myListOfChartData.Add...
3:为Series绑定数据,这里通过后台代码绑定数据源，以及设定X,Y轴数据（IndependentValueBinding和DependentValueBinding分别指定X轴和Y轴绑定的数据对象。）并把Series和Chart联系起来
ColumnSeriescolumnSeries = new ColumnSeries();//实例化一个Series:
//注意ColumnSeries所在命名空间
//为：using System.Windows.Controls.DataVisualization.Charting;
columnSeries.ItemsSource = myListOfChartData; //设置数据源
columnSeries.DependentValueBinding = newBinding("yNumber"); //后台进行数据绑定
columnSeries.IndependentValueBinding = new Binding("xProperty");
columnSeries.Title = "TitleTest";
MyChartOfColumnSeries.Series.Add(columnSeries);//为Chart绑定“显示类型”
MyChartOfColumnSeries.Title = "";
分类: Siliverlight