[C#] Verwenden des (DataVisualization) Chart Controls

Drucken
( 4 Votes )
Hauptkategorie: Programmieren Kategorie: C#
Erstellt am 09.12.2011 Zuletzt aktualisiert am 30.08.2012 Geschrieben von Jonny132
Um das Chart Control von Windows zu verwenden muss man sich ein bisschen mit Databinding ausseinandersetzen. Ich habe euch ein Beispiel erstellt, das nicht schwer zu verstehen ist und sich leicht anwenden lässt.
Alles was wir brauchen ist ein Windows Forms Projekt auf das wir auf die Form1 ein Chartplatzieren. Am besten Sie geben dem Chart noch die Eigenschaft Dock = Fill damit das Chart automatisch der Formgröße angepasst wird.

Form Load Ereignis

 private void Form1_Load(object sender, EventArgs e)
 {
   Dictionary<DateTime, int> values = new Dictionary<DateTime, int>();
 
   Random r = new Random((int)DateTime.Now.Ticks);
   for (int i = 0; i < 50; i++)
   {
     values.Add(DateTime.Now.AddDays(i), (int)(r.NextDouble() * 100));
   }
 
   chart1.Series.Clear();
   Series serie = new Series();
   serie.XValueType = ChartValueType.DateTime;
   serie.XValueMember = "Key";
   serie.YValueType = ChartValueType.Int32;
   serie.YValueMembers = "Value";
   chart1.Series.Add(serie);
 
   chart1.DataSource = values;
 
   chart1.GetToolTipText += 
         new EventHandler<ToolTipEventArgs>(chart1_GetToolTipText);
 }
Zuerst erstellen wir ein neues Dictionary mit dem Wertetypen DateTime als Key und int als Value. Dann erstellen wir eine neues Random Objekt um zufällige Werte zu erzeugen.
In der For - Schleife fügen wir dem Dictionary nun 50 Werte hinzu. Als Key fügen wir jeweils den Heutigen Tag + die Anzahl der Tage vom Wert i hinzu. Somit erhalten wir pro Tag einen Eintrag in dem Dictionary für die nächsten 50 Tage. als Value fügen wir einfach eine zufällige Zahl zwischen 1 und 100 hinzu. r.NextDouble gibt einen Wert zwischen 0,01 und 1 zurück, deshalb müssen wir diesen Wert noch mit 100 multiplizieren.

Nun besitzen wir ein vollständig mit Daten gefülltes Objekt das wir an das Chart binden können.
Um die Werte anzeigen zu lassen, löschen wir zuerst die Standardserie des Charts heraus und erstellen ein neues. Dieser Serie könnten wir im Konstruktor auch einen Namen übergeben.
Für die Anzeige sagen wir der Serie, dass die X - Achse ein Zeitachse ist (DateTime) und der Y - Achse dass sie eine Ganzzahlachse ist (int32).
Um DataBinding zu benützen, müssen wir noch sagen welche Eigenschaft eines Objekts an die Achse gebunden werden soll.

Dies bewerkstelligt man mit der Eigenschaft ValueMember. Der XValueMember - Eigenschaft wollen wir den Key - Wert des Dictionaries geben und der YValueMember - Eigenschaft den Value - Wert des Dictionaries.
Zu Schluss fügen wir noch die Serie dem Chart hinzu und sagen dem Chart die Quelle der Daten ist das Dictionary. Und somit haben wir ein funktionierendes Databinding.

Eingentlich könnten Sie so das Projekt schon testen. Ich habe es jedoch noch um das GetToolTipText - Event Erweitert um euch zu zeigen wie man mit dem Chart interagieren kann. Dieses Event wird geworfen sobald der Mauszeiger eine kurze Weile auf dem Chart 'ruht'.

GetToolTipText des Charts

 private void chart1_GetToolTipText(object sender, ToolTipEventArgs e)
 {
   if (e.HitTestResult.ChartElementType == ChartElementType.DataPoint)
   {
     int i = e.HitTestResult.PointIndex;
     DataPoint dp = e.HitTestResult.Series.Points[i];
     e.Text = "X: " + (DateTime.FromOADate(dp.XValue).ToShortDateString() +
                  " Y: " + dp.YValues[0].ToString());
   }
 }
Am Anfang des Events testen wir, ob der Mauszeiger aktuell auf einem DatenPunkt oder einem Balken liegt. Dann holen wir uns den index des Punktes auf der, der Mauszeiger zur Zeit liegt und holen diesen aus der aktuellen Serie Heraus.

Zu Schluss weisen wir nun dem ToolTip noch einen Text hinzu der Anzeigt zu welchen Zeitpunkt der Punkt ist und welchen Wert der Punkt hat.

Das Ergebnis können Sie hier betrachten:

Chart Beispiel

    Veröffentlichen Sie ihre Kommentare ...