- •Давайте не будем изобретать колесо.
- •Прежде всего: Данные
- •Рисование и Упорство
- •Объект 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
- •Проверяем
- •Итоги первой демонстрации
- •Затененный график
- •Значения вертикальной оси
- •Код Вертикальных Значений
- •Подвижные направляющие линии
- •Отображаем направляющие линии
- •Направляющие линии и отображенные значения
- •Вертикальные значения
- •Возможные улучшения
- •Охваченные темы
Шаг 4d: Время для проверки
Нам пришлось написать больше рисующего кода прежде, чем мы достигли чего-то, это могло бы быть полезным для быстрого продвижения вперед, и можно взглянуть на результаты. Чтобы сделать это, добавьте этот код в самый конец DrawChart Sub:
PBBarChart.Image = bmap
g.Dispose()
LinePen.Dispose()
End Sub
Я объясню этот код позже, но сейчас вы можете запустить проект и увидеть вертикальную ось и отметки. Просто обеспечьте, чтобы код, который мы создадим на следующих страницах, был введен выше этих трех строк, иначе будут проблемы. Кнопка используется для запуска рисующего кода, поэтому событие button_click кнопки btnDraw нуждается в вызове двух процедур, которые мы создали:
Private Sub btnDraw_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnDraw.Click
' Генерирует данные
GetData()
' Затем рисует диаграмму
DrawChart()
End Sub
Вы можете подумать, что это не очень много, показать несколько страниц объяснений. Имейте в виду, что в действительности используемый код очень короткий. Из-за того, что эта серия статей предназначена для новичков в рисовании, я совершил ошибку в том, что дал слишком много объяснений, а не в том, что дал их слишком мало.
Шаг 5: Горизонтальная ось и панели
Логика Горизонтальной (X) оси та же, что мы использовали при рисовании Вертикальной Оси:
' Сначала рисуем линию оси X
g.DrawLine(LinePen, LeftMargin, PBBarChart.Height - BaseMargin, _
PBBarChart.Width - RightMargin, PBBarChart.Height - BaseMargin)
' Вычисляем длину базовой линии, нарисованной кодом выше
Dim BaseLineLength As Integer = _
PBBarChart.Width - (LeftMargin + RightMargin)
5B. Панели
Вычисление ширины каждой панели снова является простой математикой: разделите длину базовой линии на число панелей (которое является тем же, что и число элементов массива SalesData – по одной на каждую страну). Вычтите ширину, которую вы решили раньше вставить между панелями.
Dim BarWidth As Double = (BaseLineLength / SalesData.Count) - BarGap
Каждая панель, конечно, является прямоугольником, поэтому для этой цели мы создаем объект Rectangle. Чтобы определить X-позицию первой панели мы начнем на пересечении осей X и Y, а затем будем двигаться вправо на расстояние, равное ширине, которую мы решили вставить между панелями. Y-позиция устанавливается на один пиксель выше базовой линии:
Dim BarRect As Rectangle
Dim BarStartX As Integer = LeftMargin + BarGap
Dim BarStartY As Integer = PBBarChart.Height - (BaseMargin + 1)
Далее, создаем кисть, которой будем рисовать и закрашивать прямоугольные панели:
Dim BarBrush As New SolidBrush(Color.BurlyWood)
Так много для ширины. Теперь нам нужно определить высоты панелей. Очевидно, высота каждой панели будет определяться цифрами продаж страны. Мы уже конфигурировали вертикальную ось так, чтобы она отмечала максимум 1000 единиц значений продаж. Вертикальная ось имеет так же другое значение – число пикселей, которое составляет ее длину. Чтобы гарантировать, что высота каждой панели нарисована пропорционально общему числу доступных пикселей, мы должны вычислить масштаб, т.е. сколько продаж представлено в каждом пикселе вертикальной линии. Это измерение будет использовано, чтобы гарантировать, что панели нарисованы пропорционально в пределах доступной им высоты. Это может только звучать сложно. На самом деле таковым не является и само вычисление очень простое:
Dim VertScale As Double
VertScale = VertLineLength / 1000
Перечисляя значения, помещенные в массив, мы можем вывести цифры продаж, одну за другой. Мы можем использовать это число для вычисления высоты панели. Есть несколько способов достичь правильного решения задачи отображения панелей в правильном положении, некоторые легче других. Путь, который выбрал я для этой статьи, следующий. Для каждой панели: -
Вычислить высоту панели
Создать прямоугольник, представляющий панелью
«Тянуть» Y-позицию вверх, пока она не достигнет места, где должен быть верхний левый уровень прямоугольной панели. Почему мы должны это делать? Потому что прямоугольник рисуется «наружу и вниз», а не «наружу и вверх». Если мы не сделаем этого изменения, панель будет нарисована ниже базовой линии, а не выше ее
Рисуем и закрашиваем прямоугольник, чтобы создать панель
Перемещаем X-позицию на рассчитанное значение вправо
И вот код, который все это делает:
For Each gd As GraphData In SalesData
' Вычисляем высоту панели
Dim BarHeight As Integer = CInt(gd.Sales * VertScale)
' Создаем Rectangle для панели
BarRect = New Rectangle(BarStartX, BarStartY, CInt(BarWidth), _
BarHeight)
' Тащим Y-точку вверх чтобы панель (прямоугольник)
' растянулась вниз к базовой линии во время рисования
BarRect.Offset(0, -BarHeight)
' закрашиваем панель
g.FillRectangle(BarBrush, BarRect)
' Опционально, рисуем линию вокруг панели
g.DrawRectangle(LinePen, BarRect)
' Повышаем X-значение ширины панели плюс промежуток
' готовясь к рисованию следующей панели.
BarStartX += CInt(BarWidth + BarGap)
Next