- •Давайте не будем изобретать колесо.
- •Прежде всего: Данные
- •Рисование и Упорство
- •Объект 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
- •Проверяем
- •Итоги первой демонстрации
- •Затененный график
- •Значения вертикальной оси
- •Код Вертикальных Значений
- •Подвижные направляющие линии
- •Отображаем направляющие линии
- •Направляющие линии и отображенные значения
- •Вертикальные значения
- •Возможные улучшения
- •Охваченные темы
Отображаем результат
Как мы делали в конце предыдущих страниц, мы можем отобразить результаты наших усилий. Однако так как мы больше не работаем с временным отображением, мы создадим маленькую процедуру, которая
Отображает законченную диаграмму
Избавляется от объекта Graphics
Вот эта процедура:
Private Sub FinalDisplay()
PBLineChart.Image = bmap
g.Dispose()
End Sub
И, наконец, мы можем записать все процедуры, которые нам необходимы для вызова по очереди в событии кнопки Click:
Private Sub btnDraw_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnDraw.Click
DrawOutline()
DrawTheLine()
ShowMonths()
FinalDisplay()
End Sub
Все сделано… или нет? Диаграмма вверху в порядке, но все ли на этом? Насколько лучше было бы, если бы соединения сегментов линий были бы более ясно отмечены. И если бы были линии сетки на диаграмме, чтобы было удобнее смотреть значения на вертикальной оси. Добавим эти улучшения на диаграмму? Конечно!
Соединения линий
Мощь GraphicsPath теперь становится очевидной. Чтобы добавить маленький кружочек – или прямоугольник, квадрат или даже текст – между каждым сегментом линии нам нужно только три маленьких добавления кода. Сначала нужно добавить начальный кружок в самом начале линии диаграммы; затем в цикле добавим кружок в начале каждого последующего сегмента линии; третье – вставляем кружок в конце последнего сегмента линии. Проверяем следующий кусок кода, который формирует часть процедуры DrawTheLine. Я выделил красным три новые строки. Весь остальной код остался без изменений.
' Создаем GraphicsPath, чтобы хранить информацию о линии
Dim MyPath As New GraphicsPath
' Вручную добавляем первый кружок Path
MyPath.AddEllipse(XPosStart - 2, YPosStart - 2, 4, 4)
' Вручную добавляем первую линию в Path
MyPath.AddLine(XPosStart, YPosStart, XPosEnd, YPosEnd)
For i As Integer = 1 To UBound(Sales) - 1
' Изменяем позиции X и Y для следующего значения:
' Перемещаем начальную позицию на ширину одной линии вправо
XPosStart = XPosEnd
' Перемещаем конечную точку на ширину одной линии вправо
XPosEnd = CInt(XPosStart + LineWidth)
' Присваиваем YPosStart «старому» значению Y
YPosStart = YPosEnd
' Присваиваем YPosEnd следующему числу продаж
YPosEnd = CInt(Sales(i + 1) * VertScale)
' Добавляем новый кружок
MyPath.AddEllipse(XPosStart - 2, YPosStart - 2, 4, 4)
' Добавляем следующий сегмент линии в GraphicsPath
MyPath.AddLine(XPosStart, YPosStart, XPosEnd, YPosEnd)
Next
' Наконец, вручную добавляем последний кружок
MyPath.AddEllipse(XPosEnd - 2, YPosEnd - 2, 4, 4)
Метод AddEllipse добавляет кружок диаметром 4 пикселя в GraphicsPath. Позиции X и Y кружка смещены на 2 пикселя, чтобы быть помещенными по центру между концом одного сегмента и началом следующего. Вы можете заменить кружочки квадратиками, заменив каждую строку AddEllipse на эту:
MyPath.AddRectangle(New Rectangle(XPosEnd - 2, YPosEnd - 2, 4, 4))