Come rendere questo (vedi immagine) tipo di grafico in datagridview

Question

Vorrei aggiungere questo tipo di grafico nel mio datagridviewcontrol: -

Ecco il grafico è a tracciata per 12 mesi e posso percentuali ingresso 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 tutte le risposte ho imparato 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 aggiungere diverse colonne per grafico ogni volta che aggiungo una fila ... non poteva pensare a un altro modo di realizzare questo .... del resto io non voglio salvare le immagini che ho trovato che devo se aggiungo 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.

Answer 1

Ecco un modo utilizzando pannelli (div):

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

Answer 2

Molto più facile e più semplice, l'uso Google Charts API .

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

Per esempio, questo codice (rotto sopra 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 che il vostro sono vincolanti a.

In questo modo:

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

Answer 3

Prova a controllo grafico uso: http://msdn.microsoft.com/ it-it / library / dd456632.aspx

Answer 4

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

Si veda 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 un semplice ma efficace esempio. (Non posso postare ancora due collegamenti)

In pratica dovete aggiungere una colonna che viene trattato come un'immagine e poi dipingere l'immagine attraverso l'evento cellformatting. È possibile creare e memorizzare nella cache le immagini in anticipo o crearli al volo (la vostra preferenza). Il secondo articolo dovrebbe aiutare a costruire i vostri piccoli grafici.

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

Answer 5

Ecco un esempio di codice breve, solo in modo che è possibile verificare i requisiti di memoria e le prestazioni dei controlli. Non vedo che cosa si dovrebbe fare per evitare le bitmap, penso che la maggior parte terza opera controlli di partito in un modo simile. Sono sicuro che il mio codice può essere ottimizzato in diversi modi, ma avete un po 'per iniziare. Non so quando uno vorrebbe avere 20000 righe in una griglia, nessun utente può vedere tutto ciò che in ogni caso. Forse si può trovare un modo per mostrare sottoinsiemi in un momento ..?

La creazione dell'immagine probabilmente non dovrebbe essere fatto in oggetto di prova (come è il modello di dati), ma piuttosto a livello di presentazione (ho aggiunto l'evento DataBindingComplete come questo può essere usato per cose simili), l'ho fatto qui perché era più facile. Non immagini vengono salvate in file o qualcosa di simile.

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