Как создать график в c

Создание графиков в WinForms C#

Доброго времени суток! В данной статье мы рассмотрим, как можно создавать графики в WinForms C#. В качестве платформы примера нужно взять .Net Framework 4.8. Далее в ссылки проекта необходимо добавить ссылку на сборку System.Windows.Forms.DataVisualization. Для этого нужно в обозревателе решений нажать правой мыши на элемент меню Ссылки и далее Добавить ссылку. В открывшемся окне необходимо найти сборку и выделить ее галочкой. В панели элементов должен появиться новый элемент — Chart. Обратите внимание, что проект должен быть для версии .Net Framework 4.*. Теперь рассмотрим пример кода:

using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;

namespace ChartsWinForms
<
public partial class MainForm : Form
<
public MainForm()
<
InitializeComponent();

// Установим палитру
chart.Palette = ChartColorPalette.SeaGreen;

// Заголовок графика
chart.Titles.Add("Посетители");

// Добавляем последовательность
for (int i = 0; i < daysOfWeek.Length; i++)
<
Series series = chart.Series.Add(daysOfWeek[i]);

// Добавляем точку
series.Points.Add(numberOfVisitors[i]);
>

Таким образом, вот так просто можно создавать графики в WinForms C#.

Как создать график в c

БлогNot. Chart, примеры в Studio

Chart, примеры в Studio

Компонента Chart (диаграмма) в Visual Studio довольно удобна, хотя для начинающих обычно сложно выбрать из множества её возможностей самые актуальные. К тому же, задокументировано-то всё лишь на MSDN.

Приведу несколько примеров, анализ которых поможет Вам быстро освоить основные приёмы работы с графиками и диаграммами в Visual C++. Все коды проверены в сборке Express 2010.

Пример 1. Добавим на форму компоненту Chart и выведем туда данные

Пример 2. Сделаем красивый Chart программно, можно по нажатию новой кнопки на той же форме

Создаем программно красивый Chart в проекте C++ Windows Forms

Пример 3. Вытащим данные из Chart в TextBox

Пример 4. Сделаем парсер выражений на основе чужого класса — это можно применить для создания полноценного «графопостроителя»

Добавим какой-нибудь не очень сложный парсер, например, класс parser.cpp от Chaos Master.

Кинем файлы parser.cpp и parser.h в папку с кодом (Имя_проекта/Имя_проекта, где находится Form1.h ). В меню скажем Проект — Существующий элемент и добавим файл .cpp (он д.б. в «Файлы исходного кода» Обозревателя решений)

Код выбранного нами парсера старый, так что нам придётся кое-что переделывать, например, строки char * в String ^ и обратно.

Добавим на форму компоненты textBox1 и label1 , напишем демо-код для применения парсера (вызывается по нажатию кнопки):

Возможно, понадобится изменить какие-то ещё мелочи, например, я в файле parser.cpp раскомментарил строку

и изменил в коде exp(1) на exp(1.) — иначе не компилировалось в Studio.

Также ясно, что в начале файла form1.h добавлена строка

Теперь в поле ввода можно писать любые допустимые парсером выражения с переменной x , например, cos(x)+1 , текущее значение переменной x из программы подставится в выражение и его результат динамически подсчитается.

На основе показанных кодов легко сделать, например, программу построения графиков с интерпретацией введённой пользователем функции. Скажем, если выражение для функции с аргументом, обозначенным x , вводится в текстовое поле textBox1 , код построения графика функции в пределах от 0 до 3.14 с шагом, равным 0.1 , будет таким:

P.S. В более новой Studio 2019 пришлось сделать ^f1 вместо f1 и, соответственно, везде f1-> вместо f1.

Заменить фиксированные пределы и шаг на вводимые из формы — элементарно. Вот что вышло для теста:

Пример построения графика на основе парсера функций

Пример 5. Применение разрывов

На форму проекта помещена chart1 со свойством Dock = Fill , построение происходит по загрузке формы.

разрывы по оси y на графике

LiveCharts. Строим графики в WinForms

Вот готовый проект AnalitikProg, если лень читать.

Итак, поехали.
1) Создаем проект WinForm называем его AnalitikProg, платформа .Net Framework 4.7.2
2) Св-ву Name формы присваиваем значение «AnalitikProg».
3) Добавляем на форму элемент ToolStrip, делаем кнопке Display равным «Text».

4) Выделяем кнопку и меняем св-во name на «toolStripButtonGenerate», а св-ву Text значение «Сформировать график».

5) Теперь необходимо добавить nuget-пакет, который называется LiveChart.

6) Обратим внимание, что в панели элементов появились новые элементы:

7) Перетаскиваем на форму элемент CartesianChart и его св-ву Dock выставим Fill.
8) Теперь дважды нажимаем кнопку «Сформировать график», переходим в код и за пределами метода обработчика нажатия по кнопке создаем класс Data, так сказать «заготовочка» для будущей коллекции со значения для графика.

