2010-10-21 9 views
7

deseo añadir este tipo de gráfico en mi datagridviewcontrol: -Como hacer esto (consulte la imagen) tipo de gráfico en el DataGridView

alt text

Aquí el gráfico es trazada por 12 meses y que pueda o bien porcentajes de entrada o valores comparativos en píxeles para los 12 meses .... por favor, decirle también a colorear las gráficas

¿Alguna idea para hacer esto será muy apreciada

Editar ---- Gracias por todo el respuestas que aprendí mucho da, pero todavía no podía evitar el problema ...

  1. tengo que mostrar una gran cantidad de filas en mi DataGridView con alrededor de 15 columnas .... Así que es muy raro para agregar directamente las filas, pero agrego columnas diferentes para el gráfico cada vez que agrego una fila ... no se me ocurre otra forma de lograr esto ... además, no quiero guardar las imágenes que encontré que tengo si agrego el imágenes directamente en la vista de cuadrícula .....

  2. ¿hay alguna herramienta de terceros no que me puede ayudar a conseguir DataGridView personalizado con gráficos

Gracias.

+0

Windows Forms, WPF o ... –

+0

estoy haciendo una aplicación de escritorio de Windows Forms es decir –

+1

WPF, Silverlight y la consola son también las aplicaciones de escritorio. –

Respuesta

0

puede intentar usar un DataGridViewImageColumn() para esa columna en particular.

favor refiérase a http://msdn.microsoft.com/en-us/library/z1cc356h%28v=VS.90%29.aspx

Para los gráficos, es necesario crear los mapas de bits en primer lugar, y si se busca "Código: Creación de un mapa de bits en tiempo de ejecución (Visual C#)" en MSDN encontrará una ejemplo simple pero efectivo. (No puedo publicar dos enlaces todavía)

Básicamente, debe agregar una columna que se trata como una imagen y luego pintar la imagen a través del evento de formateado de celda. Puede crear y almacenar en caché sus imágenes de antemano o crearlas sobre la marcha (su preferencia). El segundo artículo debería ayudarte a construir tus pequeños gráficos.

Para cambiar el color, debe cambiar el tercer argumento del método de punto de ajuste. Por supuesto, no es el método más rápido para dibujar gráficos, pero es lo suficientemente simple como para empezar.

+0

Consulte la edición ... Creo que si creo alrededor de 20000 bitmaps (para 20000 filas en datagridview) Simplemente tomará demasiada memoria –

+0

Entiendo su problema. Creo que no necesitas crear todos los 20000 de ellos. Simplemente crea los mapas de bits sobre la marcha a medida que los visualizas. – mhttk

0

Aquí hay un ejemplo de código corto, solo para que pueda probar los requisitos de memoria y el rendimiento de sus controles. No veo lo que debes hacer para evitar bitmaps, creo que la mayoría de los controles de terceros funcionan de manera similar. Estoy seguro de que mi código puede optimizarse de varias maneras, pero tiene algunas para empezar. No estoy seguro de cuándo desearía tener 20000 filas en una grilla, ningún usuario puede ver todo eso de todos modos. Tal vez uno puede encontrar una manera de mostrar subconjuntos a la vez ..?

La creación de la imagen probablemente no debería hacerse en el objeto de prueba (como es el modelo de datos) sino en la capa de presentación (agregué el evento DataBindingComplete ya que puede usarse para cosas similares), lo hice eso aquí porque era más fácil. No se guardan imágenes en el archivo ni nada de eso.

Creé un formulario con un DataGridView llamado dataGridView1.

Este es el código para el formulario:

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; 

    } 

También creé un objeto de prueba para rellenar la cuadrícula:

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

Mucho más fácil y simple, use google charts API.

En su DataGridView solo recurse una plantilla con una etiqueta <img> con un src específico.

Por ejemplo el código (rotos más de 2 líneas):

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

le daría el siguiente:

sólo tiene que modificar la sección t:50,20,30,65,20 ligeramente en función de los datos tu estas vinculando a.

De esta manera:

<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: uso de memoria en el servidor para gráficos = NINGUNO –

Cuestiones relacionadas