Wie diesen (siehe Bild) Diagrammtyp in Datagridview machen

Question

ich in meinem datagridviewcontrol diese Art von Diagramm hinzufügen möchte: -

Hier ist die grafische Darstellung für 12 Monate aufgetragen ist, und ich kann entweder Eingangsprozentsätze oder Vergleichswerte in Pixel für die 12 Monate .... Bitte beachten Sie auch sagen, wie die Diagramme färben

Irgendwelche Ideen für diese Weise werden sehr

bearbeiten geschätzt werden ---- Vielen Dank für all die Antworten, die ich gelernt habe da viel, aber immer noch nicht, um das Problem bekommen könnte ...

1. Ich muss mit rund 15 Spalten viele Zeilen in meinem Datagridview angezeigt werden .... also seine sehr seltsam direkt die Zeilen hinzufügen, aber füge jedes Mal, wenn ich eine Zeile hinzufüge, eine andere Spalte für das Diagramm hinzu ... könnte mir keine andere Möglichkeit vorstellen, dies zu erreichen .... außerdem möchte ich die Bilder, die ich gefunden habe, nicht speichern, wenn ich das hinzufüge Bilder direkt in die Rasteransicht .....

2. gibt es ein Drittanbieter-Tool gibt, die mir helfen können benutzerdefinierte Datagridview mit Diagrammen

zu erhalten 10

Vielen Dank.

Answer 1

Hier ist eine Art und Weise Platten (divs) mit:

http://weblogs.asp.net/stevewellens/archive/2010/03/01/visual-data-binding-hot-dang.aspx

Answer 2

Try Chart-Steuerelement verwenden: http://msdn.microsoft.com/en-us/library/dd456632.aspx

Answer 3

können Sie versuchen, eine DataGridViewImageColumn() für diese bestimmte Spalte.

Bitte beachten Sie http://msdn.microsoft.com/en-us/library/z1cc356h%28v=VS.90%29.aspx

Für die Grafiken, um die Bitmaps zunächst erstellen müssen, und wenn Sie nach „Code: eine Bitmap zu Laufzeit (Visual C#) erstellen“ auf Msdn finden Sie eine finden einfaches aber effektives Beispiel. (Ich kann noch keine zwei Links posten)

Im Grunde müssen Sie eine Spalte hinzufügen, die wie ein Bild behandelt wird und dann das Bild durch das Cellformatierungsereignis malen. Sie können Ihre Bilder vorher erstellen und zwischenspeichern oder sie im Handumdrehen erstellen (Ihre Präferenz). Der zweite Artikel soll Ihnen helfen, Ihre kleinen Grafiken zu erstellen.

Um die Farbe zu ändern, müssen Sie das 3. Argument der Sollwertmethode ändern. Sicherlich ist es nicht die schnellste Methode, um Diagramme zu zeichnen, aber es ist einfach genug, um damit zu beginnen.

Answer 4

Hier ist ein Beispiel für einen kurzen Code, mit dem Sie die Speicheranforderungen und die Leistung Ihrer Steuerelemente testen können. Ich sehe nicht, was Sie tun sollten, um Bitmaps zu vermeiden. Ich denke, dass die meisten Steuerelemente von Drittanbietern auf ähnliche Weise funktionieren. Ich bin mir sicher, dass mein Code auf verschiedene Arten optimiert werden kann, aber Sie haben einige, um damit zu beginnen. Nicht sicher, wenn man 20000 Zeilen in einem Raster haben möchte, kann kein Benutzer das alles trotzdem sehen. Vielleicht kann man einen Weg finden, Sub-Sets gleichzeitig zu zeigen ..?

Die Erstellung des Bildes sollte wahrscheinlich nicht im Testobjekt (wie es das Datenmodell ist), sondern in der Präsentationsschicht (Ich habe das DataBindingComplete-Ereignis hinzugefügt, da dies für ähnliche Dinge verwendet werden kann), tat ich das hier, weil es einfacher war. Keine Bilder werden in einer Datei oder ähnlichem gespeichert.

Ich habe ein Formular mit einem DataGridView namens DataGridView1 erstellt.

Dies ist der Code für das Formular:

List<TestObject> _list = new List<TestObject>(); 

    public Form1() 
    { 
     InitializeComponent(); 
     dataGridView1.DataBindingComplete += new DataGridViewBindingCompleteEventHandler(dataGridView1_DataBindingComplete); 

    } 


    void dataGridView1_DataBindingComplete(object sender, DataGridViewBindingCompleteEventArgs e) 
    { 

    } 

    private void Form1_Load(object sender, EventArgs e) 
    { 
     // Populate the grid, here you should add as many rows as you want to display 
     _list.Add(new TestObject("Obj1", 20, Brushes.Red, new int[]{3,4,5,3,5,6})); 
     _list.Add(new TestObject("Obj2", 10, Brushes.Green, new int[] { 1, 2, 3, 4, 5, 6 })); 
     _list.Add(new TestObject("Obj3", 30, Brushes.Blue, new int[] { 3, 2, 1, 1, 2, 3 })); 


     dataGridView1.DataSource = _list; 

    } 

Ich habe auch ein Test-Objekt, das Netz zu füllen:

public class TestObject 
    { 

     private const int BitmapWidth = 100; 
     private const int BitmapHeight = 20; 
     private System.Drawing.Brush _color; 
     private string _name; 
     private int[] _numbers; 
     private int _value; 


     public TestObject(string name, int value, System.Drawing.Brush color, int[] series) 
     { 
      _name = name; 
      _numbers = series; 
      _color = color; 
      _value = value; 
     } 

     public string Name 
     { 
      get { return _name; } 
     } 
     public string Value { get { return _value.ToString(); } } 

     public Image Series 
     { 
      get 
      { 
       int width = BitmapWidth/_numbers.Length - _numbers.Length; 

       System.Drawing.Bitmap b = new Bitmap(BitmapWidth, BitmapHeight); 
       Graphics g = Graphics.FromImage(b); 
       g.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceCopy; 

       int current = 0; 

       for (int i = 0;i < _numbers.Length;i++) 
       { 
        g.FillRectangle(_color, current, BitmapHeight - (BitmapHeight/10) * _numbers[i], width, (BitmapHeight/10) * _numbers[i]); 
        current+=width + 2; 
       } 

       return b; 
      } 
     } 
    } 

Answer 5

Viel einfacher und einfacher, verwenden Sie google charts API.

Unter Ihrer DataGridView rekurieren Sie einfach eine Vorlage mit einem Tag mit einer bestimmten src.

Zum Beispiel diesen Code (gestrichelte über 2 Zeilen):

<img src="http://chart.apis.google.com/chart? 
    cht=bvs&chd=t:50,20,30,65,20&chs=220x30" width="120" /> 

Würden Sie geben die folgende:

Sie müssen nur die t:50,20,30,65,20 Abschnitt leicht auf die Daten in Abhängigkeit ändern Du bist verbindlich.

So:

<img src="http://chart.apis.google.com/chart? 
    cht=bvs&chd=t:<%# Eval("t1") %>,<%# Eval("t2") %>,<%# Eval("t3") %>,<%# Eval("t4") %>,<%# Eval("t5") %>&chs=220x30" width="120" />