- •Давайте не будем изобретать колесо.
- •Прежде всего: Данные
- •Рисование и Упорство
- •Объект 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
- •Проверяем
- •Итоги первой демонстрации
- •Затененный график
- •Значения вертикальной оси
- •Код Вертикальных Значений
- •Подвижные направляющие линии
- •Отображаем направляющие линии
- •Направляющие линии и отображенные значения
- •Вертикальные значения
- •Возможные улучшения
- •Охваченные темы
Отметки
Чтобы правильно разместить 10 отметок, нам нужно знать длину вертикальной оси:
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 позиция (исходная точка) нарисованной строки является самой верхней точкой воображаемого прямоугольника, в котором изображен текст. Поэтому, чтобы поместить середину текста приблизительно на один уровень с отметкой, эта исходная точка должна быть смещена на пять пикселей вверх на странице.
Горизонтальная ось (a.K.A. Базовая линия)
Код для Горизонтальной (X) Оси выглядит сложным, но в действительности совсем прост. Используя перо, которое мы создали раньше (LinePen), мы рисуем прямую линию, перемещаясь от начальной до конечной точек линии на значения, рассчитанные от полей, которые мы установили раньше.
g.DrawLine(LinePen, LeftMargin, PBBarChart.Height - BaseMargin, _
PBBarChart.Width - RightMargin, PBBarChart.Height - BaseMargin)
Что вы думаете о показе сейчас?
Если все это новое для вас, возможно, вы хотите проверить, что весь этот код действительно будет работать. В качестве временной проверки попробуйте следующее:
Проверьте, что за строками кода, указанными выше, следует строка «End Sub» процедуры DrawLine.
Создайте новую процедуру, как показано ниже:
Private Sub TempDisplay()
PBLineChart.Image = bmap
End Sub
Вышеуказанный код берет рисунок диаграммы (или то, что есть) и присваивает его изображению PictureBox. Это значит, что внешние линии диаграммы станут видимыми для вас, когда вы запустите эту маленькую процедуру. Чтобы запустить ее поместите следующий код в событие Click кнопки, которую вы поместили на форму раньше:
Private Sub btnDraw_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnDraw.Click
DrawOutline()
TempDisplay()
End Sub
Сохраните проект и запустите его. Если вы вставили код правильно, вы будете награждены чем-то вроде этого:
Когда проект будет запущен, попытайтесь изменить размеры формы, а затем немедленно щелкните на кнопке снова. Вы увидите, что внешние линии диаграммы изменяются правильно, заполняя все доступное пространство измененного PictureBox.