BETA
Aby się zalogować, najpiew wybierz portal.
Aby się zarejestrować, najpiew wybierz portal.
Podaj słowa kluczowe
Słowa kluczowe muszą mieć co najmniej 3 sąsiadujące znaki alfanumeryczne
Pole zawiera niedozwolone znaki

Baza wiedzy











Rysowanie wykresów przy pomocy komponentu Tee Chart NET1 Lite

29-09-2004 12:47 | mat_sk

Wstęp

Wiele razy w różnego rodzaju programach potrzebowałem sporządzić jakiś wykres np. w celu zaprezentowania wyników, statystyk, przedstawienia dystrybuanty itd.

Ten problem nakłonił mnie do poszukania jakiegoś komponentu służącego do rysowania wykresów. Niedawno znajomy polecił mi darmowy pakiet Tee Chart Net1 Lite i po zapoznaniu się z nim postanowiłem, że napiszę o nim krótki artykuł.

Przy pomocy edytora TeeChart można implementować proste wykresy bez albo z niewielkim wykorzystaniem własnego kodu. TeeChart pozwala również na zmienianie wyglądu wykresu, wprowadzanie tytułów, legend oraz pozwala na przedstawienie wykresów w formie 3D.

Wszystko to daje możliwość zmieniania wyglądu oraz rodzaju wykresu w czasie pracy programu bez konieczności definiowania nowego obiektu wykresu.

Komponent jest zbudowany z dwóch części: Series oraz Chart, które są ze sobą połączone przy pomocy interfejsu: Axes. Część nazwana Series zawiera dane, ich wartości oraz opisy etykiet. Część Chart jest odpowiedzialna za wygląd wykresu, przy jej pomocy możemy definiować tytuły, właściwości legendy, wprowadzać aspekt 3D a także zmieniać czcionki etykiet. Ustawienie wszystkich własności w Chart zaleca się wykonać przed wprowadzeniem jakichkolwiek serii danych, czyli przed dodaniem do wykresu obiektów należących do części Series.

Edytor Chart pozwala na dodawanie wielu serii danych (elementów części Series) do jednego wykresu, to znaczy, że na jednym wykresie: obiekcie Chart możemy wyświetlić wiele obiektów Series jednocześnie albo kolejno.

Budowanie wykresu

Po zainstalowaniu komponentu TeeChart w środowisku .Net w Toolbox w części Windows Forms pojawia się ikona TeeChart.

Po umieszczeniu tego komponentu na formatce należy rozwinąć jego menu kontekstowe i wybrać z niego opcję edit.

Następnie otworzy nam się okienko opcji wykresu i tutaj możemy dodać do niego różne serie danych oraz możemy zmieniać jego własności, kolory, wielkość itd.

Powyżej przedstawione okienko edytora wykresów możemy również obsługiwać w czasie wykonania programu, wystarczy, że w miejscu, w którym chcemy uruchomić edytor wstawimy poniższą linię kodu:

     tChart1.ShowEditor();

Gdzie tChart1 to obiekt klasy: Steema.TeeChart.Tchart.

