Компонент Chart
Компонент Chart позволяет строить различные диаграммы и графики. Компонент Chart имеет множество свойств, методов, событий. Рассмотрим только основные характеристики.
Компонент Chart является контейнером объектов Series типа TChartSeries − серий данных, характеризующихся различными стилями отображения. Каждый компонент может включать несколько серий. Например, при отображении графика каждая серия будет соответствовать одной кривой на графике. Очевидно, что в этом случае серии можно наложить друг на друга. В случае же диаграмм, например круговых, наложение затруднит понимание представленных данных. Однако в последнем случае можно задать для одного компонента Chart несколько серий одинаковых данных с разным типом диаграммы. Тогда, делая в каждый момент времени активной одну из них, можно предоставить пользователю выбор типа диаграммы, отображающей интересующие его данные.
Создайте для проекта приложения каталог (папку Windows), запустите C++Builder 6, создайте новый проект, назовите форму ДЕМОНСТРАЦИЯ КОМПОНЕНТА CHART и командой Сохранить все сохраните файл модуля и проект под разными именами.
Разместите на пустой форме компонент Chart со страницы Additional и просмотрите открывшиеся в Инспекторе Объектов свойства. Поясним некоторые из них.
| AllowPanning | Определяет возможность пользователя прокручивать наблюдаемую часть графика во время выполнения, нажимая правую кнопку мыши. Возможные значения: pmNone − прокрутка запрещена, pmHorizontal, pmVerticalили pmBoth − разрешена соответственно прокрутка только в горизонтальном направлении, только в вертикальном или в обоих направлениях |
| AllowZoom | Позволяет пользователю изменять во время выполнения масштаб изображения, вырезая фрагменты диаграммы или графика курсором мыши |
| Title | Определяет заголовок диаграммы |
| Foot | Определяет подпись под диаграммой. По умолчанию отсутствует. Текст подписи определяется подсвойством Text |
| Frame | Определяет рамку вокруг диаграммы |
| Legend | Легенда диаграммы − список обозначений |
| MarginLeft, MarginRight, MarginTop, MarginBottom | Значения левого, правого, верхнего и нижнего полей |
| BottomAxis, LeftAxis, RightAxis | Эти свойства определяют характеристики соответственно нижней, левой и правой осей. Задание этих свойств имеет смысл для графиков и некоторых типов диаграмм |
| LeftWall, BottomWall, BackWall | Эти свойства определяют характеристики соответственно левой, нижней и задней граней области трехмерного отображения графика |
| SeriesList | Список серий данных, отображаемых в компоненте |
| View3D | Разрешает или запрещает трехмерное отображение диаграммы |
| View3DOptions | Характеристики трехмерного отображения |
| Chart3DPercent | Масштаб трехмерности (например, толщина диаграммы и ширина лент графика) |
Рядом со многими из перечисленных свойств в Инспекторе Объектов расположены кнопки с многоточием, которые позволяют вызвать ту или иную страницу Редактора Диаграмм − многостраничного окна, позволяющего установить все свойства диаграмм. Вызов Редактора Диаграмм возможен также двойным щелчком на компоненте Chart или щелчком на нем правой кнопкой мыши и выбором команды Edit Chart во всплывшем меню.
Перейдем к проектированию приложения для построения диаграмм и графиков.
1.Сделайте двойной щелчок на компоненте Chart1. Появится окно Редактора Диаграмм (Editing Chart1) с открывшейся страницей Chart, которая имеет несколько закладок. На странице Series щелкните на кнопке Add… − добавить серию. В появившемся окне выбирают тип диаграммы или графика. Выберите Pie − круговую диаграмму. После щелчка на OK снова появится окно Редактора Диаграмм. Сместив его в сторону, увидите, что в компоненте Chart1 на форме отображается вид диаграммы с занесенными в нее условными данными. Благодаря этому пользователь сразу может наблюдать результат применения различных опций к приложению.
2.Перейдите на закладку Titles. В окне редактирования, которое в данный момент соответствует Title − заголовку диаграммы, сотрите TChart и напишите ДИАГРАММА РЕЗУЛЬТАТОВ ЭКЗАМЕНОВ. С помощью выпадающего списка перейдите в окно редактирования Foot и напишите Успеваемость студентов в %.
3.Перейдите на закладку Panel. Теперь можно задать вид панели, на которой отображается диаграмма. В частности, можно задать два варианта цвета панели − постоянный (кнопка Panel Color…) и градиентный (в группе Gradient после установки индикатора Visible задается начальный цвет панели кнопкой StartColor… и конечный − кнопкой EndColor…). Выберите и установите оба варианта цвета панели. Индикатор Visible позволяет переключать варианты.
4.На закладке 3D установите желаемый внешний вид диаграммы: размер, наклон, сдвиг по горизонтали и вертикали, толщину и т.д.
5.Изучите возможности закладки Legend, которая позволяет задать параметры отображения легенды диаграммы (списка обозначений) или вообще убрать ее с экрана.
6.Перейдите на страницу Series Редактора Диаграмм. На закладке Format включите опцию Circled Pie, которая обеспечит при любом размере компонента Chartотображение диаграммы в виде круга.
7.На закладке Marks кнопки группы Style определяют, что будет написано на ярлычках, относящихся к отдельным сегментам диаграммы: Value − значение, Percent − проценты, Label − названия данных и т.д. Включите кнопку Percent, а на закладке General установите шаблон процентов только с целыми процентами.
8.Добавьте на компонент Chart1еще одну тождественную серию, нажав на закладке Series страницы Chart кнопку Clone, а затем для этой новой серии нажмите кнопку Change… (изменить) и выберите другой тип диаграммы − Bar. Очевидно, что наложение двух разных типов диаграммы на одном рисунке затруднит понимание представленных данных. Поэтому выключите индикатор этой новой серии на закладке Series страницы Chart. На этом задание свойств первого компонента Chart1 завершается. Выйдите из Редактора Диаграмм.
9.Перенесите на форму второй компонент Chart2, разместив его под первым компонентом. Для задания свойств перейдите в Редактор Диаграмм Editing Chart2.
10.На закладке Series страницы Chart нажмите кнопку Add…и выберите тип диаграммы Line для графика. Нажав OK, на закладке Series страницы Chart нажмите кнопку Title и в открывшемся окне напишите SIN. Затем повторите все действия этого пункта, но только напишите COS.
11.Перейдите на закладку Axis для задания координатных характеристик осей. В группе Axis нажата кнопка Left. На закладке Title в окно редак-тирования Title: впишите F, в Angle: − 0, размер шрифта Font − равным 16. В группе Axis нажмите кнопку Bottom, в Title: впишите X тем же шрифтом.
12.Перейдите на закладку Titles и в окно редактирования для Title впишите ГРАФИКИ SIN И COS.
13.На закладке Panel установите градиентный вариант цвета панели, отличный от установленного для панели первого компонента.
14.Изучите возможности закладки Walls для задания характеристик трехмерных граней графика.
15.Перейдите на закладку 3D и выключите индикатор 3Dimensions. Изучите другие возможности задания свойств графика на этой закладке.
16.Для задания толщины графиков перейдите на страницу Series, а в ней − на закладку Format. В группе Line нужно нажать кнопку Border и в окне Border Color Editor установить Width равным 3.
На этом проектирование внешнего вида приложения завершается. Осталось написать код, задающий данные, которые нужно отображать. Зададим в круговой диаграмме константные данные, а в графиках − функции синуса и косинуса.
Для задания отображаемых значений используют методы серий Series.Метод Clear очищает серию от занесенных ранее данных.
Метод Add
long int Add(const double AValue, const String ALabel, TColor AColor);
позволяет добавить в диаграмму новую точку. Параметр AValue соответствует добавляемому значению, параметр ALabel− название, которое будет отображаться на диаграмме и в легенде, AColor −цвет. Параметр ALabel −необязательный, его можно задать пустым: “ ”.
Метод AddXY
long int AddXY(double AXValue, double AYValue, const String ALabel, TColor);
позволяет добавить новую точку в график функции. Параметры AXValue и AYValue соответствуют аргументу и функции. Параметры ALabelи AColor− те же, что и в методе Add.
17.Поместите на форме вверху, справа, кнопку Button1 и назовите ее КОНЕЦ, а в обработчик щелчка на этой кнопке впишите Close();.
18.Ниже поместите вторую кнопку Button2 и назовите ее НАРИСОВАТЬ, а в обработчик щелчка на ней впишите:
void __fastcall TForm1::Button2Click(TObject *Sender)
{
int A1=5;
int A2=8;
int A3=5;
int A4=2;
const Pi=3.14159;
Series1->Clear();
Series2->Clear();
Series1->Add(A1,"двоешники",clYellow);
Series1->Add(A2,"троешники",clBlue);
Series1->Add(A3,"хорошисты",clRed);
Series1->Add(A4,"отличники",clPurple);
Series3->Clear();
Series4->Clear();
for(int i=0; i<=100; i++)
{
Series3->AddXY(0.02*Pi*i,sin(0.02*Pi*i),"",clRed);
Series4->AddXY(0.02*Pi*i,cos(0.02*Pi*i),"",clBlue); }
Series2->Assign(Series1);
Series2->Active=false;
}
Первый из двух последних операторов загружает данные из диаграммы Pie в диаграмму Bar и делает последнюю в первый момент невидимой. Смена типа диаграммы происходит при щелчке на диаграмме компонента Chart1. Чтобы это реализовать, выделите компонент Chart1и в обработчик его события OnClickSeriesвпишите:
void __fastcall TForm1::Chart1ClickSeries(TCustomChart *Sender,
TChartSeries *Series, int ValueIndex, TMouseButton Button,
TShiftState Shift, int X, int Y)
{
Series1->Active=!Series1->Active;
Series2->Active=!Series2->Active;
}
19.В заголовочный файл модуля впишите #include <math.h>. Сохраните проект и запустите на выполнение. Убедитесь, что при щелчке на диаграмме меняется ее вид. Убедитесь также, что левой кнопкой можно увеличивать фрагменты графика, а правой кнопкой − перемещать график.