- •Давайте не будем изобретать колесо.
- •Прежде всего: Данные
- •Рисование и Упорство
- •Объект Graphics
- •Начинаем
- •Расположение и Размер
- •Вычислите Общее значение
- •Вычислите Доли и Нарисуйте Диаграмму
- •Рисуем диаграмму
- •Улучшите диаграмму
- •Заголовок
- •Пули (Bullets) и Информация о Компании
- •Расположите После Использования
- •Все сделано!
- •Нарисуем это!
- •Давайте начнем
- •Шаг 1: генерация данных
- •Шаг 2: Получаем элемент управления
- •Повторно используемые значения
- •Шаг 3: Установка полей, промежутки и размеры
- •Шаг 4а: Объекты Graphics и Bitmap
- •Шаг 4b: Вертикальная ось
- •Шаг 4c: Отметки и текст
- •Шаг 4d: Время для проверки
- •Шаг 5: Горизонтальная ось и панели
- •5B. Панели
- •5C. Названия стран
- •Шаг 6: Все показано!
- •Удачные диаграммы: Вторая помощь в круговых диаграммах. Часть 3
- •Разметка формы
- •Давайте начнем писать код
- •Временные переменные
- •Элементы пользовательского ввода
- •Получение данных
- •Создание диаграммы
- •Рисуем Panel
- •Финальное домоводство
- •Опция «Уппс!»
- •Настройка
- •Создаем данные
- •Элементы управления
- •Вертикальная ось
- •Точечные отметки шкалы
- •Проверяем 1, 2, 3
- •Базовая линия (ось X)
- •3D Панели
- •Последние штрихи
- •Удачные диаграммы. Часть 5 - Линейные графики
- •Данные для образца
- •Переменные
- •Внешние границы диаграммы
- •Объект Graphics
- •Вертикальная ось
- •Отметки
- •Горизонтальная ось (a.K.A. Базовая линия)
- •Рисование Линии (Линий)
- •Расчет вертикальной шкалы
- •Создаем и рисуем первый сегмент линии
- •Превращающаяся и исчезающая проблема линий
- •Первый сегмент линии
- •Остающиеся сегменты линии
- •Преобразования
- •Рисуем преобразованную линию
- •Проверяем
- •Отображаем месяцы
- •Отображаем результат
- •Соединения линий
- •Линии сетки
- •Горизонтальные линии сетки
- •Вертикальные линии сетки
- •Последнее отображение
- •Удачные диаграммы. Часть 6 - Динамическая линейная диаграмма
- •Элементы управления формы
- •Инициирующий код
- •Рисование направляющих линий диаграммы
- •Как это работает
- •Отображаем значения
- •Использование Vertical ScrollBar
- •Проверяем
- •Итоги первой демонстрации
- •Затененный график
- •Значения вертикальной оси
- •Код Вертикальных Значений
- •Подвижные направляющие линии
- •Отображаем направляющие линии
- •Направляющие линии и отображенные значения
- •Вертикальные значения
- •Возможные улучшения
- •Охваченные темы
Линии сетки
Хотя определение сетки включает и горизонтальные и вертикальные линии, я решил создать две отдельные процедуры, одну для горизонтальных линий сетки, а другую – для вертикальных. Вы можете захотеть оба набора линий. В очень маленьком 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