Oczywiście wszystkie własności wykresów oraz serii danych możemy ustawić programistycznie bez użycia edytora. Poniższe fragmenty kodu pokazują jak można ustawić lub zmienić niektóre z własności wykresu:

  • Własności osi wykresu:

  • Żadna z osi nie będzie wyświetlona                     
         tChart1.Axes.Visible = false;                         
         Nie będzie wyświetlona górna oś           
         tChart1.Axes.Top.Visible = false;                    
         Nie będzie wyświetlona lewa oś                
         tChart1.Axes.Left.Visible = false;          
         Nie będzie wyświetlona prawa oś     
         tChart1.Axes.Right.Visible = false;      
         Określenie maksymalnej i minimalnej wartości skali osi
         współrzędnych                    
         Steema.TeeChart.Axis bottomAxis = tChart1.Axes.Bottom;
         bottomAxis.Automatic = false;           
         bottomAxis.Maximum = 25;                
         bottomAxis.Minimum = 10;                         
              Określenie tylko maksymalnej wartości, minimalna
         będzie automatyczna                              
         Steema.TeeChart.Axis bottomAxis = tChart1.Axes.Bottom;
         bottomAxis.AutomaticMaximum = false;      
         bottomAxis.AutomaticMinimum =     true;      
         bottomAxis.Maximum = 20;

  • Własności nagłówka wykresu:

  • Ustawienie widoczności nagłówka          
         tChart1.Header.Visiable = true;                    
         Ustawienie tekstu nagłówka                         
         tChart1.Header.Text = "To jest nagłówek";               
         Zmiana położenia nagłówka wykresów
         tChart1.Header.CustomPosition = true;           
         tChart1.Header.Top = tChart1.Header.Top + 10;           
         Ustawienie rodzaju czcionki                    
         tChart1.Header.Font.Name = "Verdana";               
         Ustawienie rozmiaru czcionki          
         tChart1.Header.Font.Size = 20;                    
         Ustawienie czcionki pogrubionej          
         tChart1.Header.Font.Bold = true;                     
         Ustawienie cienia nagłówka          
         tChart1.Header.Shadow.Visible = true;           
         tChart1.Header.Shadow.Color = Color.Chartreuse;

  • Własności legendy wykresu:

  • Ustawienie widoczności legendy                         
         tChart1.Legend.Visible = true;                    
         Ustawienie widoczności i koloru linii oddzielającej
         elementy legendy               
         tChart1.Legend.DividingLines.Visible = true;           
         tChart1.Legend.DividingLines.Color = Color.Gold;     
         Ustawienie rozszerzalności legendy          
         tChart1.Legend.ResizeChart = false;                    
         Ustawienie pozycji legendy      
         tChart1.Legend.CustomPosition = true;          
         tChart1.Legend.Top = 2;                            
         Ustawienie wielkości i koloru cienia legendy
         tChart1.Legend.Shadow.Color = Color.Cyan;           
         tChart1.Legend.Shadow.Width = 2;                     

  • Właściwości tła wykresu:

  • Ustawienie obrazka jako tło      
         tChart1.Panel.Brush.LoadImage(@"quiz.jpg");          
         Ustawienie tła gradientowego                    
         Chart1.Panel.Gradient.Visible = true;
         tChart1.Panel.Gradient.StartColor = Color.Red;     
         tChart1.Panel.Gradient.MiddleColor = Color.White;      
              tChart1.Panel.Gradient.EndColor = Color.Blue;      

  • Właściwości widoku 3D:

  • Widzialność aspektu 3D                    
         tChart1.Aspect.View3D = false;                     
         Wielkość głębi trzeciego wymiaru (od 0 do 100)          
         tChart1.Aspect.Chart3DPercent = 100;                

  • Własności stron wykresu:

  • Określenie maksymalnej liczby punktów wyświetlanych na jednej
         stronie wykresu                    
         tChart1.Page.MaxPointsPerPage = 10;                
         Nawigacja stronami wykresu                
         tChart1.Page.Next();               
         tChart1.Page.Previous();                         
         Przejście do ostatniej strony wykresu      
         tChart1.Page.Current = tChart1.Page.Count;          
         Ustawienie nieskalowalności ostatniej strony wykresu
         Chart1.Page.ScaleLastPage = false;

    Po ustawieniu wszystkich własności  wykresu, jak również dodaniu wymaganych serii danych, możemy przystąpić do dodania wartości do poszczególnych serii:

    private void button1_Click(object sender, System.EventArgs e)
    {//Dodanie danych do serii bar1 oraz line1        
         bar1.Add(9,"Pears",Color.Red);  
         bar1.Add(7,"Apples",Color.Blue);
         bar1.Add(8,"Oranges",Color.Green);  
         line1.Add(1,"Olives",Color.Red);  
         line1.Add(2,"Apricots",Color.Blue);
         line1.Add(5,"Nuts",Color.Green);
         ...          
    }

    W celu dodania kolejnych wartości do rysowanego wykresu wykorzystujemy w powyższym fragmencie kodu jedną z dostępnych przeciążonych funkcji Add z parametrami: wartość y, nazwa oraz kolor. Drugą dość często stosowaną opcją funkcji Add jest ta z parametrami:  wartość x, wartość y, nazwa oraz kolor. Poniższy kod ilustruje wykorzystanie tej funkcji:

    private void button1_Click(object sender, System.EventArgs e)
    {
         Random rnd = new Random();
         if(bar1.Count > 0)
         {
              bar1.Add((bar1.XValues.Last + rnd.Next(10)),               
              ((bar1.YValues.Last/(bar1.YValues.Last - 1)) +     rnd.Next(10))
              ,RandomName(),RandomColor());                              
              line1.Add((line1.XValues.Last + rnd.Next(10)),               
              ((line1.YValues.Last/(line1.YValues.Last - 1)) +          
              rnd.Next(10)),RandomName(),RandomColor());                  
              ...
         }
         else
         {
              bar1.Add(1,rnd.Next(10),RandomName(),RandomColor());          
              line1.Add(1,rnd.Next(10),RandomName(),RandomColor());
              ...                                                  
         }
    }

    W powyższym kodzie zostało zaprezentowane dodawanie losowych punktów do poszczególnych serii danych wykresów. Zostały tam jeszcze wykorzystane dwie funkcje RandomName() oraz RandomColor() są to funkcje napisane na potrzebę programu dołączonego do artykułu i ich zadaniem, jak wskazują na to nazwy, jest losowe dopasowanie do punktu nazwy oraz koloru.

    Po kilkukrotnym zastosowaniu powyższej funkcji, to znaczy po kilkukrotnym kliknięciu na odpowiedni przycisk otrzymamy następujący wynik:

  • Dla serii danych line otrzymujemy wykres w postaci poziomej linii:

  • Dla serii danych pie otrzymujemy wykres kołowy:

  • Dla serii danych area otrzymujemy wykres ścianowy poziomy:

  • Dla serii danych points otrzymujemy wykres punktowy:

  • Dla serii danych fast line otrzymujemy wykres liniowy prosty:

  • Dla serii danych bar otrzymujemy wykres słupkowy:

  • Wykres słupkowy po zmianie ustawień niektórych własności wykresu:

