當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用Silverlight Toolkit绘制图表(上)--柱状图

發布時間：2025/3/19 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了使用Silverlight Toolkit绘制图表(上)--柱状图小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? ?Silverlight Toolkit提供了繪制柱狀圖(Column,Bar)，餅圖(Pie)，折線圖(Line), 散點圖(Scatter)等控件。我們可以很方便的將已有的數據源綁定到相應圖形控件上，設置好相應的X,Y軸顯示樣式和數據字段之后就大功告成了，同時其還支持圖形的定時加載刷新，圖形的動態加載動畫效果。今天就先以柱狀圖為例，簡要的總結一下如何使用該控件來顯示我們的數據。 ???? 首先，我們需要創建一個Silverlight項目，命名：DataVisualization。
????
???? 然后我們使用WCF方式發布數據源信息，這里我們創建一個"Silverlight功能的WCF"，并將其命名為：????? DataService.svc ??? 接著將下面的代碼拷貝到該類文件中：?
public?class?EmployeeInfo
{
????public?int?EmployeeID?{?set;?get;?}
????public?string?EmployeeName?{?set;?get;?}
????public?int?Salary?{?set;?get;?}
????public?int[]?Cost?{?get;?set;?}
????public?string?City?{?set;?get;?}
}???
???
[ServiceContract(Namespace?=?"")]
[AspNetCompatibilityRequirements(RequirementsMode?=?AspNetCompatibilityRequirementsMode.Allowed)]
public?class?DataService
{
????[OperationContract]
????public?List<EmployeeInfo>?GetEmployeeList()
????{
????????List<EmployeeInfo>?employeeList?=?new?List<EmployeeInfo>();
????????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?1,?EmployeeName?=?"張三",?Salary?=?1000,?City?=?"合肥"?});
????????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?2,?EmployeeName?=?"李四",?Salary?=?1500,?City?=?"天津"?});
????????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?3,?EmployeeName?=?"王五",?Salary?=?2000,?City?=?"上海"?});
????????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?4,?EmployeeName?=?"趙六",?Salary?=?-800,?City?=?"北京"?});
????????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?5,?EmployeeName?=?"尤七",?Salary?=?2100,?City?=?"武漢"?});
????????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?6,?EmployeeName?=?"馬八",?Salary?=?2300,?City?=?"?？?/span>"?});
????????return?employeeList;
????}
} ????
??? 這里數據源我們就創建完成了，它將會返回6個雇員信息。
???
??? 下面我們往該Silverlight應用的Xaml文件上拖（或手工聲明）一個Chart控件，如下：??
????
<charting:Chart?Title="員工薪水"?x:Name="EmployeeChart"></charting:Chart> ????
??? 我們看到在該控件上我們指定了Title信息，該信息會顯示在圖表的最上方。
???
???
??? 下面開始編寫CS代碼。
???
??? 1.首先我們向該Silverlight應用中添加對剛才聲明的WCF的引用。
???
??? 2.使用WCF生成的客戶端類來獲取相應的數據源，代碼如下：
???
void?LoadWcfData()
{
????dataServiceClient.GetEmployeeListCompleted?+=?new?EventHandler<GetEmployeeListCompletedEventArgs>(dataServiceClient_GetEmployeeListCompleted);
????dataServiceClient.GetEmployeeListAsync();
}
?? 3.將WCF返回的數據源信息綁定到相應的圖形控件上，并初始化該控件的相應信息，如下：
???
void?dataServiceClient_GetEmployeeListCompleted(object?sender,?GetEmployeeListCompletedEventArgs?e)
{
????ObservableCollection<EmployeeInfo>?employeeList?=?e.Result;

????Action<Chart>?chartModifier?=?(chart)?=>
????{
????????Axis?dateAxis?=?new?Axis?{?Orientation?=?AxisOrientation.Horizontal,?Title?=?"雇員名稱",?FontStyle?=?FontStyles.Normal,?FontSize?=?12f,?ShowGridLines?=?true};
????????EmployeeChart.Axes.Add(dateAxis);
????????Axis?valueAxis?=?new?Axis?{?Orientation?=?AxisOrientation.Vertical,?Title?=?"薪水",?Minimum?=?-1000,?Maximum?=?3000,?ShowGridLines?=?true};
????????EmployeeChart.Axes.Add(valueAxis);
????};
????chartModifier(EmployeeChart);

????ColumnSeries?series?=?new?ColumnSeries();
????series.ItemsSource?=?employeeList;
????series.IndependentValueBinding?=?new?System.Windows.Data.Binding("EmployeeName");
????series.DependentValueBinding?=?new?System.Windows.Data.Binding("Salary");
????series.Title?=?"薪水";
????EmployeeChart.Series.Add(series);
}

