Нарисуем это!
В Части 1 мы создавали круговую диаграмму, рисуя непосредственно на форме, с помощью принадлежащего форме объекта Graphics. В этой статье мы собираемся создать гистограмму, снова основанную на некоторых отвлеченных данных – цифрах продаж шести европейских стран. Однако в этот раз мы будем рисовать диаграмму внутри элемента PictureBox.
Вообще, есть небольшое различие между двумя подходами – рисование непосредственно на форме или рисование внутри PictureBox. В этом проекте мы нарисуем диаграмму, когда пользователь щелкнет на кнопке. Как и в Части 1 дисплей будет перерисовываться, когда он будет закрыт или изменен (это известно, как «упорный» рисунок). В примере с круговой диаграммой мы использовали метод формы OnPaint для создания диаграммы заново каждый раз, когда требовалось перерисовать ее заново. Этот подход вполне подходит в большинстве ситуаций. Однако чтобы повысить уровень нашего мастерства, мы собираемся подойти к этой работе с другой стороны, в этот раз мы будем применять объект Bitmap. Если вы новичок в графике, вы можете найти некоторые темы запутанными. Иногда кажется, что вы полностью теряете возможность отследить действия множества графических объектов, отображений, картинок, рисованных поверхностей и их взаимодействия. Но с помощью этих статей все должно оказаться для вас на своих местах. Шаг за шагом я объясню графические процедуры, которые буду использовать для рисования диаграммы. Разделяя код на маленькие части, я надеюсь сделать разные методы легкими для понимания. Так же я включу полностью комментированную демонстрационную версию в Visual Studio Solution которая добавлена к этой статье.
Давайте начнем
Итак, если мы не собираемся помещать код в событие OnPaint на этот раз, то куда он пойдет? Очевидно, один вариант – поместить его в событие кнопки click. Однако чтобы сохранить код в виде легких для следования кусков, я предпочел создать две отдельные процедуры, которые вызываются одна за другой в событии кнопки click. Задачи, предпринятые в соответствии с двумя этими процедурами:
Генерация данных
Рисование диаграммы
Теперь посмотрим на каждую из этих процедур по очереди.
Шаг 1: генерация данных
Ради непрерывности мы будем использовать Structure и ArrayList для данных, потому что этот подход мы использовали в Части 1. Поместите эти операторы вверху формы:
Option Strict On
Imports System.Drawing.Drawing2D
Imports System.Collections
Создайте структуру, подобную той, что использовалась в Части 1 (поместите в код формы, но отдельно от процедур):
Structure GraphData
Dim Country As String
Dim Sales As Short
Sub New(ByVal country As String, ByVal sales As Short)
Me.Country = country
Me.Sales = sales
End Sub
End Structure
Инициируйте ArrayList, чтобы хранить данные. И снова, поместите это в код формы вне процедур:
Dim SalesData As New ArrayList
Процедура GetData генерирует некоторые данные для образца: шесть стран и шесть цифр продаж. (Заглянем в будущее, в Части 3 мы увидим, как заменить их кодом, которые читает данные из файла или принимает введенные пользователем.)
Private Sub GetData()
SalesData.Clear()
' Гарантируем, что сохраняется только один набор сгенерированных данных
SalesData.Clear()
' Генерируем данные и помещаем их в массив
SalesData.Add(New GraphData("Belgium", 834))
SalesData.Add(New GraphData("Greece", 385))
SalesData.Add(New GraphData("Portugal", 672))
SalesData.Add(New GraphData("Spain", 429))
SalesData.Add(New GraphData("Turkey", 715))
SalesData.Add(New GraphData("UK", 942))
End Sub
Теперь у нас есть данные, которые можно применить для создания нашей диаграммы.