Компонент Chart – удобный инструмент создания различных графиков и диаграмм с широкими возможностями и эффектным построением входных данных. Компонент Chart обладает множеством свойств, событий и методов, которые значительно сокращают время разработки приложений.
Компонент Chart это контейнер объекта Series типа TChartSeries. Этот тип относится к сериям данных, которые квалифицируются различными стилями оформления. Компонент Chart позволяет работать одновременно с несколькими сериями Series. Если нужно отображать несколько графиков в одном окне, то каждая серия отвечает за одну кривую на графике. Если нужно вывести данные в диаграмму, то в этом случае можно наложить несколько разных серий.
Свойства компонента Chart
| Значение | Описание |
|---|---|
| AllowPanning | Позволяет прокручивать область графика во время выполнения в режиме реального времени:
|
| AllowZoom | Позволяет изменять масштаб изображения во время выполнения, выделяя курсором мыши фрагменты графика или диаграммы. |
| Title | Задаёт заголовок диаграммы. |
| Foot | Задаёт подпись под диаграммой. Текст подписи является подсвойством Text. По умолчанию подпись отсутствует. |
| Frame | Задаёт рамку вокруг диаграммы. |
| Legend | Отображает список обозначений в виде легенды. |
| MarginLeft, MarginTop, MarginRight, MarginBottom | Задаёт значения отступа левого, верхнего, правого и нижнего полей. |
| LeftAxis, RightAxis, BottomAxis | Задают характеристики левой, правой и нижней осей. |
| LeftWall, BottomWall, BackWall | Позволяют определить характеристики левой, нижней и задней граней для трёхмерного графика. |
| SeriesList | Список серий с данными, которые включены в компоненте. |
| View3d | Включает трёхмерное отображение диаграммы. |
| View3DOptions | Задаёт характеристики трёхмерного отображения диаграммы. |
| Chart3DPercent | Задаёт масштаб трёхмерности. |
Большинство из описанных свойств компонента Chart имеют дополнительные параметры, которые вызываются нажатием в «Инспекторе объектов» кнопкой с многоточием. Где вызывается страница «Редактор диаграмм» (позволяет устанавливать все свойства диаграмм). Так же вызвать «Редактор диаграмм» можно двойным кликом левой кнопки мыши по компоненту Chart или же правой кнопкой мыши, выбрав команды Edit Chart.
Series – добавление графиков
Чтобы добавить в компонент Chart график следует проделать несколько не сложных пунктов:
- Открыть окно «Редактор диаграмм» компонента Chart.
- Перейти в закладку Series и нажать на кнопке Add, которая позволяет добавить серию Series.
- Появится список имеющихся типов графиков и диаграмм. Здесь можно выбрать ту или иную диаграмму для требуемых задач.
- После выбора желательно в разделе Titles задать заголовок диаграмме, в разделе Legend задать параметры для отображения легенды (списка обозначений), в разделе Panel задать внешний вид панели, остальные параметры по желанию.
При добавлении графика или диаграммы в компонент Chart, они создаются с демо-данными, чтобы можно было посмотреть результат отображения, применяя различные параметры. Кроме этого в «Редактор диаграмм» в разделе Series имеется ряд различных закладок, которые позволяют ещё глубже и детальнее настраивать серии.
Параметры круговой диаграммы
- Опция Circled Pie на закладке Format позволяет отображать круговую диаграмму при любом масштабировании компонента Chart.
- Опции в Style на закладке Marks позволяет настроить ярлычки к различным сегментам диаграммы: Percent – проценты, Value – значение, Label – названия данных и прочее.
- Можно установить шаблон отображения значений на закладке General.
Компонент Chart позволяет дублировать настроенную серию. В разделе Series окна «Редактор диаграмм» компонента Chart есть кнопка Clone, которая позволяет мгновенно скопировать созданную серию. После клонирования можно изменить тип диаграммы или некоторые параметры с помощью кнопки Change.
Общие параметры диаграмм
Раздел Axis в «Редактор диаграмм» позволяет детально задать и настроить отображение координатных осей графиков и диаграмм.
Раздел Walls позволят настроить отображение трёхмерных граней графика.
Методы серий Series
При работе с компонентом Chart и сериями Series следует знать несколько основных и часто используемых методов:
- Clear – очищает серию от всех входных данных.
- Add – добавляет новую точку в график или диаграмму со следующими параметрами:
- AValue – отображает входное значение;
- ALabel – отображает название добавленной точки (параметр является не обязательным и можно оставить значение пустым);
- AColor – устанавливает цвет точки.
- AddXY – добавляет новую точку в график функции со следующими параметрами:
- AXValue и AYValue – устанавливают значения аргументу и функции;
- ALabel и AColor выполняют те же функции, что и в методе Add.
Пример создания графика
int A1 = 55, A2 = 21, A3 = 33, A4=44;
const float Pi = 3.14159;
Series1->Clear();
Series2->Clear();
Series3->Clear();
Series1->Add(A1,"User 1",clYellow);
Series1->Add(A2,"User 2",clBlue);
Series1->Add(A3,"User 3",clRed);
Series1->Add(A4,"User 4",clPurple);
for(int i = 0; i <= 100; i++)
{
Series2->AddXY(Pi*i,sin(0.1*Pi*i)*10,"",clRed);
Series3->AddXY(Pi*i,cos(0.1*Pi*i)*10,"",clBlue);
} 
Функции Clear для каждой серии нужны, чтобы в процессе работы программы данные обновлялись. Без этого при повторном построении графиков с помощью методов Add и AddXY, новые точки продолжат добавляться к графикам.
В компоненте Chart можно создать две серии Series для отображения одинаковых данных, но с разным видов, например, Pie и Bar, и для пользователя предусмотреть возможность выбора отображения той или иной диаграммы. Так, например, в событие OnClick кнопки Button можно создать простую обработку, которая загрузит данные в Series и сделает её невидимой:
Series2->Assign(Series1); //Переписывает данные из Series1 в Series2
Series2->Active = false; //Скрывает Series2Процедура смены типа диаграммы очень проста:
Series1->Active =! Series1->Active;
Series2->Active =! Series2->Active;