Лекція 4. Діаграми
Елементи діаграми
Зображення діаграми складається з різних елементів - умовних позначень, осей, рядів і інших елементів. Кожному елементу діаграми відповідає певний об'єкт.
На наступному малюнку показані різні елементи діаграми, складові її зображення.
Зображення діаграми
Зображення діаграми являє повне створене зображення, відповідного кореневого класу Chart.
Ряд
Пов'язана група точок даних. З кожним рядом пов'язаний тип діаграми. Кількість рядів, які можуть виводитися на діаграмі, і порядок їх відображення залежать від зазначеного типу діаграми.
Цей елемент відповідає класу Series.
Область діаграми
Прямокутна область, яка використовується для малювання рядів, міток, осей, ліній сітки, поділів і інших елементів. Залежно від типу діаграми, в одній області діаграми може відображатися кілька рядів. Цей елемент відповідає класу ChartArea.
Область побудови
Прямокутна область в межах області діаграми, яка використовується для побудови рядів діаграми і ліній сітки. Мітки, ділення і заголовки осей зображуються поза області побудови, але в межах області діаграми. Область побудови задається за допомогою властивості InnerPlotPosition.
Заголовок
Заголовок на зображенні діаграми. До зображення діаграми можна додати будь-яку кількість заголовків.
Мітка осі
Мітка на осі. Вона створюється автоматично, якщо не вказані власні мітки. Цей елемент відповідає класу Label.
Заголовок осі
Заголовок осі, що описує її призначення.
Позначення
Умовні позначення для зображення діаграми. Для зображення діаграми можуть використовуватися кілька наборів умовних позначень. Цей елемент відповідає елементу в колекції Legend.
Лінії сітки
Горизонтальні і вертикальні лінії сітки, які зазвичай використовуються спільно з поділками. Цей елемент відповідає класу Grid.
Поділи
Поділи на осях, які зазвичай використовуються спільно з лініями сітки. Цей елемент відповідає класу TickMark.
Мітка
Мітка, що описує точку даних.
Система координат
В елементі управління діаграми для розміщення заголовків, умовних позначень, заміток і областей діаграми на зображенні діаграми застосовується система координат. Для цього використовується властивість Position кожного еле
Система координат діаграми має наступні характеристики.
• Початок координат діаграми (0,0) знаходиться в лівому верхньому кутку зображення діаграми.
• У координатах (X, Y) значення X відповідає горизонтальній осі, а значення Y - вертикальній.
• Одиницями є відсотки від ширини і висоти зображення діаграми. Значення координат повинні лежати в межах від 0 до 100. Відносні координати дозволяють зберегти відносне розташування об'єктів при зміні розміру діаграми.
Розташування кожного елемента області діаграми визначається за допомогою аналогічної системи координат. Координати (0,0) відповідають лівому верхньому куту області діаграми, а координати (100,100) відповідають правому нижньому куту області діаграми. Якщо умовні позначення закріплені в області діаграми, то їх розташування визначається за допомогою системи координат цієї області діаграми.
Методи і властивості
Розберемо основні методи і властивості компонента
Chart
· AntiAliasing –Види згладжування діаграми
o Text – Згладжувати тільки текст на діаграмі
o Graphics – Згладжувати тільки графічні представлення на діаграмі
o All – Згладжувати все
· BackColor – Колір фону діаграми
· BckGragientStyle – Вид градієнтної заливки задньої області діаграми
o None – Немає градієнта
o LeftRight – Градієнт зліва на право
o TopBottom – Градієнт зверху в низ
o Center – Градієнт від центру
o DiagonalLeft – Діагональний градієнт з ліва
o DiagonalRight – Діагональний градієнт справа
o HorizontalCenter – Градієнт від центру по горизонталі
o VerticalCenter –Градієнт від центру по горизонталі
· BackgroundImageLayout – Розміщення малюнку назадньому плані
o None – Розмістити малюнок як є
o Title – Розмножити малюнок
o Center – Відцентрувати малюнок
o Stretch – Розтягнути малюнок по всій поверхні
o Zoom – Вписати малюнок із збереженням пропорцій
· BackImage – Малюнок заднього фону
· BackImageAlignment – Вирівнювання малюнку заднього плану
· BackImageTransparentColor – Прозорий колір малюнку заднього плану
· BackSecondaryColor – Додатковий колір заднього плану (використовується в градієнтних заливках)
· BorderLineCollor – Колір лінії рамки діаграми
· BorderLineDashStyle – Вид лінії рамки діаграми
o NotSet – Не визначено
o Dash – Пунктирна риска
o DashDot – Риска крапка
o DashDotDot – Риска крапка крапка
o Dot – Лінія з крапок
o Solid – Суцільна лінія
· BorderLineWidth – Товщина лінії рамки діаграми
· Palette – Палітра кольорів діаграми
· PaletteCustomColors – Редагування кольорів палітри діаграми
Series
Для зручної розробки в середовищі представлено вікно редагування серій показане нижче. В ньому можна відредагувати всі необхідні параметри діаграми, а в процесі виконання просто передати дані для спрощення програмного коду.
Series
· ChartType – Вид діаграми (нижче перераховані лише основні типи)
o Point – Точкова діаграма
o Bubble – «Бульбашкова» діаграма
o Line – Лінійна діаграма
o Spline – Згладжена лінійна діаграма
o StepLine – Діаграма сходинками
o Bar – Горизонтальна стовпчаста діаграма
o Column – Гістограма (стовпчаста діаграма)
o Pie – Секторна діаграма
o Doughnut – Секторна діаграма із пустою серединою
o Pyramid – Пірамідальна діаграма
· Points – Данні графіка. Можуть бути одно- і дво- вимірні в залежності від типу діаграми.
· Label – Мітка даних
· LegendText – Підпис серії діаграми
Points
Якщо діаграма статична (не змінюється в процесі виконання програми) то в середовищі є вікно редагування даних діаграми. Якщо потрібно в процесі розробки подивитися як виглядає діаграма, то треба видалити всі дані і система автоматично додасть декілька точок, щоб ви могли оцінити загальний вигляд. Вікно наведене нижче.
Властивості та методи класу пересікаються із наведеними вище класами Chart та Series, тому розглядати ми їх не будемо.
Стандартний алгоритм дій при створенні діаграми в додатку.
Розглянемо приклад додання діаграми на форму. Припустимо що у на с на формі 3 компоненти – це chart1, button, dataGridView (для першого прикладу містить 2 колонки (значення та підпис), для другого – 3 колонки (координата Х, координата Y та підпис))
Отже в таблиці у нас містяться данні які потрібно відобразити на діаграмі. В залежності від виду діаграми підписи данних потрібно передавати в різні властивості.
Приклад 1. Значення для діаграми одновимірні
private void button1_Click(object sender, EventArgs e)
{
//Видаляємо всі точки діаграми які містились до натискання по кнопці
chart3.Series[0].Points.Clear();
//Перебираємо всі рядки DataGridView
foreach (DataGridViewRow rw in dataGridView1.Rows)
{
//Якщо це не новий рядок додаємо дані
if (!rw.IsNewRow)
{
//Оголошуємо змінні для зручності
string v="0";string z="";
double r;
//Перевіряємо чи міститься значення в клітинці
if (rw.Cells[0].Value!=null)
v = rw.Cells[0].Value.ToString();
if (rw.Cells[1].Value!=null)
z = rw.Cells[1].Value.ToString();
r = Convert.ToDouble(v);
DataPoint p;
//Додаємо точку
p=chart3.Series[0].Points.Add(r);
//Підписуємо значення точки
p.Label = v;
//Підписуємо міткою
p.AxisLabel = z;
}
}
}
Приклад 2. Дані для діаграми двовимірні
private void button3_Click(object sender, EventArgs e)
{
//Видаляємо всі точки діаграми які містились до натискання по кнопці
chart1.Series[0].Points.Clear();
//Перебираємо всі рядки DataGridView
foreach (DataGridViewRow rw in dataGridView3.Rows)
{
//Якщо це не новий рядок додаємо дані
if (!rw.IsNewRow)
{
//Оголошуємо змінні для зручності
string x = "0"; string z = "";
double rx,ry; string y = "0";
//Перевіряємо чи міститься значення в клітинці
if (rw.Cells[0].Value != null)
x = rw.Cells[0].Value.ToString();
if (rw.Cells[1].Value != null)
y = rw.Cells[1].Value.ToString();
if (rw.Cells[2].Value != null)
z = rw.Cells[2].Value.ToString();
rx = Convert.ToDouble(x);
ry = Convert.ToDouble(y);
//Додаємо точку
DataPoint p = new DataPoint(ry,rx);
chart1.Series[0].Points.Add(p);
//Підписуємо значення та мітку точки
p.Label = z;
p.AxisLabel = y;
}
}
}