如何使這個（參考圖片）中的datagridview

Question

我希望在我的datagridviewcontrol添加此類型的圖表類型的圖表： -

下面的圖表是繪製12個月，我可以無論是輸入百分比或在12個月內的像素比較值....請同時告知如何着色圖表

這樣做的任何想法，將不勝感激

編輯----感謝所有我學習的答案大很多，但還是沒能得到解決的問題......

1. 我需要在我的datagridview周圍15列顯示很多行....所以它很奇怪直接添加的行，但添加一個不同的列圖表，每次我添加一個行...想不到任何其他方式來完成這個....此外，我不想保存圖像，我發現我必須如果我添加圖像直接到網格視圖.....

2. 是否有任何第三方工具也可以幫助我獲得與圖表定製的DataGridView

謝謝。

Answer 1

在這裏使用的方式的面板（div的）：

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

Answer 2

嘗試使用圖表控件：http://msdn.microsoft.com/en-us/library/dd456632.aspx

Answer 3

，你可以嘗試使用DataGridViewImageColumn（）爲特定的列。

請參考http://msdn.microsoft.com/en-us/library/z1cc356h%28v=VS.90%29.aspx

對於圖表，您首先需要創建位圖，如果你搜索「代號：在運行時（Visual C＃中）創建位圖」在MSDN上，你會發現一個簡單而有效的例子。 （我現在還不能發佈兩個鏈接）

基本上你必須添加一個像圖像一樣的對象，然後通過cellformatting事件繪製圖像。您可以預先創建並緩存圖像，或者隨時創建它們（您的首選項）。第二篇文章應該可以幫助你構建你的小圖。

要更改顏色，您需要更改設定值方法的第三個參數。當然，這不是繪製圖表的最快方法，但它足夠簡單。

Answer 4

下面是一個簡短的代碼示例，以便您可以測試控件的內存要求和性能。我沒有看到你應該做什麼來避免位圖，我認爲大多數第三方控件以類似的方式工作。我確信我的代碼可以通過多種方式進行優化，但您可以先從一些方面進行優化。不知道什麼時候想要在網格中有20000行，沒有用戶可以看到所有這些。也許人們可以想出一種方法來顯示子集...？

圖像的創建可能不應該在測試對象（因爲它是數據模型）中完成，而應該在表現層（我添加了DataBindingComplete事件，因爲這可以用於類似的事情），我做了在這裏，因爲它更容易。沒有圖像保存到文件或類似的東西。

我創建了一個名爲dataGridView1的DataGridView。

這是形式的代碼：

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; 

    } 

我還創建了一個測試對象來填充網格：

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

更容易和更簡單，使用google charts API。

在你的DataGridView下，只需要一個帶有<img>標記的模板，並使用src即可。

例如驗證碼（破兩行以上）：

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

會給你以下幾點：

你只需要修改t:50,20,30,65,20部分略有不同的數據你的約束力。

像這樣：

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