Как сделать этот (см. Изображение) тип графика в datagridview - PullRequest
7 голосов
/ 21 октября 2010

Я хочу добавить этот тип графика в свой datagridviewcontrol: -

alt text

Здесь график рассчитан на 12 месяцев, и я могу либо ввести проценты или сравнительные значения впикселей за 12 месяцев .... Пожалуйста, также расскажите, как раскрасить графики

Любые идеи для этого будут высоко оценены

Редактировать ---- Спасибо за все ответы, которые я выучилмного, но все еще не мог обойти проблему ...

  1. Мне нужно отобразить много строк в моем представлении данных с примерно 15 столбцами .... Так что это очень страннонепосредственно добавляйте строки, но добавляйте разные столбцы для графика каждый раз, когда я добавляю строку ... не мог придумать какой-либо другой способ сделать это .... более того, я не хочу сохранять изображения, которые я нашел, у меня естьесли я добавлю изображения непосредственно в вид сетки .....

  2. Существует ли какой-либо сторонний инструмент, который может помочь мне получить пользовательское представление данных с диаграммами

Спасибо.

Ответы [ 5 ]

1 голос
/ 24 ноября 2010

Гораздо проще и проще, используйте API Google Charts .

В вашем 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" />
0 голосов
/ 27 октября 2010

Вот способ использования панелей (делений):

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

0 голосов
/ 24 октября 2010

вы можете попробовать использовать DataGridViewImageColumn () для этого конкретного столбца.

Пожалуйста, обратитесь к http://msdn.microsoft.com/en-us/library/z1cc356h%28v=VS.90%29.aspx

Для графиков сначала необходимо создать битовые карты, иесли вы будете искать «Код: Создание растрового изображения во время выполнения (Visual C #)» в msdn, вы найдете простой, но эффективный пример.(Я пока не могу опубликовать две ссылки)

По сути, вам нужно добавить столбец, который обрабатывается как изображение, а затем раскрасить изображение через событие форматирования ячейки.Вы можете создавать и кэшировать свои изображения заранее или создавать их на лету (ваши предпочтения).Вторая статья должна помочь вам построить ваши маленькие графики.

Чтобы изменить цвет, вам нужно изменить третий аргумент метода заданного значения.Конечно, это не самый быстрый способ рисования диаграмм, но он достаточно прост для начала.

0 голосов
/ 26 октября 2010

Вот пример короткого кода, чтобы вы могли проверить требования к памяти и производительность ваших элементов управления. Я не понимаю, что вы должны делать, чтобы избежать растровых изображений, я думаю, что большинство сторонних элементов управления работают аналогичным образом. Я уверен, что мой код можно оптимизировать несколькими способами, но у вас есть с чего начать. Не уверенный, когда кто-то захочет иметь 20000 строк в сетке, ни один пользователь не сможет увидеть все это в любом случае. Возможно, можно найти способ показывать подмножества одновременно??

Создание изображения, вероятно, следует выполнять не в тестовом объекте (так как это модель данных), а в уровне представления (я добавил событие DataBindingComplete, так как его можно использовать для похожих вещей), я сделал это здесь, потому что это было проще. Изображения не сохраняются в файл или что-либо подобное.

Я создал форму с DataGridView под названием dataGridView1.

Это код для формы:

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;
            }
        }
    }
0 голосов
/ 22 октября 2010

Попробуйте использовать управление диаграммой: http://msdn.microsoft.com/en-us/library/dd456632.aspx

...