WPF Library – Vẽ Biểu Đồ Trong Ứng Dụng WPF(WPF Chart)

Hôm nay, tôi sẽ giới thiệu đến các bạn một bộ thư viện hỗ trợ vẽ đồ thị(Chart) trong WPF. Bộ thư viện tôi muốn đề cập đến đó là Modern UI (Metro) – bộ thư viện này hỗ trợ cho Windows 8/ WPF/Silverlight với nhiều kiểu tùy chọn cho Đồ thị.

I> Giới thiệu

Bộ thư viện này được một kỹ sư tên Torsten Mandelkow tại Đức phát triển, ông có nhiều kinh nghiệm trong việc phát triển ứng dụng .NET vì ông là một nhân viên thâm niên của MicroSoft.

Bạn có thể tải về bộ thư viện này ở đâu? Vâng, bạn có thể tải về theo địa chỉ này, khi tải về bạn có thể tham khảo cách sử dụng trong bộ source-code.

II> Cách dùng

Chúng ta tạo tạo một class đại dienj cho mỗi thông tin cần show lên Chart(Model-Item), tôi tạo class sau với property Count sẽ là property được đổ lên Chart(Data đổ lên Chart nhất thiết phải dạng số).

public class Population : INotifyPropertyChanged
    {
        private string _name = string.Empty;
        private int _count = 0;

        // Tên hiển thị mỗi thành phần Chart
        public string Name
        {
            get{return _name; }
            set
            {
                _name = value;
                NotifyPropertyChanged("Name");
            }
        }

        // Data cho Chart
        public int Count
        {
            get{ return _count;}
            set
            {
                _count = value;
                NotifyPropertyChanged("Count");
            }

        }

       // Phần dưới là implement của INotifyPropertyChanged - tự động cập nhật data.
        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

Sau đó ta tạo phần ViewModel(xem thêm về MVVM)

public class MainViewModel
{
    // Tạo danh sách số dân một số nước bằng ObservableCollection vì có hổ trợ tự động NotifyPropertychanged
    private readonly ObservableCollection<Population> _populations = new ObservableCollection<Population>();

    // Property sẽ được Binding từ GUI(View)
    public ObservableCollection<Population> Populations
    {
        get { return _populations; }
    }

    // Add data(Model-Item) cho List
    public MainViewModel()
    {
        _populations.Add(new Population() { Name = "China", Count = 1340 });
        _populations.Add(new Population() { Name = "India", Count = 1220 });
        _populations.Add(new Population() { Name = "United States", Count = 309 });
        _populations.Add(new Population() { Name = "Indonesia", Count = 240 });
        _populations.Add(new Population() { Name = "Brazil", Count = 195 });
        _populations.Add(new Population() { Name = "Pakistan", Count = 174 });
        _populations.Add(new Population() { Name = "Nigeria", Count = 158 });
    }
}

Tại code behind của View(MainWindow.cs) khởi tạo ViewModel và set cho thuộc tính DataContext của View

public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            this.DataContext = new MainViewModel();
        }
    }

Sau đó chúng ta chỉ cần tạo ChartControl trên View(MainWindow.xaml) bằng cách thêm namespace sau vào trong thẻ Root

xmlns:chart="using:De.TorstenMandelkow.MetroChart"

Và tiến hành tạo ChartControl rồi Binding data

<chart:PieChart ChartSubTitle="Population in millions"
                ChartTitle="Countries by population">
    <chart:PieChart.Series>
        <chart:ChartSeries DisplayMember="Name"
                            ItemsSource="{Binding Path=Populations}"
                            ValueMember="Count" />
    </chart:PieChart.Series>
</chart:PieChart>

Kết quả:

Ngoài ra chúng ta còn có nhiều mẫu đồ thị khác như

Hoặc

 

Các bạn cũng có thể tham khảo thêm về Web -API và get data for Chart from webserver tại link này.

Chúc các bạn thành công.

Phạm Tuân