??? 在上面的代碼中我們創建了Axis對象用以將X,Y軸的描述信息綁定到指定的圖形控件上，然后將我們的指定數據源綁定到該圖形控件的ItemsSource屬性上，最后再綁定兩個座標軸要顯示的相應數據： ????X軸:? series.IndependentValueBinding = new System.Windows.Data.Binding("EmployeeName");
????
????Y軸:? series.DependentValueBinding = new System.Windows.Data.Binding("Salary");
????
????
??? 下面我們來看一下最終的顯示效果，如下圖所示：
????
????
????
???? 大家看到，在Y軸上我們既顯示了正軸也顯示了負軸，這就是通過Minimum = -1000, Maximum = 3000這一行設置實現的。???
????
???? 還不錯了，到這里我們只是簡要的領略了一個圖形控件的基本功能。接著我們再了解一下它還有那些更高級的使用技巧。 ???? 首先是圖形的定時加載刷新，要實現這個演示，我們需要一個實時變化的數據源，以便當我們定時刷新控件時能顯示不同的數據信息。所以我們要在WCF中創建一個這樣的數據源： [OperationContract]
public?List<EmployeeInfo>?GetEmployeeDynamicList()
{
????Random?random?=?new?Random();
????List<EmployeeInfo>?employeeList?=?new?List<EmployeeInfo>();
????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?1,?EmployeeName?=?"張三",?Salary?=?random.Next(500,?3000),?City?=?"合肥"?});
????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?2,?EmployeeName?=?"李四",?Salary?=?random.Next(500,?3000),?City?=?"天津"?});
????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?3,?EmployeeName?=?"王五",?Salary?=?random.Next(500,?3000),?City?=?"上海"?});
????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?4,?EmployeeName?=?"趙六",?Salary?=?random.Next(500,?3000),?City?=?"北京"?});
????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?5,?EmployeeName?=?"尤七",?Salary?=?random.Next(500,?3000),?City?=?"武漢"?});
????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?6,?EmployeeName?=?"馬八",?Salary?=?random.Next(500,?3000),?City?=?"?？?/span>"?});
????return?employeeList;
}
????
??? 大家看到，這里使用了Random來模擬一個動態數據源信息，其生成的隨機數介于500-3000之間，那么接下來，我們再Silverlight的XAML上創建這樣一個Chart對象，用以顯示該動態數據源信息，如下：????
<charting:Chart?Title="動態員工薪水"?x:Name="DynamicEmployeeChart"?/> ????
??? 接著就是相應的CS代碼了，這里為了方便起見，這里直接使用DispatcherTimer來定時(3秒)獲取相應的數據源信息，如下：
????
void?LoadDynamicData()
{
????System.Windows.Threading.DispatcherTimer?dispatcherTimer?=?new?System.Windows.Threading.DispatcherTimer();
????dispatcherTimer.Interval?=?TimeSpan.FromSeconds(3);
????dispatcherTimer.Tick?+=?delegate
????{???????????????
????????dataServiceClient.GetEmployeeDynamicListCompleted?+=?new?EventHandler<GetEmployeeDynamicListCompletedEventArgs>(dataServiceClient_GetEmployeeDynamicListCompleted);
????????dataServiceClient.GetEmployeeDynamicListAsync();
????};
????dispatcherTimer.Start();
}
?????
??? 接著就是初始化相應的圖形控件并綁定相應的數據源了，代碼與上面的CS代碼相似，如下：
????
void?dataServiceClient_GetEmployeeDynamicListCompleted(object?sender,?GetEmployeeDynamicListCompletedEventArgs?e)
{
????ObservableCollection<EmployeeInfo>?employeeList?=?e.Result;
????DynamicEmployeeChart.Axes.Clear();
????DynamicEmployeeChart.Series.Clear();
????Action<Chart>?chartModifier?=?(chart)?=>
????{
????????Axis?dateAxis?=?new?Axis?{?Orientation?=?AxisOrientation.Horizontal,?Title?=?"雇員名稱",?FontStyle?=?FontStyles.Normal,?FontSize?=?12f,?ShowGridLines?=?true?};
????????DynamicEmployeeChart.Axes.Add(dateAxis);
????????Axis?valueAxis?=?new?Axis?{?Orientation?=?AxisOrientation.Vertical,?Title?=?"薪水",?Minimum?=?0,?Maximum?=?3000,?ShowGridLines?=?true?};
????????DynamicEmployeeChart.Axes.Add(valueAxis);
????};
????chartModifier(DynamicEmployeeChart);

????ColumnSeries?series?=?new?ColumnSeries();
????series.ItemsSource?=?employeeList;
????series.IndependentValueBinding?=?new?System.Windows.Data.Binding("EmployeeName");
????series.DependentValueBinding?=?new?System.Windows.Data.Binding("Salary");
????series.Title?=?"薪水";
????DynamicEmployeeChart.Series.Add(series);
}
??? 好了，這里我們看一下最終的運行效果，首先是剛啟動運行時的截圖：
????
???
????
????
??? 然后是三秒之后的運行截圖：
????
????
?
????
???? 到這里還不算完，因為該控件還支持數據的分組顯示，比如說如果我們的數據中有數組類型的字段信息，該控件是以數組為單位（數組長度就是圖表的列信息）。這個有些難以理解，下面就以一個示例來加以說明。
???? 首先，我們要創建一個具有數組類型字段的數據源，如下： [OperationContract]
public?List<EmployeeInfo>?GetMultiSeriesEmployeeList()
{
????List<EmployeeInfo>?employeeList?=?new?List<EmployeeInfo>();
????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?1,?EmployeeName?=?"張三",?Salary?=?1000,?Cost?=?new?int[]?{?100,?160?}?});
????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?2,?EmployeeName?=?"李四",?Salary?=?1500,?Cost?=?new?int[]?{?260,?200?}?});
????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?3,?EmployeeName?=?"王五",?Salary?=?2000,?Cost?=?new?int[]?{?360,?330?}?});
????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?4,?EmployeeName?=?"趙六",?Salary?=?800,?Cost?=?new?int[]?{?160,?430?}?});
????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?5,?EmployeeName?=?"尤七",?Salary?=?2100,?Cost?=?new?int[]?{?560,?530?}?});
????employeeList.Add(new?EmployeeInfo?{?EmployeeID?=?6,?EmployeeName?=?"馬八",?Salary?=?2300,?Cost?=?new?int[]?{?660,?600?}?});
????return?employeeList;
}
???? 大家看到了，在該數據源中的Cost屬性即是數據類型字段，該字段記錄了雇員的交費信息：第一項為“住房公積金”，第二項為“個人養老金”。?
???? 下面我們就來看一下該如何綁定這類數據源信息。
????
???? 首先在XAML中創建該圖表控件，如下：
????
<charting:Chart?Title="MultiSeries"?x:Name="MultiSeries"?MouseLeftButtonDown="OnMouseLeftButtonDown"/>
??? 大家看到這里我們還綁定了鼠標單擊事件，該事件主要用于稍后演示圖表的動態效果，這里先行略過:)
????
??? 接著就是我們的CS代碼了，首先是獲取數據源：
????
void?LoadMultiSeries()
{
????dataServiceClient.GetMultiSeriesEmployeeListCompleted?+=?new?EventHandler<GetMultiSeriesEmployeeListCompletedEventArgs>(dataServiceClient_GetMultiSeriesEmployeeListCompleted);
????dataServiceClient.GetMultiSeriesEmployeeListAsync();
}
??? 然后是相應的控件初始化和數據綁定代碼：
????
void?dataServiceClient_GetMultiSeriesEmployeeListCompleted(object?sender,?GetMultiSeriesEmployeeListCompletedEventArgs?e)
{
????ObservableCollection<EmployeeInfo>?employeeList?=?e.Result;
???
????Action<Chart>?chartModifier?=?(chart)?=>
????{
????????Axis?dateAxis?=?new?Axis?{?Orientation?=?AxisOrientation.Horizontal,?Title?=?"注?1:住房公積金??2:個人養老金",?FontStyle?=?FontStyles.Normal,?FontSize?=?14f,?ShowGridLines?=?true?};
????????MultiSeries.Axes.Add(dateAxis);
???????
????????Axis?valueAxis?=?new?Axis?{?Orientation?=?AxisOrientation.Vertical,?Title?=?"稅金",?Minimum?=?0,?Maximum?=?800,?ShowGridLines?=?true?};
????????MultiSeries.Axes.Add(valueAxis);
????};
????chartModifier(MultiSeries);

????foreach?(EmployeeInfo?itemsSource?in?employeeList)
????{
????????ColumnSeries?series?=?new?ColumnSeries();
????????series.ItemsSource?=?itemsSource.Cost;
????????series.DependentValueBinding?=?null;
????????series.IndependentValueBinding?=?null;
????????series.Title?=?itemsSource.EmployeeName?+?"?ID:"?+?itemsSource.EmployeeID;
????????series.AnimationSequence?=?AnimationSequence.FirstToLast;
????????MultiSeries.Series.Add(series);
????}?????????
}
?????? 這里我們看到在控件的數據源綁定上與前兩個DEMO存在一定的差異。因為每個雇員的交費字段本身就是一個數組（整形），所以這里將該交費字段直接綁定到了ColumnSeries的ItemsSource屬性上。同時將ColumnSeries 的屬性 DependentValueBinding，IndependentValueBinding分別設置為null。這里給該ColumnSeries的動態顯示效果設置成了AnimationSequence.FirstToLast。下面我們會看到顯示效果，而相應的鼠標單擊事件代碼摘自TOOKIT的代碼示例包，這里就不多加解釋了。下面是相應的顯示效果： ????
????
????
??? 當我們在圖表上單擊鼠標時，顯示效果如下：
??? ?? ????
???? 等圖表全被隱去時，這時我們再單擊鼠標，圖表會依次再顯示出來。
????
????
????
???? 除了數據動態加載，Chart還支持數據的靜態綁定，如下面的XAML代碼即是初始并綁定一個已存在的數據源：
????
<charting:Chart?Title="Xaml綁定"?x:Name="FunctionSeriesSample"?MouseLeftButtonDown="OnMouseLeftButtonDown">
????<charting:Chart.Series>
????????<charting:ColumnSeries
????????????Title="人口"?AnimationSequence="FirstToLast"
????????????ItemsSource="{Binding?PugetSound,?Source={StaticResource?City}}"
????????????IndependentValueBinding="{Binding?Name}"
????????????DependentValueBinding="{Binding?Population}"/>??
????</charting:Chart.Series>
????<charting:Chart.Axes>
????????<charting:Axis?AxisType="Category"?Title="城市"?Orientation="Horizontal"?FontStyle="Italic"/>
????????<charting:Axis?AxisType="Linear"?Title="人口"?Orientation="Vertical"?Minimum="0"?Maximum="600000"?Interval="100000"?ShowGridLines="True"??FontStyle="Italic"/>
????</charting:Chart.Axes>
</charting:Chart>??????

