如何在 datagridview 中制作这种（参考图片）类型的图表

Question

我希望在我的 datagridviewcontrol 中添加这种类型的图表：-

这里的图表是绘制 12 个月的，我可以输入 12 个月的百分比或像素比较值....还请告诉如何为图表着色

任何这样做的想法将受到高度赞赏

编辑----感谢所有答案我学到了很多，但仍然无法解决这个问题...

1. 我需要在我的 datagridview 中显示很多行，大约有 15 列...所以直接添加行但每次为图表添加不同的列是很奇怪的我添加一行...想不出任何其他方法来完成此操作...此外，我不想保存我发现如果我将图像直接添加到网格视图中就必须保存的图像.. ...

2. 是否有任何第三方工具可以帮助我获取带有图表的自定义 datagridview

谢谢。

Answer 1

使用 Google 图表 API。

在 DataGridView 下，只需递归一个带有 标记和特定 src 的模板。

例如，此代码（分为 2 行）：

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

Answer 2

这是使用面板（div）的方法：

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

Answer 3

尝试使用图表控件： http://msdn.microsoft.com/en-us /library/dd456632.aspx

Answer 4

您可以尝试为该特定列使用 DataGridViewImageColumn() 。

请参阅 http://msdn.microsoft。 com/en-us/library/z1cc356h%28v=VS.90%29.aspx

对于图形，您需要首先创建位图，如果您搜索“代码：在运行时创建位图（ Visual C#)”在 msdn 上您会找到一个简单但有效的示例。 （我还不能发布两个链接）

基本上，您必须添加一个像图像一样处理的列，然后通过单元格格式化事件绘制图像。您可以预先创建并缓存图像，也可以动态创建它们（您的偏好）。第二篇文章应该可以帮助您构建小图表。

要更改颜色，您需要更改设置点方法的第三个参数。当然，这不是绘制图表最快的方法，但它很简单，可以开始使用。

Answer 5

这是一个简短的代码示例，以便您可以测试控件的内存要求和性能。我不知道你应该做什么来避免位图，我认为大多数第 3 方控件都以类似的方式工作。我确信我的代码可以通过多种方式进行优化，但您可以从一些方面入手。不确定何时需要在网格中包含 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;
            }
        }
    }