Как рисовать в Windows Forms c

Обновлено: 02.07.2024

Инструкции по VS2022

Примечание 1. При первом добавлении нашей сборки AnyCpu на панель инструментов и размещении диаграммы в форме VS2022 должен работать с правами администратора. Последующее использование не потребует привилегий. При желании вы можете установить нашу сборку в подпапку \x64\DotNet64, которая не требует привилегий администратора в первый раз, однако измените параметр сборки проекта для платформы/ЦП на x64, чтобы создать чистую сборку x64.
1. Когда окно конструктора находится в фокусе, щелкните вертикальную вкладку [Панель инструментов],
2. Щелкните правой кнопкой мыши область под вкладкой [Общие],
3. Выберите [Добавить вкладку].
4. Введите [Gigasoft] в качестве имени вкладки,
5. Щелкните правой кнопкой мыши область под новой вкладкой [Gigasoft],
6. Выберите [Выбрать элементы. ],
7. Если он не выбран, щелкните левой кнопкой мыши вкладку [Компоненты .NET Framework]
8. Щелкните левой кнопкой мыши [Обзор. ] и найдите файл «Gigasoft.ProEssentials.dll», который находится в нашем подкаталоге \DotNetAnyCpu, где вы установили ProEssentials. По умолчанию он должен находиться в папке «C:\ProEssentials9\DotNetAnyCpu\»,
9. Выберите файл "Gigasoft.ProEssentials.dll" и закройте диалоговое окно [Открыть файл],
10. В диалоговом окне [Выбрать элементы панели инструментов] теперь должны отображаться 5 выделенных элементов управления: Pe3do, Pego, Pepco, Pepso и Pesgo.
11. Закройте диалоговое окно, и на вкладке Gigasoft отобразятся 5 компонентов ProEssentials, как показано на нижнем правом изображении.
Примечание 2. Попытка добавить нашу сборку (DotNet32) в набор инструментов VS2022 приведет к ошибке, поскольку конструктор VS2022 является 64-разрядным.
Примечание 3. Если вы развертываете готовый проект и предпочитаете поддерживать чистый x64 или чистый x86, закройте окно конструктора, в обозревателе решений удалите ссылку и замените любой из наших других ссылок. Теперь проект будет поддерживать компиляцию как чистый x64, чистый x86 или AnyCpu, соответствующий добавленной ссылке. Чтобы снова добавить наши графики на форму через Конструктор, меняем Reference на наши сборки AnyCpu или DotNet64 x64.

Инструкции по VS2019

Примечание 1. При первом добавлении нашей сборки AnyCpu на панель инструментов VS2019 должен работать с правами администратора. Последующее использование не потребует привилегий. При желании вы можете установить нашу сборку в подпапку \DotNet32, которая не требует привилегий администратора в первый раз, однако измените параметр сборки проекта для платформы/ЦП на x86.
1. Когда окно конструктора находится в фокусе, щелкните вертикальную вкладку [Панель инструментов],
2. Щелкните правой кнопкой мыши область под вкладкой [Общие],
3. Выберите [Добавить вкладку].
4. Введите [Gigasoft] в качестве имени вкладки,
5. Щелкните правой кнопкой мыши область под новой вкладкой [Gigasoft],
6. Выберите [Выбрать элементы. ],
7. Если он не выбран, щелкните левой кнопкой мыши вкладку [Компоненты .NET Framework]
8. Щелкните левой кнопкой мыши [Обзор. ] и найдите файл «Gigasoft.ProEssentials.dll», который находится в нашем подкаталоге \DotNetAnyCpu, где вы установили ProEssentials. По умолчанию он должен находиться в папке «C:\ProEssentials9\DotNetAnyCpu\»,
9. Выберите файл "Gigasoft.ProEssentials.dll" и закройте диалоговое окно [Открыть файл],
10. В диалоговом окне [Выбрать элементы панели инструментов] теперь должны отображаться 5 выделенных элементов управления: Pe3do, Pego, Pepco, Pepso и Pesgo.
11. Закройте диалоговое окно, и на вкладке Gigasoft отобразятся 5 компонентов ProEssentials, как показано на нижнем правом изображении.
Примечание 2.Попытка добавить нашу сборку x64, расположенную в \x64\DotNet64, в набор инструментов VS2019 и более ранних версий приведет к ошибке, поскольку конструктор VS2019 является 32-разрядным.
Примечание 3. Если вы развертываете готовый проект и предпочитаете изменить цель на чистый x64 или чистый x86, закройте окно конструктора, в обозревателе решений удалите нашу ссылку и замените любой из наших других ссылок. Теперь проект будет поддерживать компиляцию как x64, x86 или AnyCpu, соответствующий добавленной ссылке. Чтобы снова добавить наши графики на форму через Дизайнер, меняем Reference на наши сборки AnyCpu или DotNet32 x86.

