- •Давайте не будем изобретать колесо.
- •Прежде всего: Данные
- •Рисование и Упорство
- •Объект 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
- •Проверяем
- •Итоги первой демонстрации
- •Затененный график
- •Значения вертикальной оси
- •Код Вертикальных Значений
- •Подвижные направляющие линии
- •Отображаем направляющие линии
- •Направляющие линии и отображенные значения
- •Вертикальные значения
- •Возможные улучшения
- •Охваченные темы
Данные для образца
Наши данные очень просты – 12 месяцев года будут отображены на горизонтальной оси и цифры, представляющие продажи за месяц, будут отображены на вертикальной оси. Два набора данных для удобства могут быть помещены в два отдельных массива; массив «Months» для названий, массив «Sales» – для цифр. Как указывалось выше, это лишь удобство, дающее нам возможность рисовать, не отвлекаясь на обработку данных. Внутрь кода класса «Public Class LineChartDemo» вставьте следующий код, который создает два массива и наполняет их данными за один шаг:
Dim Months() As String = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", _
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"}
Dim Sales() As Integer = {835, 314, 672, 429, 715, 642, _
153, 699, 622, 901, 345, 655}
Переменные
Большую часть трудностей включает в себя настройка и расчет полей, длин и т.д. Некоторые из них, возможно, трудно кодировать во время разработки – например такие элементы, как количество пикселей, которые нужно вставить в начало линий графика. Другие легче рассчитывать динамически – такие как длина базовой линии, которая может увеличиваться или уменьшаться, в зависимости от изменения размера содержащей ее формы. Следующий код или устанавливает жестко закодированные значения переменных или создает переменные готовыми для присвоения соответствующих значений позже, когда приложение запускается. Поместите это ниже кода, который инициирует массивы.
' ~~ Переменные для полей и контуров и т.д. ~~
' # пиксели Y-оси для смещения PicBox влево
Dim LeftMargin As Integer = 35
' # пиксели, неиспользуемые справа от PicBox
Dim RightMargin As Integer = 15
' # пиксели над базовой линией PictureBox X-Оси
Dim BaseMargin As Integer = 35
' Поле вверху
Dim TopMargin As Integer = 10
' Переменная, хранящая длину вертикальной оси
Dim VertLineLength As Integer
' Переменная, хранящая длину горизонтальной оси
Dim BaseLineLength As Integer
' Переменная, содержащая длину каждого сегмента
Dim LineWidth As Double
Как и в предыдущих примерах, мы собираемся применить технику двойной буферизации для создания диаграммы в фоновом режиме и «вклеивания» ее в PictureBox за один раз, когда все будет готово. Конечно, в действительности мы не вклеиваем ничего в традиционном смысле; все, что мы делаем – это присваиваем готовое изображение диаграммы изображению на PictureBox. Если вы хотите разобраться, как это работает, вы можете найти дополнительное объяснение на Странице 3 Части 2 этой серии. Мы создадим объект Graphics и объект Bitmap в следующих строках кода:
' ~~ объекты Bitmap и Graphics ~~
' Переменная для хранения объекта Graphics
Dim g As Graphics
' Далее, создаем объект Bitmap который имеет
' тот же размер и разрешение, что и PictureBox
Dim bmap As Bitmap
После размещения этого кода мы можем заняться делом и действительно рисовать диаграмму. Мы разделим задачи на серии процедур. Если вы захотите использовать этот код в дальнейшем, вам будет легко сделать необходимые изменения и улучшить процедуры, передавая параметры вместо тех жестко закодированных значений, которые я применил в демонстрационных целях.