2010-10-21 14 views
7

desidero aggiungere questo tipo di grafico nel mio datagridviewcontrol: -Come rendere questo (vedi immagine) tipo di grafico in datagridview

alt text

Ecco il grafico è quello tracciato per 12 mesi e posso sia le percentuali di input o valori comparativi in ​​pixel per i 12 mesi .... Informi anche come colorare i grafici

tutte le idee per fare questo sarà molto apprezzato

Modifica ---- Grazie per tutto il risponde I learne da molto, ma ancora non riusciva a aggirare il problema ...

  1. Ho bisogno di visualizzare un sacco di righe nel mio datagridview con circa 15 colonne .... quindi è molto strano per aggiungere direttamente le righe, ma aggiungi una colonna diversa per il grafico ogni volta che aggiungo una riga ... non riesco a pensare ad altro modo per realizzare questo .... inoltre non voglio salvare le immagini che ho trovato se devo aggiungere il le immagini direttamente nella vista griglia .....

  2. c'è qualche strumento di terze parti lì che mi può aiutare a ottenere datagridview personalizzato con grafici

Grazie.

+0

WinForms, WPF o ... –

+0

sto facendo un'applicazione desktop cioè WinForms –

+1

WPF, Silverlight e Console sono anche applicazioni desktop. –

risposta

0

si può provare a utilizzare un DataGridViewImageColumn() per quel particolare colonna.

prega di fare riferimento al http://msdn.microsoft.com/en-us/library/z1cc356h%28v=VS.90%29.aspx

Per i grafici, è necessario creare le bitmap prima, e se si cerca "Codice: Creazione di una bitmap in fase di esecuzione (Visual C#)" su MSDN troverete una esempio semplice ma efficace. (Non posso ancora postare due collegamenti)

Fondamentalmente è necessario aggiungere una colonna che viene trattata come un'immagine e quindi dipingere l'immagine attraverso l'evento di formattazione della cella. Puoi creare e memorizzare in anticipo le tue immagini o crearle al volo (le tue preferenze). Il secondo articolo dovrebbe aiutarti a costruire i tuoi piccoli grafici.

Per cambiare colore, è necessario modificare il terzo argomento del metodo del setpoint. Sicuramente non è il metodo più veloce per disegnare grafici, ma è abbastanza semplice iniziare.

+0

si prega di vedere la modifica ... Penso che se creo circa 20000 bitmap (per 20000 righe in datagridview) Prenderà solo troppa memoria –

+0

Capisco il tuo problema. Penso che non sia necessario crearne tutti i 20000. Basta creare le bitmap al volo mentre le si visualizza. – mhttk

0

Ecco un esempio di codice breve, solo per testare i requisiti di memoria e le prestazioni dei controlli. Non vedo che cosa dovresti fare per evitare le bitmap, penso che la maggior parte dei controlli di terze parti funzioni in modo simile. Sono sicuro che il mio codice può essere ottimizzato in diversi modi, ma ne hai alcuni per cominciare. Non sono sicuro quando uno vorrebbe avere 20000 righe in una griglia, nessun utente può vedere tutto ciò comunque. Forse uno può capire un modo per mostrare sottoinsiemi alla volta ..?

Probabilmente la creazione dell'immagine non dovrebbe essere eseguita nell'oggetto di prova (come nel modello di dati) ma piuttosto nel livello di presentazione (ho aggiunto l'evento DataBindingComplete in quanto può essere utilizzato per cose simili), l'ho fatto che qui perché era più facile. Nessuna immagine è salvata su file o qualcosa del genere.

Ho creato un modulo con un DataGridView chiamato dataGridView1.

Questo è il codice per la forma:

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; 

    } 

ho anche creato un test-oggetto per popolare la griglia:

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; 
      } 
     } 
    } 
1

Molto più semplice e più semplice, utilizzare google charts API.

Sotto il tuo DataGridView reci solo un modello con un tag <img> con uno specifico src.

Per esempio questo codice (rotti su 2 linee):

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

darebbe la seguente:

Hai solo bisogno di modificare la sezione t:50,20,30,65,20 leggermente a seconda dei dati sei vincolante per.

Ti piace questa:

<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" /> 
+0

Ps: utilizzo della memoria sul server per la grafica = NONE –

Problemi correlati