4) Дважды щелкните инструмент [Pego] на панели инструментов. Это помещает экземпляр компонента Pego в "Form1.cs".

Щелкните левой кнопкой мыши в правом нижнем углу элемента управления и перетащите его вправо вниз, чтобы заполнить клиентскую область формы Form1. На соседнем изображении показано то, что вы видите.

Это состояние ProEssentials Graph по умолчанию. Состояние по умолчанию имеет одно подмножество с четырьмя точками данных. В ходе создания собственных диаграмм вы зададите свойства PeData.Subsets и PeData.Points, которые определяют количество данных, которые будет содержать ваша диаграмма. Затем вы будете передавать данные через двумерный массив свойств PeData.Y[subset, point].

ProEssentials использует термины "Подмножества" и "Точки", но вы можете рассматривать их как строки и столбцы. Передача данных так же проста, как заполнение каждого подмножества данными на сумму баллов.

Чтобы диаграмма соответствовала размеру своего контейнера, давайте изменим настройку Dock диаграммы.

Щелкните левой кнопкой мыши элемент управления Pego в Form1, чтобы выделить его.

В главном меню выберите [Вид] и [Окно свойств]

В [Окне свойств] прокрутите и найдите раздел «Макет», а затем элемент Dock.

Измените настройку Dock, щелкнув центральную часть или режим "Заливка".

5) Мы рекомендуем установить версии цвета фона, шрифта и т. д. для родительской формы, поскольку ProEssentials будет использовать настройки родительской формы, чтобы обеспечить единообразие элементов управления одного уровня.

Мы также рекомендуем кодировать настройки вашего ресурса, так как это создает запись для вас и других, какие настройки используются. И вы можете повторно использовать этот код в других областях для других диаграмм.

6) Дважды щелкните строку заголовка/подписи Form1, чтобы открыть представление кода для «Form1.cs» с инициализированным событием Form1_Load по умолчанию.

Курсор будет находиться в разделе кода Form1_Load, введите в этот раздел следующий код.

Вы можете копировать и вставлять, но ввод нескольких строк этого кода вручную поможет вам ознакомиться с пространством имен Gigasoft.ProEssentials.

Примечание: добавление следующего объявления using в начало файла "Form1.cs" сократит синтаксис перечисления.
с помощью Gigasoft.ProEssentials.Enums;

pego1.PeString.MainTitle = "Привет, мир!";
pego1.PeString.SubTitle = "";

pego1.PeData.Subsets = 2; // Подмножества = строки //
pego1.PeData.Points = 6; // Точки = Столбцы //
pego1.PeData.Y[0, 0] = 10; pego1.PeData.Y[0, 1] = 30;
pego1.PeData.Y[0, 2] = 20; pego1.PeData.Y[0, 3] = 40;
pego1.PeData.Y[0, 4] = 30; pego1.PeData.Y[0, 5] = 50;
pego1.PeData.Y[1, 0] = 15; pego1.PeData.Y[1, 1] = 63;
pego1.PeData.Y[1, 2] = 74; pego1.PeData.Y[1, 3] = 54;
pego1.PeData.Y[1, 4] = 25; pego1.PeData.Y[1, 5] = 34;