Wykresy słupkowy, liniowy oraz ścianowy mają jeszcze swoje odpowiedniki poziome, których wyglądu już nie będę prezentował, ponieważ zajęłoby to zbyt dużo miejsca.

Podsumowanie

Myślę, że łatwość obsługi i dość duże możliwości prezentowanego komponentu pozwalają na jego szerokie zastosowanie w różnego rodzaju aplikacjach. Oprócz tego TeeChart NET1 Lite jest darmowy i dostępny na stronach producenta :  www.teechart.net. Można również ściągnąć płatną i znacznie bogatszą wersję TeeChart NET1 Eval. Więcej informacji na jej temat można uzyskać na stronach: www.teechart.net, www.steema.com.  

 

Załączniki:

Podobne artykuły

Komentarze 7

User 80305
User 80305
31 pkt.
Poczatkujacy
21-01-2010
oceń pozytywnie 0
Ale kontrolka fajna... :)
User 79215
User 79215
0 pkt.
Nowicjusz
21-01-2010
oceń pozytywnie 0
Dowiedziałem się, że taka kontrolka jest. I za to artykułowi +2 pkt, a autorowi wielkie dzięki. Sam artykuł jest do niczego. Chaotyczny opis, mnóstwo obrazków i kodu, z których nic nie wynika. Przy takim podejściu do tematu artykuł mógłby składać się tylko z ostatniego zdania... Nie neguje w żadnym wypadku opisywania sposobów wykorzystania zewnętrznych bibliotek czy też pojedynczych kontrolek.
User 79899
User 79899
35 pkt.
Poczatkujacy
21-01-2010
oceń pozytywnie 0
Rzeczywiście średnio ciekawy artykuł. Z programowania to tu jest niewiele. Nie twórca napisze jak stworzyć taką kontrolkę to wtedy ocena będzie odpowiednia.
adidas3068945
adidas3068945
0 pkt.
Nowicjusz
21-01-2010
oceń pozytywnie 0
Daje 4, ale tylko za dobre checi...Mysle, ze PWr powinna troche lepiej "filtrowac" artykuly, ktore ukazuja sie na codeguru - wtedy pewnie bylaby wyzej w rankingu... :-)
godlewskigo
godlewskigo
0 pkt.
Nowicjusz
21-01-2010
oceń pozytywnie 0
coz za nedza
kawecki
kawecki
0 pkt.
Nowicjusz
21-01-2010
oceń pozytywnie 0
bo zera nie ma...
:)
:)
3 pkt.
Nowicjusz
:)
21-01-2010
oceń pozytywnie 0
prima aprilis?
pkt.

Zaloguj się lub Zarejestruj się aby wykonać tę czynność.