
- •Давайте не будем изобретать колесо.
- •Прежде всего: Данные
- •Рисование и Упорство
- •Объект 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
- •Проверяем
- •Итоги первой демонстрации
- •Затененный график
- •Значения вертикальной оси
- •Код Вертикальных Значений
- •Подвижные направляющие линии
- •Отображаем направляющие линии
- •Направляющие линии и отображенные значения
- •Вертикальные значения
- •Возможные улучшения
- •Охваченные темы
Получение данных
Мы предлагаем пользователю ввести четыре элемента данных – Название, Стоимость, Цвет и Шаблон – для каждого сегмента круговой диаграммы. Если они не будут введены, то будет использовано «дефолтное» значение. Если пользователь доволен «текущими настройками» данных (то есть тем, что станет с одним сегментом диаграммы), щелчок на кнопке Confirm запустит выполнение следующего кода. Он возьмет четыре части данных и поместит их в массив, как один сложный элемент GraphData.
Private Sub btnConfirm_Click(ByVal sender As _ System.Object, ByVal e As _ System.EventArgs) Handles btnConfirm.Click
' Добавляет самый последний элемент данных в массив
If txtName.Text = "" Then txtName.Text = "No Name"
Dim gd As New GraphData
gd.Name = txtName.Text
gd.Amount = nudValue.Value
gd.Clr = clrPicked
gd.Pattern = hatchPicked
UserData.Add(gd)
End Sub
Я уверен, что вы определите строку, которая проверяет, что пользователь действительно ввел Название (Name) и, если не ввел, то предлагает текст для отображения.
Создание диаграммы
Кнопка для рисования или перерисовки диаграммы конечно эта:
Я назвал ее btnDraw, но это не имеет значения. Если вы не используете скелетное решение, то не забудьте добавить элемент Panel в ваш проект и назовите его pnlChart. На изображении в начале этой статьи панель – это белое пространство в правой части формы.
Invalidate
Для того чтобы диаграмма была нарисована или перерисована в панели когда пользователь щелкнет на кнопке, нам нужно написать код, который выполнит это действие. Это очень легко и метод Invalidate вскоре может стать вашим лучшим другом.
Invalidate заставляет элемент управления перерисовываться;
Перерисовка вызывает метод Paint элемента управления.
Поместите соответствующий код в метод Paint управляющего элемента и,
Запросто мы создали диаграмму с доступными данными.
Метод Invalidate в событии щелчка кнопки не потребует много нашего времени:
Private Sub btnDisplay_Click(ByVal sender _ As System.Object, ByVal e As System.EventArgs) _ Handles btnDraw.Click
pnlChart.Invalidate()
End Sub
Рисуем Panel
Так что осталось поместить «движок» в событие Paint объекта Panel, который проводит окончательное рисование: я только проведу вас в детали, код и логика которых отличаются от наших предыдущих проектов. Мы встречали объект Graphics, свойство SmoothingMode и Brush раньше:
Private Sub pnlChart_Paint(ByVal sender _ As Object, ByVal e As _ System.Windows.Forms.PaintEventArgs) _ Handles pnlChart.Paint
Dim g As Graphics = e.Graphics
g.SmoothingMode = SmoothingMode.HighQuality
Dim PattBrush As Brush
Мы не хотим совершить ошибку, пытаясь нарисовать диаграмму без данных. Поэтому следующая строка проверяет, что есть, по меньшей мере, один законченный элемент в массиве, прежде чем действию будет позволено продолжиться. Если данные существуют, мы можем продолжить и начать обрабатывать их: (Это тот же код, который мы использовали в первой части, так что я не буду снова объяснять все в деталях.)
If UserData.Count > 0 Then
' Create Rectangle to contain the Pie Chart
Dim rect As Rectangle = New Rectangle(20, 10, 200, 200)
' Calculate the grand total
Dim TotalCount As Single
For Each gd As GraphData In UserData
TotalCount += gd.Amount
Next
' Create variables to hold the changing values of Angles
Dim StartAngle As Single = 0
Dim SweepAngle As Single = 0
Следующий блок кода почти тот же, что был в Части 1. Ключевое отличие содержится в природе объекта Brush. Мы создадим новый HatchBrush и назначим ему выбранный шаблон и цвет. Я выбрал Белый как цвет фона во всех классах. Однако ощутите свободу выбора или – если вам не чужд авантюризм – добавьте в дальнейшем выбор для пользователя HatchStyle BackColor.
' Рисует диаграмму
For Each gd As GraphData In UserData
SweepAngle = 360 * gd.amount / TotalCount
PattBrush = New HatchBrush(gd.Pattern, gd.clr, Color.White)
g.FillPie(PattBrush, rect, StartAngle, SweepAngle)
' Опционально: рисует линии вокруг сегментов:-
g.DrawPie(New Pen(Color.Black), rect, StartAngle, SweepAngle)
StartAngle += SweepAngle
Next
Ключ
Создание ключа повторяет код Части 1, за исключением того, что я заменил круглые пули (bullets) квадратными. Этому нет особенной причины: просто я мог это сделать.
' Создает Brush, чтбы рисовать текст
Dim TextBrsh As Brush = New SolidBrush(Color.Black)
' Создает экземпляр объекта Font для отображения текста
Dim TextFont As New Font("Verdana", 9, FontStyle.Bold)
' Рисует пули (bullets) и информацию о компании
Dim pxFromTop As Integer = 235
' Рисует текст заголовка
g.DrawString("Chart Key", TextFont, TextBrsh, 35, pxFromTop)
For Each gd As GraphData In UserData
' Увеличивает расстояние от верха (Top)
pxFromTop += 20
' Рисует пулю (bullet)
PattBrush = New HatchBrush(gd.Pattern, gd.clr, Color.White)
g.FillRectangle(PattBrush, 20, pxFromTop, 15, 15)
' Рисует линию вокруг пули (bullet).
g.DrawRectangle(New Pen(Color.Black), 20, pxFromTop, 15, 15)
' Рисует кодированный цветной текст
g.DrawString(gd.name & " (" & gd.Amount & ")", TextFont, TextBrsh, 60, pxFromTop)
Next