pego1.PeString.PointLabels[0] = "Ян";
pego1.PeString.PointLabels[1] = "Фев";
pego1.PeString.PointLabels[2] = "Мар";
pego1.PeString.PointLabels[3] = "Апр";
pego1.PeString.PointLabels[4] = "Май";
pego1.PeString.PointLabels[5] = "Июнь" ;

pego1.PeString.SubsetLabels[0] = "Для .Net Framework";
pego1.PeString.SubsetLabels[1] = "или MFC, ActiveX, VCL";
pego1.PeString.YAxisLabel = "Простой качественный рендеринг";

pego1.PeColor.SubsetColors[0] = Color.FromArgb(60, 0, 180, 0);
pego1.PeColor.SubsetColors[1] = Color.FromArgb(180, 0, 0, 130) ;

pego1.PeColor.BitmapGradientMode = false;
pego1.PeColor.QuickStyle = Gigasoft.ProEssentials.Enums.QuickStyle.LightShadow;
pego1.PeTable.Show = Gigasoft.ProEssentials.Enums.GraphPlusTable.Both ;
pego1.PeData.Precision = Gigasoft.ProEssentials.Enums.DataPrecision.NoDecimals;
pego1.PeFont.Label.Bold = true;
pego1.PePlot.Method = Gigasoft.ProEssentials.Enums .GraphPlottingMethod.Bar;
pego1.PePlot.Option.GradientBars = 8;
pego1.PePlot.Option.BarGlassEffect = true;
pego1.PeLegend.Location = Gigasoft.ProEssentials.Enums.LegendLocation .Left;
pego1.PePlot.DataShadows = Gigasoft.ProEssentials.Enums.DataShadows.ThreeDimensional;
pego1.PeFont.FontSize = Gigasoft.ProEssentials.Enums.FontSize.Large;
pego1.PePlot .SubsetLineTypes[0] = Gigasoft.ProEssentials.Enums.LineType.MediumSolid;
pego1.PePlot.SubsetLineTypes[1] = Gigasoft.ProEssentials.Enums.LineType.MediumDash;

// Это включает горячие точки данных, но нам нужно определить код в событии HotSpot //
pego1.PeUserInterface.HotSpot.Data = true;

// Эти настройки будут использоваться для всех графиков //

pego1.PeConfigure.RenderEngine = Gigasoft.ProEssentials.Enums.RenderEngine.Direct2D;
pego1.PeConfigure.PrepareImages = true;
pego1.PeConfigure.CacheBmp = true;
pego1.PeConfigure .AntiAliasGraphics = true;
pego1.PeConfigure.AntiAliasText = true;
// Вызовите это в конце установки свойств //
pego1.PeFunction.ReinitializeResetImage();

Код вашего проекта должен выглядеть примерно так.

7) Приведенный выше код активировал событие DataHotSpot, поэтому мы должны поместить соответствующий код в событие DataHotSpot.

Щелкните левой кнопкой мыши элемент управления Pego в Form1, чтобы выделить его.

В главном меню выберите [Вид] и [Окно свойств]

В [окне свойств] щелкните значок события.

В доступных событиях дважды нажмите PeDataHotSpot

При этом открывается представление кода "Form1.cs" с курсором в обработчике событий pego1.PeDataHotSpot.

Добавьте следующий код в событие pego1.PeDataHotSpot.

System.Windows.Forms.MessageBox.Show("Подмножество" + e.SubsetIndex.ToString() +
", Point " + e.PointIndex.ToString() + " со значением " + < br />pego1.PeData.Y[e.SubsetIndex, e.PointIndex].ToString());

8) Сохраните и запустите проект. Ваш проект покажет изображение следующим образом. Наведите указатель мыши на полосу и нажмите, чтобы вызвать событие DataHotSpot.

