- •Давайте не будем изобретать колесо.
- •Прежде всего: Данные
- •Рисование и Упорство
- •Объект 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
- •Проверяем
- •Итоги первой демонстрации
- •Затененный график
- •Значения вертикальной оси
- •Код Вертикальных Значений
- •Подвижные направляющие линии
- •Отображаем направляющие линии
- •Направляющие линии и отображенные значения
- •Вертикальные значения
- •Возможные улучшения
- •Охваченные темы
Превращающаяся и исчезающая проблема линий
Вы ожидаете, что мы могли бы теперь нарисовать набор линий, одну за другой, используя стандартный метод DrawLine. Мы могли бы, но вы не получили бы результат, который ожидаете. Причина в том, что когда мы видим график, мы ожидаем, что начальная точка графика (т.е. точка 0, 0) находится в нижнем левом углу. Это стандарт и вы будете правы в этих ожиданиях, как мне кажется. Проблема в том, что элемент PictureBox имеет собственную точку 0, 0 в верхнем левом углу. Поэтому если бы мы рисовали линию, скажем от 0, 0 к 100, 100, эта линия шла бы под углом вниз из верхнего левого угла. Это противоположно тому, чего мы ожидаем – в действительности мы хотим линию, которая выходит из нижнего левого угла и идет вверх. Есть несколько решений этой проблемы. В этой статье мы будем использовать такой способ – создадим серию сегментов линии в памяти, которые мы поместим в объект класса Drawing, называемый GraphicsPath. Затем мы повернем и выровняем начальную позицию линии «вверх тормашками» в этом GraphicsPath, чтобы она появилась так, как мы хотим. Объект GraphicsPath подвижный и совсем не труден для применения. Преобразования и вращения, однако, не совсем просты для понимания. Фактически, они могут быть совершенно ошеломляющими, если у вас нет математического мышления (которого у меня нет). Целью этой статьи является создание графика, поэтому я собираюсь показать вам необходимый код, но объяснение, как он работает, будет шагом в сторону. В следующей статье я вернусь к этой тернистой теме и попытаюсь объяснить, по шагам, в нематематических терминах, как это происходит. Если вы сами пробовали преобразования, то, вероятно, уже столкнулись с проблемой невидимой линии – которая такова, что вы вращаете линию и она просто исчезает! Код, который мы используем, решит все указанные трудности. Создаем новый объект GraphicsPath:
Dim MyPath As New GraphicsPath
Первый сегмент линии
Как вы увидите, мы будем повторять это с каждым элементом массива Sales – т.е. каждое из чисел продаж – в свою очередь. Когда мы будем подходить к новому числу, мы будем использовать его для значения конечной точки следующего сегмента линии. Первый сегмент линии, однако, нам придется установить специально, чтобы получить «катящийся шар»:
MyPath.AddLine(XPosStart, YPosStart, XPosEnd, YPosEnd)
Обратите внимание, что метод AddLine принимает четыре параметра – два значения X и два значения Y. Нам не нужно определять перо для рисования линии; об этом позаботятся, когда мы, наконец, будем рисовать полный Path (путь). AddLine делает то, что предполагает название; он добавляет детали сегмента линии GraphicsPath.
Остающиеся сегменты линии
Теперь, когда первый сегмент создан и помещен, мы можем пройти по всему массиву Sales и добавить оставшиеся сегменты линии в GraphicsPath:
For i As Integer = 1 To UBound(Sales) - 1
' Обновляем значения X и Y позиции для следующего значения:
' Перемещаем начальную точку вправо на ширину одной линии
XPosStart = XPosEnd
' Перемещаем конечную точку вправо на ширину одной линии
XPosEnd = CInt(XPosStart + LineWidth)
' Присваиваем YPosStart старое значение Y
YPosStart = YPosEnd
' Присваиваем YPosEnd следующее значение числа Sales
YPosEnd = CInt(Sales(i + 1) * VertScale)
' Добавляем этот сегмент линии в GraphicsPath
MyPath.AddLine(XPosStart, YPosStart, XPosEnd, YPosEnd)
Next
Вот и все, сегменты линии созданы и помещены в GraphicsPath. Теперь немного этого хитрого преобразования (Transformation).