Ход работы

Упражнение 15

1. создайте новый проект.

2. С

   - 50 -

   о страницы Additional перенесите на форму компонент TChart.

3. Измените его размер так, чтобы он занял всю верхнюю часть формы, оставив внизу место для размещения кнопки и нескольких окон редактирования.

4. Перенесите на форму кнопку, три метки и три окна редактирования.

5. Установите надпись на кнопке «Обновить».

6. Установите надписи «Данные 1», «Данные 2» и «Данные З» соответст­венно в метках Label1, Label2 и Label3.

7. Разместите окна редактирования под метками в соответствии с их но­мерами и очистите у них свойство Text.

8. измените свойство Caption формы на «Демонстрация TeeChart».

9. Для вызова Chart Editor (Редактор Диаграмм) щёлкните правой кнопкой мыши на компоненте TChart и во всплыв­шем меню выберите Edit Chart. На экране появится страница Chart, которая имеет несколько закладок. По умолчанию будет выбрана страница Series.

10. На странице Series щёлкните на кнопке Add. Появится диалог, в котором вы можете выбрать тип диаграммы.

11. Выберите круговую диаграмму (pie) и щёлкните на ОК.

12. Вы можете изменить заголовок диаграммы, выбрав страницу Chart и на ней закладку Titles (щёлкните на кнопке Title… справа). Измените заголовок с TChart на «Моя круговая диаграмма».

13. Когда вы все закончили, закройте Chart Editor (Редактор Диаграмм), щёлкнув на кнопке Close. Вы должны увидеть круговую диаграмму, загруженную случайными дан­ными. Это позволяет вам выбрать её размер и позицию на экране, чтобы получить хорошее изображение. Теперь давайте добавим некоторый код, чтобы заносить в диаграмму данные.

- 51 -

Чтобы иметь возможность задавать данные для TeeChart, нужно добавить к кнопке, которая ранее была помещена на форме, код, позволяющий пользователю вводить данные. Щёлкните дважды на этой кнопке и в её событие OnClick добавьте следующее:

procedure TForm1.Button1Click (Sender: TObject);

begin

with Series1 do

begin

Add ( StrToInt (Edit1.Text), 'Данные 1', clRed);

Add ( StrToInt (Edit2.Text), 'Данные 2', clBlue);

Add ( StrToInt (Edit3.Text), 'Данные 3', clGreen);

end;

end;

Этот код заполняет диаграмму данными, вводимыми пользователем, и задаёт цвета отдельных долей круговой диаграммы. Данные посту­пают из диалоговых окон, преобразуются в целые числа и передаются в диаграмму, когда пользователь нажимает кнопку «Обновить».

Сохраните проект. Назовите модуль PIECHART.PAS, а проект — TEECHART.DPR. Запустите проект и увидите на экране форму. Поскольку в диаграмму по умолчанию данные не заносятся, область экрана, отведенная под неё, будет пустая. Чтобы посмотреть диаграмму, введите в окна редак­тирования три числа (например, 10, 20 и 70) и нажмите кнопку «Обновить». На экране должна появиться прекрасная трехмерная диаграмма.

- 52 -