На этом пошаговое руководство завершено.

Пожалуйста, прочтите оставшиеся разделы главы 2 и просмотрите демонстрационный код и документацию, которые устанавливаются вместе с eval/продуктом.

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

Пуск/ProEssentials v9/PeDemo

Спасибо за исследование. Если у вас есть вопросы, свяжитесь с нашими инженерами.

Наша миссия

Мы инженеры

ProEssentials был создан профессиональными инженерами-электриками, которым требовались собственные компоненты для построения графиков. Присоединяйтесь к нашему большому списку ведущих инженерных компаний, использующих ProEssentials.

Спасибо

Благодарим вас за то, что вы являетесь клиентом ProEssentials, а также за изучение механизма построения диаграмм ProEssentials.

Компоненты для создания диаграмм: быстрые, простые, надежные, красивые, критически важные, одобренные профессионалами.

Диаграмма. Элемент управления Chart визуализирует ваши данные.

Далее: выберите «Свойства», щелкнув правой кнопкой мыши диаграмму. Таким образом вы можете добавить серии и заголовки.

И: в нашем примере удалите серию Series1 по умолчанию, добавленную Visual Studio.

Пример. Теперь мы можем использовать Chart. На следующем шаге мы будем использовать обработчик событий Form1_Load для инициализации только что добавленной диаграммы. Чтобы добавить Form1_Load, дважды щелкните окно формы в Visual Studio.

В Form1_Load мы назначаем массив строк (серии) и массив целых чисел (точки). В цикле for мы добавляем строки в коллекцию Series и добавляем целые числа в коллекции Points этой серии.

Совет. Цикл приводит к двум сериям: серия "Кошки" с баллом 1 и серия "Собаки" с баллом 2.

Информация: они отражены в гистограмме, показанной на снимке экрана выше.

При вызове Series.Add можно передать строку, которая станет именем серии. Объект Series возвращается функцией Add. Затем вы можете назначить локальную переменную результату добавления и получить доступ к коллекции точек в серии.

И еще: вызвав Points.Add, вы можете установить значения. Мы передаем элементы из нашего массива.

Палитра. Некоторые программисты могут быть не склонны к творчеству. В этом может помочь свойство Palette типа Chart. Вы можете использовать перечисляемую константу ChartColorPalette в выражении присваивания.

Совет. При работе с диаграммой попробуйте изменить палитру и поэкспериментировать с константами ChartColorPalette.

Сохранить изображение. Иногда вам нужно будет сохранить диаграмму в файл изображения. Метод SaveImage берет графическое представление диаграммы в том виде, в котором она отображается на экране, и записывает ее в указанный вами файл или поток.

Примечание. В приведенном выше примере попробуйте добавить этот оператор, а затем извлеките файл chart.jpg.

Сводка. Мы рассмотрели тип диаграммы в библиотеке Windows Forms. С помощью Chart вы можете автоматически создавать графики на основе данных.Затем эти гистограммы можно использовать в различных местах или отображать непосредственно в программе Windows Forms.

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

В этом посте мы рассмотрим:

Отображать или скрывать линию оси диаграммы
Отображать названия осей
Управление перекрывающимися метками осей
- Отображать метки осей в шахматном порядке (новинка)
Отображение или скрытие линии оси диаграммы

FlexChart по умолчанию не отображает линию вертикальной оси, поскольку он соответствует тенденциям современного стиля, подчеркивающим минималистичный дизайн. Это поведение можно изменить, задав для свойства AxisLine любой из осей значение true или false.

Следующий фрагмент делает ось Y видимой во FlexChart:

Рис. 1. Скрытие линии оси диаграммы

Все оси диаграммы можно идентифицировать по заголовку, который помогает уточнить отображаемые значения. В FlexChart это можно сделать, задав свойство Title любой из осей. Вы также можете настроить шрифт и цвет заголовка с помощью свойства TitleStyle.

