I.Introduction
Trong bài này mình xin chia sẽ cách sử dụng biểu đồ tròn Pie Chart trong Silverlight.
II.Creating Project And Coding
Fire Up Exppression Blend 4. và tạo Silverlight Application
Các bạn vào thanh công cụ, và Search thử Pie sẽ thấy 3 kết quả, và Chút nữa chúng ta sẽ dùng đến Pieseries
Tiếp theo chúng ta tạo giao diện như đoạn XAML sau :
1: <UserControl
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
5: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
7: x:Class="PieChartInSL3.MainPage"
8: Width="640" Height="480" mc:Ignorable="d" Loaded="UserControl_Loaded">
9:
10: <Grid x:Name="LayoutRoot" HorizontalAlignment="Center" VerticalAlignment="Center" Height="480" Width="640">
11: <chartingToolkit:Chart x:Name="TypicalChart" Title="Typical Pie Chart" HorizontalAlignment="Center" VerticalContentAlignment="Center" Margin="31,0,25,0" Width="584">
12: <chartingToolkit:Chart.Series>
13: <chartingToolkit:PieSeries Margin="0,0,20,20" d:LayoutOverrides="Width, Height" Title="Pie Chart Sample" IndependentValueBinding="{Binding Path=Key}"
14: DependentValueBinding="{Binding Path=Value}"/>
15: </chartingToolkit:Chart.Series>
16: </chartingToolkit:Chart>
17: <Grid.Background>
18: <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
19: <GradientStop Color="#FFCEBBCE" Offset="0.012" />
20: <GradientStop Color="White" Offset="1" />
21: </LinearGradientBrush>
22: </Grid.Background>
23: </Grid>
24: </UserControl>
Tiếp theo chúng ta tạo một CSDL đơn giản, các bạn click phải chuột vào PieChart và chọn Add New Item
Chúng ta tạo Lớp Appointment và AppointmentHelper
Appointment là CSDL dùng để Show vào Biểu đồ :
1: using System;
2: using System.Net;
3: using System.Windows;
4: using System.Windows.Controls;
5: using System.Windows.Documents;
6: using System.Windows.Ink;
7: using System.Windows.Input;
8: using System.Windows.Media;
9: using System.Windows.Media.Animation;
10: using System.Windows.Shapes;
11:
12: namespace PieChartInSL3
13: {
14: public class Appointment
15: {
16: public int Id { get; set; }
17: public string AppName { get; set; }
18: public string AppointmentDetails { get; set; }
19: public int Duration { get; set; }
20:
21: public Appointment()
22: {
23: }
24:
25: public Appointment(int id, string appName, string appointmentDetails, int duration)
26: {
27: Id = id;
28: AppName = appName;
29: AppointmentDetails = appointmentDetails;
30: Duration = duration;
31: }
32:
33: }
34: }
Lớp AppointmentHelper:
1: using System;
2: using System.Linq;
3: using System.Net;
4: using System.Windows;
5: using System.Windows.Controls;
6: using System.Windows.Documents;
7: using System.Windows.Ink;
8: using System.Windows.Input;
9: using System.Windows.Media;
10: using System.Windows.Media.Animation;
11: using System.Windows.Shapes;
12: using System.Collections.Generic;
13:
14: namespace PieChartInSL3
15: {
16: public static class AppointmentHelper
17: {
18: public static Dictionary<String, int> GetTimeDistribution(this List<Appointment> appts)
19: {
20: Dictionary<String, int> myTimeDistribution = new Dictionary<string, int>();
21:
22: var appointments = (from time in appts
23: select time.AppName).Distinct();
24:
25: foreach (var app in appointments)
26: {
27: var time = (from pjts in appts
28: where pjts.AppName == app
29: select pjts.Duration).Sum();
30:
31: myTimeDistribution.Add(app, time);
32:
33: }
34: return myTimeDistribution;
35: }
36:
37: }
38: }
Tiếp theo chúng ta xử lý trong MainPage.XAML.cs:
1: using System;
2: using System.Windows;
3: using System.Windows.Controls;
4: using System.Windows.Documents;
5: using System.Windows.Ink;
6: using System.Windows.Input;
7: using System.Windows.Media;
8: using System.Windows.Media.Animation;
9: using System.Windows.Shapes;
10: using System.Collections.Generic;
11: using System.Windows.Controls.DataVisualization.Charting;
12:
13: namespace PieChartInSL3
14: {
15: public partial class MainPage : UserControl
16: {
17: List<Appointment> appointments;
18: public MainPage()
19: {
20: // Required to initialize variables
21: InitializeComponent();
22: CreateTimeLists();
23: }
24:
25: private List<Appointment> CreateTimeLists()
26: {
27: appointments = new List<Appointment>
28: {
29: new Appointment { Id=1, AppName="Meeting", AppointmentDetails="Video COnference", Duration=30},
30: new Appointment { Id=1, AppName="Call", AppointmentDetails="Audio COnference", Duration=90},
31: new Appointment { Id=1, AppName="Session", AppointmentDetails="Session for Silverlight", Duration=120}
32: };
33: return appointments;
34: }
35:
36: private void UserControl_Loaded(object sender, RoutedEventArgs e)
37: {
38: ((PieSeries)TypicalChart.Series[0]).ItemsSource = appointments.GetTimeDistribution();
39:
40: }
41:
42: }
43: }
bây giờ Run Application và xem kết quả
Pham Nguyen 