Линии сетки
Хотя определение сетки включает и горизонтальные и вертикальные линии, я решил создать две отдельные процедуры, одну для горизонтальных линий сетки, а другую – для вертикальных. Вы можете захотеть оба набора линий. В очень маленьком PictureBox, имеющем оба набора линий, это может сбивать с толку, и вы можете предоставить пользователю выбор - только горизонтальные, только вертикальные, все или никаких линий.
Горизонтальные линии сетки
Основываясь на том, что мы выяснили в этой статье, я надеюсь, вы узнаете следующую процедуру, которая рисует горизонтальные линии сетки, очень легкую для повторения:
Private Sub DrawHorizontalLines()
' Вычисляем вертикальные равные промежутки
Dim VertGap As Integer = CInt(VertLineLength / 10)
' Устанавливаем начальную и конечную точки
' = левому и правому полям на базовой линии
Dim StartPoint As New Point(LeftMargin + 3, PBLineChart.Height - BaseMargin)
Dim EndPoint As New Point(PBLineChart.Width, PBLineChart.Height - BaseMargin)
' Начальные настройки
Dim LineStart As New Point(StartPoint.X, StartPoint.Y - VertGap)
Dim LineEnd As New Point(EndPoint.X, StartPoint.Y - VertGap)
Dim ThinPen As New Pen(Color.LightGray, 1)
For i As Integer = 1 To 10
' Рисуем линию
g.DrawLine(ThinPen, LineStart, LineEnd)
' Сбрасываем начальную и конечную позиции Y, перемещая вертикальную линию
LineStart.Y -= VertGap
LineEnd.Y -= VertGap
Next
ThinPen.Dispose()
End Sub
Процедура подобна той, которую мы использовали для создания отметок на вертикальной оси. Фактически, как вы, вероятно, можете сказать, я просто повторно использую этот код, меняя начальную и конечную точки, исключая текст и используя более тонкое перо светлого цвета.
Вертикальные линии сетки
Тем же способом, я использовал код, который рисует названия месяцев и улучшил его так, что он рисует вертикальные линии по всей диаграмме:
Private Sub DrawVerticalGridLines()
Dim ThinPen As New Pen(Color.Bisque, 1)
' Вычисляем длину базовой линии, нарисованной кодом, написанным выше
BaseLineLength = PBLineChart.Width - (LeftMargin + RightMargin)
' Вычисляем ширину каждого сегмента линии
LineWidth = (BaseLineLength / Sales.Length)
' Устанавливаем начальную току первой строки
Dim LineStartX As Integer = CInt(LeftMargin + 30)
For i As Integer = 0 To Months.Length - 1
g.DrawLine(ThinPen, LineStartX, TopMargin, LineStartX, PBLineChart.Height - (BaseMargin + 4))
' Двигаем начальную точку вправо
LineStartX += CInt(LineWidth)
Next
ThinPen.Dispose()
End Sub
Единственное существенное отличие заключается в замене DrawString на DrawLine, присвоившее соответствующие значения параметров.
Последнее отображение
Добавьте вызов этих двух процедур в событие кнопки Click.
Private Sub btnDraw_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnDraw.Click
DrawOutline()
DrawHorizontalLines()
DrawVerticalGridLines()
DrawTheLine()
ShowMonths()
FinalDisplay()
End Sub
Обратите внимание, что линии сетки рисуются прежде, чем рисуются линии значений продаж. Это важно, иначе линии сетки будут стремиться затереть линии продаж, когда будут проходить над ними и сделают вид незавершенным. Но мы закончили! Очень простая, но полезная линейная диаграмма, которую вы можете изменить или улучшить многими способами, как вам будет необходимо.
Итоги
Вы можете быть удивлены, какое большое количество кода вам пришлось написать, чтобы получить эту довольно просто выглядящую диаграмму. Со многими вещами это происходит при передаче идей с бумаги на экран, вещи не так просты, насколько кажутся. Эта хорошая мысль, которая требует 30 секунд для планирования в нашем мозгу и завершается через 30 часов упорной работы для внедрения в жизнь – о! радость программирования! В этой статье мы узнали или использовали следующее:
Bitmap
Brush
Создали Graphics
Двойная буферизация
Рисовали линию
Рисовали строку
Font
GraphicsPath
Объект Graphics
Перо
Точка
Измерение
Преобразования
Позиция X
Позиция Y