- •Давайте не будем изобретать колесо.
- •Прежде всего: Данные
- •Рисование и Упорство
- •Объект 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
- •Проверяем
- •Итоги первой демонстрации
- •Затененный график
- •Значения вертикальной оси
- •Код Вертикальных Значений
- •Подвижные направляющие линии
- •Отображаем направляющие линии
- •Направляющие линии и отображенные значения
- •Вертикальные значения
- •Возможные улучшения
- •Охваченные темы
Последние штрихи
Чтобы закончить, нужно написать названия стран под панелями. Это очень близко тому, что мы делали в Части 2, с дополнением строки кода, которая регулирует размер шрифта согласно доступной ширине.
Private Sub WriteTheNames()
' Позиция X для начала названия стран(ы). Она помещается
' под левым краем панели, плюс 5 пикселей для того, чтобы
' лучше выглядеть
Dim TextStartX As Integer = LeftMargin + BarGap + 5
' Создаем кисть для рисования текста
Dim TextBrsh As Brush = New SolidBrush(Color.Black)
' Создаем экземпляр объекта Font для отображения текста
' был бы полезен динамически приспосабленный размер шрифта:
Dim fntSize As Integer = CInt(BarWidth / 7)
Dim TextFont As New Font("Verdana", fntSize, FontStyle.Bold)
' Пишем их:
For Each gd As GraphData In SalesData
g.DrawString(gd.Country, TextFont, TextBrsh, _
TextStartX, CInt(PBBarChart.Height - (BaseMargin - 4)))
TextStartX += CInt(BarWidth + BarGap)
Next
End Sub
Снова вам нужно добавить обращение к этой процедуре в событии щелчка кнопки btnDraw. Полный код этого события будет выглядеть так:
Private Sub btnDraw_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)_
Handles btnDraw.Click
' Разные действия теперь разделены в отдельные процедуры,
' чтобы сделать
' проект более модульным
' 1. Получаем данные
GetData()
' 2. Получаем объект Graphics
g = GetGraphics()
' 3. Рисуем вертикальную ось
DrawVerticalAxis(g)
' 4. Рисуем панели
Draw3DBars()
' 5. Пишем подписи
WriteTheNames()
' Все сделано! Выравниваем bitmap с вертикальной осью нарисованного
' picturebox
pbBarChart.Image = bmap
g.Dispose()
End Sub
Резюме
Этот проект создает более универсальную и лучше выглядящую гистограмму. Она разделяет главные задачи рисования в разные процедуры. Однако код все еще является довольно громоздким и это создает причину для создания класса 3DBar с регулируемыми свойствами ширины, глубины, высоты, цвета и т.д.. Впоследствии, будет можно подключить пользовательский интерфейс для выбора свойств, который мы здесь использовали, и, конечно, это соответствует подходу ООП к разработке в VB.NET. В этой статье я объяснил или использовал следующее:
Объект Bitmap
Brushes
Dispose
Do While Loop
DrawLine
DrawString
FillPolygon
Font object
Объект Graphics
Pen
Structure
В следующей статье в этой серии мы перейдем к другому, иногда более динамичному типу диаграмм – линейчатой диаграмме.
Удачные диаграммы. Часть 5 - Линейные графики
Автор: Ged Mead Перевод: Виталий Готовцов [Оригинал Статьи] [Обсудить в форуме]
Как и в предыдущих статьях, диаграмма будет показана в элементе управления PictureBox. Хотя было бы легко – легче, чем некоторыми способами – просто налепить диаграмму на поверхность самой формы, я думаю, реалистичнее будет поселить ее внутри элемента-контейнера, потому что диаграмма чаще всего является лишь частью всей информации, показанной пользователю. Также это облегчает ситуацию, когда вы хотите получить пользовательский ввод с экрана и использовать эти данные непосредственно для рисования диаграммы. Для удобства в начале проекта мы создадим некоторые данные. В реальном мире вы, вероятно, использовали бы данные, полученные их другого источника, или те, которые были раньше сохранены в файле, или непосредственно от пользователя. Если вы хотите приспособить код этой статьи для получения данных во время выполнения, вам придется найти пример того, как это можно сделать в Части 3 этой серии.
Начнем
Добавьте в проект форму и назовите ее LineChartDemo. Придайте форме размер около 640 на 480. Перетащите PictureBox на форму с панели ToolBox и растяните его левую, верхнюю и правую границы так, чтобы они были близки к ее краям. Перетяните нижний край элемента PictureBox так, чтобы его высота составляла приблизительно 80% высоты формы. Установите свойство Anchor элемента PictureBox так, чтобы оно включало все четыре стороны - верхнюю, нижнюю, левую и правую. Установите свойство Border по своему усмотрению; я использовал Fixed3D в образцах. Назовите его «PBLineChart». Теперь добавьте кнопку на форму и поместите ее в нижнем правом углу. Измените ее свойство Anchor от предложенного по умолчанию на Bottom и Right. Эти изменения свойств Anchor приведут к тому, что PictureBox будет изменять размер при изменении размера формы, а кнопка будет оставаться привязанной в левом углу, где вам хотелось бы.
В самом верху формы вставьте следующее:
Option Strict On
Imports System.Drawing.Drawing2D
Первая строка, как вам вероятно известно, является хорошей практикой (хотя делает код несколько более громоздким) и помогает избежать некоторых ошибок, связанных с преобразованием типов. Вторая строка дает нам доступ ко всем методам класса Drawing2D, некоторые их которых мы будем применять для создания разных линий и фигур в диаграмме.