Следующий фрагмент задает и стилизует заголовки осей:

Рисунок 2. Стиль заголовка оси

Управление перекрывающимися метками осей

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

FlexChart предоставляет гибкие возможности для любого сценария. Он может отображать все метки, поворачивать метки, скрывать перекрывающиеся метки, обрезать или обертывать длинные метки и даже располагать метки в шахматном порядке, чтобы сделать диаграмму наиболее удобной для чтения.

Настройте поведение метки перекрывающейся оси в FlexChart, задав свойство оси OverlappingLabels и свойство StaggeredLines.

Параметры перекрытия включают: Показать, Авто (скрывает, чтобы избежать перекрытия), Обрезать и Переносить по словам.

Рисунок 3. Наложение или смещение меток осей

Кроме того, вы также можете поворачивать метки, задав свойство LabelAngle. FlexChart даже имеет интеллектуальную встроенную функцию, в которой вы можете установить для свойства LabelAngle значение Double.NaN, и он будет поворачивать метки только при необходимости.

Рисунок 4. Метки оси вращения

Форматировать метки осей

Совет. Чтобы создать современную диаграмму с минимальным дизайном, отформатируйте метки длинной оси, чтобы они отображались с меньшим количеством цифр, например 40 000 000 миллионов отображались как 40 M.

В следующем фрагменте показана пара примеров.

Рисунок 5. Формат меток оси даты

Настройка делений, линий сетки и интервалов

FlexChart позволяет настраивать каждый элемент интервала оси, например основные и второстепенные линии сетки и деления. В следующем фрагменте показано, как установить некоторые из этих свойств.

Рисунок 6. Стиль линий сетки и делений оси

Настроить иерархическую группировку осей

Чтобы визуально упорядочить метки осей по категориям или кварталам, вы можете включить группировку осей. FlexChart поддерживает гибкие параметры от простых до пользовательских. Если в вашем наборе данных уже есть поле группировки, вы можете просто установить для свойства оси GroupNames имя поля, по которому выполняется группировка.

Чтобы отобразить более одного уровня группы на оси, укажите строку, разделенную запятыми, для свойства GroupNames.

Вы также можете настроить отображение горизонтальных и вертикальных линий между группами, чтобы упростить визуализацию.

Рисунок 7. Настройка группировки осей

Но это еще не все! Вы можете использовать иерархические данные, указав свойство GroupItemsPath оси. Вы также можете сгруппировать по осям числа и даты, которые работают с любым набором данных.

Чтобы обеспечить группировку числовой оси и оси дат, FlexChart включает настраиваемый интерфейс IAxisGroupProvider и пару примеров для начала работы.

Изменить масштаб оси

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

FlexChart будет использовать логарифмическую ось, если вы установите для оси свойство LogBase.

Рисунок 9. Создание логарифмических осей

Включить прокрутку диапазона с полосами прокрутки оси

Полосы прокрутки оси позволяют пользователю масштабировать ось и масштабировать диаграмму на лету. Полосы прокрутки осей можно использовать, чтобы визуализировать больше данных на меньшем пространстве или позволить пользователю детализировать область графика без особого дополнительного кода со стороны разработчика.
С помощью FlexChart вы можете включить полосу прокрутки оси диапазона. одной строкой кода.

Полоса прокрутки диапазона — это нечто большее, чем стандартная полоса прокрутки, поскольку она позволяет пользователю регулировать масштаб оси для существенного «увеличения» диаграммы.

Построение нескольких осей

Смешивание разных масштабов с несколькими осями и типами графиков, если иногда необходимо визуализировать самые сложные наборы данных.

С помощью FlexChart вы можете визуализировать различные типы диаграмм в одной области графика. Участки могут иметь общие оси или у каждого свои. Вы даже не ограничены двумя осями Y, поскольку FlexChart может отображать любое количество осей X или Y, как показано ниже.

Рис. 11. Добавление нескольких осей Y