??? 而數據源是在程序中直接寫死的，如下：
????
Code

??? 到這里，有關柱狀圖的主要功能介紹的差不多了，但如果開發過相應圖表功能的朋友會發現，之前的DEMO顯示的都是垂直的柱狀圖，但很多的網站上顯示的都是水平方向的柱狀圖，比如說投票功能等，其實Chart實現這個功能非常簡要，只要在我們原有的CS代碼基礎上做很少的改動即可實現，這里以上面的第一個DEMO為例，看一下如何進行改造： ??? 下面是其dataServiceClient_GetEmployeeListCompleted方法的改造后的代碼： ?
? void?dataServiceClient_GetEmployeeListCompleted(object?sender,?GetEmployeeListCompletedEventArgs?e)
?{
?????ObservableCollection<EmployeeInfo>?employeeList?=?e.Result;

?????Action<Chart>?chartModifier?=?(chart)?=>
?????{
?????????Axis?dateAxis?=?new?Axis?{?Orientation?=?AxisOrientation.Vertical,?Title?=?"雇員名稱",?FontStyle?=?FontStyles.Normal,?FontSize?=?12f,?ShowGridLines?=?true?};
?????????EmployeeChart.Axes.Add(dateAxis);
?????????Axis?valueAxis?=?new?Axis?{?Orientation?=?AxisOrientation.Horizontal,?Title?=?"薪水",?Minimum?=?-1000,?Maximum?=?3000,?ShowGridLines?=?true};
?????????EmployeeChart.Axes.Add(valueAxis);
?????};
?????chartModifier(EmployeeChart);

?????BarSeries?series?=?new?BarSeries();
?????series.ItemsSource?=?employeeList;
?????series.IndependentValueBinding?=?new?System.Windows.Data.Binding("EmployeeName");
?????series.DependentValueBinding?=?new?System.Windows.Data.Binding("Salary");
?????EmployeeChart.Series.Add(series);
?}
????? 在這里，我們看到了之前所設置的X,Y軸在AxisOrientation屬性上被做了交換設置。而接著的ColumnSeries對象也被替換成了BarSeries。這樣我們就完成了相應的改造(更多信息參見DEMO源碼BarSample)。 ????? 其它的DEMO只要參照一下上面所說的替換方式替換一下即可，最終我們看一個顯示效果，如下圖所示：
????

????
????
??? 好了，今天的內容就先到這里了，源碼下載，請點擊這里。

本文轉自 daizhenjun 51CTO博客，原文鏈接：http://blog.51cto.com/daizhj/129472，如需轉載請自行聯系原作者
與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的使用Silverlight Toolkit绘制图表(上)--柱状图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。