- •Давайте не будем изобретать колесо.
- •Прежде всего: Данные
- •Рисование и Упорство
- •Объект 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
- •Проверяем
- •Итоги первой демонстрации
- •Затененный график
- •Значения вертикальной оси
- •Код Вертикальных Значений
- •Подвижные направляющие линии
- •Отображаем направляющие линии
- •Направляющие линии и отображенные значения
- •Вертикальные значения
- •Возможные улучшения
- •Охваченные темы
Использование Vertical ScrollBar
Как упоминалось раньше, вертикальный ScrollBar, используемый в этой демонстрации, является просто легким способом генерации набора быстроизменяемых данных для отображения в графике. Теперь нам нужно написать немного кода, который отмечает изменения, сделанные пользователем в ScrollBar. Место для этого кода – событие ValueChanged ScrollBar’а.
Private Sub SBUserValue_ValueChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles SBUserValue.ValueChanged
DrawGuidelinesAndChart(picGraph)
End Sub
Проверяем
Теперь запускаем проект и перемещаем ScrollBar. Каждое движение ScrollBar’а приводит к тому, что результат будет отображен на диаграмме. Вы можете проверить, что значение, которое было выбрано последним, будет показано в label. Как вы увидите, Vertical ScrollBar создает более высокие значения при движении вниз; более низкие значения при движении вверх. Если это смущает вас, вы легко можете заменить вертикальный ScrollBar горизонтальным. В этом случае меньшие значения вы будете выбирать при прокручивании влево, а большие значения – справа, что может показаться вам более логичным.
Итоги первой демонстрации
Относительно маленьким кодом мы создали полезную динамичную линейную диаграмму. Вы можете заменить ScrollBar, который использовал я, любым другим способом получения данных, который будет уместен для вашего проекта, то ли пользовательский ввод, системно производимая информация, внешние данные, основанные на времени данные и т.д. Конечно, вы не всегда можете гарантировать, что используемые точно данные войдут в диапазон от 1 до 100, который мы использовали в первом примере, поэтому мы вкратце посмотрим, как можно редактировать код, чтобы сделать его более уступчивым. Прежде всего, я хочу рассмотреть пару способов производства интересных альтернативных изображений.
Затененный график
Если вы хотите диаграмму, которая выглядит так:
то вы можете достичь такого эффекта маленьким улучшением кода. Замените Шаг 6 в процедуре DrawGuidelinesAndChart блоком кода, помещенным ниже:
' Шаг 6
' Рисуем следующий сегмент линии на объекте Graphics.
gr.DrawLine(Pens.Black, _
picGraph.Width - 1 - Xmove, -OldValue, _
picGraph.Width - 1, -NewValue)
OldValue = NewValue
' Рисуем следующий сегмент линии, но в этот раз оставляем значение Y
' OldValue положительным.
gr.DrawLine(Pens.LightBlue, _
(picGraph.Width - 1) - Xmove, OldValue, _
picGraph.Width - 1, -NewValue)
OldValue = NewValue
Как вы можете видеть, единственное изменение в блоке sub, которое снова использует Drawline, чтобы рисовать второй сегмент линии на объекте Graphics. Отличие здесь заключается в том, что начальная точка этого сегмента является положительным значением OldValue, которое вы будете вызывать, подразумевается, что она будет находиться в нижней части PictureBox’а. Поэтому рисование этой второй линии имеет эффект создания линии, которая выходит снизу PictureBox’а и поднимается, пока не встречает точку, в которой мы отметили отрицательное значение NewValue. Это звучит сложно, я знаю, но если вы пройдете через это постепенно, я надеюсь, это приобретет смысл. Или что-то более замечательное:
И снова, здесь требуется просто маленькое изменение Шага 6. В этот раз, однако, вместо того, чтобы рисовать линии, мы нарисовали многоугольники. Верхний многоугольник является линией, которая точно такая же линия, что и та, которую мы рисовали в предыдущем примере; остаток многоугольника создается рисованием двух вертикальных линий, направленных вниз от конца этой линии к низу PictureBox, и горизонтальной линии вдоль нижней части. Метод FillPolygon берет эти четыре точки и рисует многоугольник, заполненный цветом по нашему выбору. Вот замена в Шаге 6:
' Шаг 6
' Рисуем Polygon, чтобы заполнить площади ниже нарисованной линии.
Dim topLeft As New Point((picGraph.Width - 1) - Xmove, -OldValue)
Dim topRight As New Point((picGraph.Width - 1), -NewValue)
Dim bottomRight As New Point(picGraph.Width - 1, picGraph.Height)
Dim bottomLeft As New Point((picGraph.Width - 1) - Xmove, picGraph.Height)
Dim PolyPoints As Point() = {topLeft, topRight, bottomRight, bottomleft}
gr.FillPolygon(Brushes.Red, PolyPoints)
OldValue = NewValue
Финальный вариант для вас:
Исправленный Шаг 6 похож на это:
' Шаг 6
' Рисуем Polygon, чтобы заполнить площади ниже нарисованной линии.
Dim topLeft As New Point((picGraph.Width - 1) - Xmove, -OldValue)
Dim topRight As New Point((picGraph.Width - 1), -NewValue)
Dim bottomRight As New Point(picGraph.Width - 1, picGraph.Height)
Dim bottomLeft As New Point((picGraph.Width - 1) - Xmove, picGraph.Height)
Dim PolyPoints As Point() = {topLeft, topRight, bottomRight, bottomLeft}
Dim hb As New Drawing.Drawing2D.HatchBrush(Drawing2D.HatchStyle.Trellis, Color.Black, Color.White)
' Альтернатива: Раскомментируйте эту строку для получения более тонкой версии:
' Она изменяет свойства ForeColor и BackColor для большего отличия
gr.FillPolygon(hb, PolyPoints)
OldValue = NewValue
Вы можете играться с этими вариациями часами! Если вы хотите уменьшить эффект зазубренности на начерченных линиях, попробуйте увеличить значение XMove.