Шаг 4b: Вертикальная ось

    Вертикальная ось диаграммы (в технике известная, как ось Y) будет нарисована внутри PictureBox. Мы отодвинем ее от границы, используя значения, которые мы присвоили переменным TopMargin, LeftMargin и BaseMargin.     У этой оси будут маленькие точечные отметки с равными промежутками, каждый будет обозначать 100 продаж. В дополнение, значение каждой отметки будет написано возле отметки. Рисунок ниже показывает пример части вертикальной оси. Всю ее вы можете видеть на рисунке вначале статьи:

Следующий код устанавливает начальную точку и конечную точку вертикальной оси:

Dim StartPoint As New Point(LeftMargin, PBBarChart.Height - BaseMargin)

Dim EndPoint As New Point(LeftMargin, TopMargin)

    Названия переменных StartPoint и EndPoint не нуждаются в объяснении, но понятие Point (точка) стоит упоминания. Нам хорошо знакомо понятие точки – это определенное место, которое может быть определено определенным способом. В графике .NET точка (Point) идентифицируется ее X-положением (как далеко она отдалена от левого края) и ее Y-положением (как далека она от верха).     В данном проекте мы измеряем эти два значения в пикселях, потому что эта единица используется для определения позиций на экране. Важно понимать, что Point – это не просто положение в пространстве, фактически это Объект, завершенный в своих свойствах и методах.     Вы видите, что StartPoint объекта Point имеет свою X-позицию, установленную в строке с левым полем, которое мы установили раньше; ее Y-позиция вычислена перемещением от основания PictureBox на расстояние, равное BaseMargin.     EndPoint оси имеет X-значение, такое же, как и у StartPoint, чего можно было ожидать (в конце концов, это вертикальная линия). Ее Y-значение установлено в точке, которая отступает от верхнего края PictureBox на значениие TopMargin. Вооружившись начальной и конечно точками, мы берем перо и рисуем линию:

Dim LinePen As New Pen(Color.Black, 2)

g.DrawLine(LinePen, StartPoint, EndPoint)

    Если вы вводите код по мере прочтения статьи, вы можете поинтересоваться, почему вы не можете видеть, как появляется то, что рисуется. Причина в том, что мы нарисовали линию объекта, который еще не видим для пользователя. На самом деле, мы используем технику, известную как двойная буферизация, при которой мы создали объект изображения того же размера, что и PictureBox и скрыто используем это изображение. На данном уровне мы еще не присвоили это изображение PictureBox’у в качестве его изображения.

Шаг 4c: Отметки и текст

    Из-за того, что мы сами генерировали данные во время разработки, мы знаем, что максимальное число продаж равно 942. Поэтому мы заранее знаем, что будет безопасно нарисовать вертикальную ось, которая будет содержать значения от 0 до 1000, и все значения продаж будут находиться в промежутке между этими двумя крайними значениями. В дальнейшем мы будем принимать пользовательские данные во время выполнения и динамически рассчитывать, сколько будет нужно отметок. Но пока что мы будем делать это легким (ну ладно, более легким) способом.     Чтобы решить, как растягивать пространство десяти отметок, нам нужно прежде всего узнать длину вертикальной оси:

Dim VertLineLength As Integer = PBBarChart.Height - (BaseMargin + TopMargin)

    Это даст нам возможность рассчитать точное расстояние между отметками. Размещая метки от 0 до 1000 с интервалом 100, запоминаем:

Dim VertGap As Integer = CInt(VertLineLength / 10)

    Я произвольно выбрал установить (горизонтальную) длину каждой отметки равной 5 пикселей. Тогда следует, что начальная точка каждой отметки должна быть в 5 пикселях слева от вертикальной оси. Конечная точка каждой отметки будет на самой вертикальной оси. Это и есть необходимые X-позиции и они являются одними и теми же для каждой отметки. Y-позиции (которые вы получите, отсчитав количество пикселей вниз от верха) должны меняться для каждой отметки, потому что мы рисуем десять их на равном расстоянии на вертикальной оси. Расстояние между ними, следовательно, должно быть значением, которое мы только что вычислили – VertGap.

Dim TickSP As New Point(LeftMargin - 5, StartPoint.Y - VertGap)

Dim TickEP As New Point(LeftMargin, StartPoint.Y - VertGap)

У нас есть вся необходимая информация для создания отметок и текста 100, 200, 300 и т.д. Давайте установим шрифт для текста:

Dim ValueFont As New Font("Arial", 8, FontStyle.Regular)

И мы можем повторить это 10 раз в блоке кода, который нарисует отметки от низа до верха и в то же время добавит сотни в виде текста:

For i As Integer = 1 To 10

' Отметка

g.DrawLine(New Pen(Color.Black), TickSP, TickEP)

' Значение отметки в виде текста

g.DrawString(CStr(i * 100), ValueFont, Brushes.Black, 2, TickSP.Y - 5)

' Сброс y-позиции, перемещение на 10% вверх по вертикальной линии

TickSP.Y -= VertGap

TickEP.Y -= VertGap

Next

    Единственный код, который требует дополнительного объяснения, это тот, который использует DrawString, чтобы нарисовать текст возле отметок. Вы можете заметить, что Y-позиция начала текста была смещена на 5 пикселей вверх, чем начало самой отметки (TickSP, Y-5). Это просто, потому что X,Y позиция (исходная точка) нарисованной строки является самой верхней точкой воображаемого прямоугольника, в котором изображен текст. Поэтому, чтобы поместить середину текста приблизительно на один уровень с отметкой, эта исходная точка должна быть смещена на пять пикселей вверх на странице.