9) Перед методом Form1 создаем переменную типа List<Data> , а в методе Form1 после компонента initializeComponent() инициализируем обобщенную коллекцию в которой будут содержаться элементы типа Data и заполним ее данными.
Значит легенда такая, программа нужна трейдеру, чтобы просматривать динамику изменения его заработка.

Сейчас код выглядит так:

10) Теперь переходим к кнопке, кликаем по ней 2 раза и забиваем в нее следующий код.

12) В общем то все, осталось запустить и проверить

Могу порекомендовать сходить на сайт поддержки библиотеки https://lvcharts.net там есть много интересной информации и раскрыты все возможности библиотеки.

Рисование сеточных графиков трехмерных функций и изолиний к ним

Статья представляет собой нечто вроде “практического руководства” для построения весьма интересных трехмерных графиков функций вида z=f(x,y), с примером реализации на C#.

Рисовать будем в компоненте Chart, разумеется, можно использовать любой canvas-подобный элемент. При большом количестве точек будут наблюдаться задержки в рисовании, но этот компонент легко использовать и для демонстрации он вполне сгодится.

Строим график

Для этого нам понадобится сетка или поле, каждый узел которой будет иметь координаты x, y и содержать значение z. Эту сетку можно заполнять любым способом, раз мы строим график функции, то будем заполнять ее значениями этой функции (z=f(x,y)). Шаг между двумя последовательными значениями x или y выберем равный одному, для более простой и наглядной демонстрации, размерность сетки N x N. Значения в узлах сетки достаточно считать один раз. Для преобразования трехмерных координат в двухмерные и для поворота графика будем использовать матрицу поворота и углы Эйлера.

Обозначим углы α, β и γ углами a, b и c соответственно и будем использовать их значения в градусах. Запишем матрицу через коэффициенты:

Запишем итоговое преобразование из трехмерных координат в двухмерные:
X=l₁x+l₂y+l₃z
Y=m₁x+m₂y+m₃z
x,y,z –это “внутренние” координаты для графика, X,Y – итоговые экранные координаты. Коэффициенты n1,n2 и n3 нам для этой задачи не понадобятся.

Добавим события, при которых будут меняться углы и будет происходить вращение графика. Например, это будет движение курсора при зажатой левой кнопке мышки и изменение углов b и с:

Проверим на тестовой функции z=x 2 +y 2 :

Вид сверху на функцию где видно ту самую сетку и показаны значения в узлах.

Вид на функцию под углом.
Возможно, стоит по-другому изменять углы, при вращении используя все 3 угла и использовать сетку с шагом меньше 1, но мы упростили ситуацию.

Строим изолинии

Воспользуемся алгоритмом Движущихся квадратов (“Marching squares”), в Википедии дано достаточно подробное описание. Гугл также выдает очень хорошую статью, где описывается этот алгоритм и реализовывается на C#.
Суть кратко:
1. Требуется найти начальную позицию — откуда пойдет изолиния.
2. Затем сравнить значения в соседних узлах сетки, которые образуют квадрат с вершинами: (x_i,y_j), (x_i-1,y_j), (x_i,y_j-1), (x_i-1,y_j-1).

3. Выбрать дальнейшее направление обхода, в зависимости от полученного значения на шаге 2, и перейти в следующую точку, в которой опять проделать шаг 2.
4. Выполнять до тех пор, пока не попадем обратно в начальную позицию или не достигнем края сетки.
Всего может быть 16 вариантов:

Не будем писать весь код заново, возьмем часть кода из той статьи и изменим под нашу задачу:

Попробуем опять же на нашей тестовой функции z=x 2 +y 2 :

Как видно на картинке алгоритм довольно успешно справился и отделил точки где значение функции выше 5, но немного правее и выше. Изолиния получилась угловатой, поэтому проведем интерполяцию. Смысл интерполяции в том, что мы на основании значениях z в соседних узлах сетки вычисляем более близкое значение x, или y, к реальной изолинии, что делает изолинию более правдоподобной.
Будем использовать формулу линейной интерполяции:
x=(Z-f(x_i-1,y_j)/(f(x_i,y_j)-f(x_i-1,y_j))+x_i-1,
y=(Z-f(x_i,y_j-1)/(f(x_i,y_j)-f(x_i,y_j-1))+y_j-1,
где Z- значение, на котором нужно провести изолинию.
Интерполирование по координате x, или по координате y, выбирается в зависимости от направления движения для предыдущего и следующего шагов.
Напишем для этого такой, не очень хороший код:

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


Пример «ненужных точек», которые мы исключили.
Из возможных улучшений следует отметить, что наша реализация будет строить все изолинии только для монотонно возрастающих (для убывающих следует поменять знак на “>”) функций. Для функций периодически возрастающих и убывающих следует изменить, например функцию поиска начальной позиции и выполнять её несколько раз.

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