Чтобы построить серию на второстепенных осях, вы можете определить ее свойства AxisX и AxisY как новые объекты оси. Затем просто установите положение оси и другие свойства, чтобы настроить отображение. Оси добавляются на диаграмму после их назначения ряду.

Примеры ссылок

Чтобы увидеть все эти функции в действии, загрузите образец ChartAxis101: WinForms | UWP | ВПФ

Или запустите демо-версию FlexChartExplorer из WinForms или WPF Demo Explorer.

Если вы хотите создать быструю диаграмму, в Visual Studio 2010 есть бесплатный и простой в использовании компонент. Ян Эллиот показывает, как его использовать.

Ваша первая диаграмма

Использовать элемент управления диаграммой очень просто. Просто выберите его на панели инструментов, вы найдете его сгруппированным с другими элементами управления данными и поместите его в форму. Вы сразу же увидите гистограмму по умолчанию, которую можно использовать для размещения и изменения размера элемента управления.

Все это хорошо, но первый вопрос, который возникает при использовании любого элемента управления диаграммой, заключается в следующем:

Как передать данные в элемент управления?

Как вы, наверное, догадались, ответ связан с объектом-коллекцией, который является современным способом указания данных. Элемент управления Chart использует коллекции довольно простым способом, но обеспечение гибкости, необходимой для отображения ряда диаграмм и различных форм данных, может показаться сложным.

Начнем с простых данных. Диаграмма группирует данные в серии, каждая из которых определяет, как данные будут отображаться, оси, легенды и т. д. Каждая серия также имеет коллекцию точек, которая содержит данные для построения, и для нашего первого графика по умолчанию это все, что нам нужно для работы. .

Коллекция Points действительно является коллекцией объектов Point. Каждый объект Point имеет свойства, которые можно использовать для определения способа отображения точки. Все, что вам нужно знать на этом раннем этапе, это то, что объект Point может хранить одно значение x и массив значений y. Вы можете опустить значение x, если диаграмма, которую вы хотите создать, представляет собой гистограмму, поскольку в этом случае каждая точка отображается в том порядке, в котором она добавляется в коллекцию точек. Вы также можете просто указать одно значение y.

Поэтому, чтобы нанести одну точку на гистограмму по умолчанию, нам просто нужен точечный объект с одним значением y, которое определяет высоту первого и единственного столбца.

Чтобы упростить присвоение имен, добавьте в начало программы:

Теперь вы можете создать точечный объект и установить его значение Y равным 3:

Это не единственный способ создать точку или установить для нее значение Y равным 3, но он работает.

Теперь у нас есть объект Point, который мы можем добавить в серию в коллекции Series диаграммы. Диаграмма начинает жизнь с одной серии по умолчанию, но чтобы продемонстрировать, как все это работает, давайте сначала очистим коллекцию, чтобы начать с нуля:

Затем нам нужно добавить новую серию, и все, что вам нужно определить на этом этапе, — это ее имя:

Теперь у нас есть серия в коллекции серий, и мы можем добавить к ней точку: вы можете добавить точку, используя индексы серии в коллекции:

или вы можете использовать название серии для ее идентификации:

На этом этапе, предполагая, что пользовательский интерфейс успел обновиться, вы увидите линейчатую диаграмму с одной полосой.

Очевидно, что если вы добавите больше точек, вы увидите больше полос, но есть одна тонкость, с которой нужно разобраться, прежде чем двигаться дальше. Предположим, вы изменили значение y, хранящееся в точке, добавленной в коллекцию Series Points. Это меняет диаграмму?

Если вы попробуете это:

Вы увидите, что столбик теперь имеет высоту 4 единицы, поэтому набор баллов определяет отображаемую диаграмму.

Это означает, что вы не можете повторно использовать объекты Point, вы должны создать по одному объекту для каждой точки данных, которую вы хотите отобразить, и расположить таким образом. неэффективно.

Читайте также: