Тема.  Визуализация элементов табличной величины с помощью графических примитивов.

Для лучшего восприятия данных, отношений между ними используют их графическое представление определенными геометрическими фигурами.

Рассмотрим, как можно графически представить (визуализировать) элементы табличной величины, используя компонент Фигура.
Например, как можно изобразить значения элементов табличной величины высотами соответствующих прямоугольников и таким образом получить изображение, аналогичное столбчатой диаграмме.

Пример 1.

Вариант1.

• Разместим на форме 5 компонентов Фигура и установим для каждого из них значения stRectangle  свойства Shape.
•  Во время выполнения обработчика события Click для кнопки , используя функцию random  будет создавать табличную величину из 5 элементов и значение этих элементов будет присвоено высотам соответствующих прямоугольников.
• Для наглядности значения элементов  массива будут считываться  в многострочное текстовое поле. 

Программный код

procedure TForm1.Button1Click(Sender: TObject);
   var a:array[0..4] of integer; i: integer;
begin
   for i:=0 to 4 do    begin    a[i] := random(80);    memo1.Lines[i]:= inttostr(a[i]);    end;
   shape1.Height:= a[0];   shape2.Height:= a[1];
   shape3.Height:= a[2];   shape4.Height:= a[3];
   shape5.Height:= a[4];
end;                  

Вариант 2.

•     Можно рассмотреть табличную величину b из 5 элементов типа TShape, значениями которых будут компоненты Фигура, расположенных на форме.
• Значение этим элементам предоставим командами присваивания:
            b [1] = Shape1; b [2] = Shape2; b [3] = Shape3;
            b [4] = Shape4; b [5] = Shape5;,где Shape1, Shape2, Shape3, Shape4, Shape5 - имена этих компонентов.
• Используя функцию random  будем создавать табличную величину  а из 5 элементов. Для наглядности значения элементов  табличной величины  а будут считываться  в многострочное текстовое поле. 
• Вместо пяти команд присваивания высотам соответствующих прямоугольников значений элементов табличной величины а можно записать одну команду цикла: for i:=0 to 4 do  b[i].Height:= a[i];

Программный код 

procedure TForm1.Button1Click(Sender: TObject);
  var a:array[0..4] of integer; i: integer; b :array[0..4] of TShape;
begin
   for i:=0 to 4 do
       begin
         a[i] := random(80);
         memo1.Lines[i]:= inttostr(a[i]);
      end;
 b[0] :=shape1;    b[1] :=shape2;   b[2] :=shape3;
 b[3] :=shape4;   b[4] :=shape5;
 for i:=0 to 4 do  b[i].Height:= a[i];
end;        
 

Вариант 3. 

Масштабирование высот прямоугольников.

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

В таком случае:

• если можно, нужно увеличить размеры окна так, чтобы все прямоугольники полностью были видны;
• если же размеры окна по каким-то причинам во время выполнения проекта изменить нельзя, то нужно выполнить масштабирование высот прямоугольников.

Например, можно:

1. определить наибольшее значение в табличной величине и установить, что высота прямоугольника, которая соответствует этому элементу табличной величины, будет фиксированной, например 100;
2. а дальше высоты всех прямоугольников умножить на коэффициент масштабирования, равный отношению выбранной максимальной высоты прямоугольника на максимальное значение в табличной величине

Программный код проекта 

procedure TForm1.Button1Click(Sender: TObject);
  var a:array[0..4] of integer;// текущее значение элемента массива - значение высоты  соответствующего прямоугольника
 i, max: integer;
 b :array[0..4] of TShape; //отображение значений после  масштабирования
z :array[0..4] of TShape; //  отображение значений до масштабирования 
begin
   b[0] :=shape1;    b[1] :=shape2;   b[2] :=shape3;
   b[3] :=shape4;   b[4] :=shape5;

   z[0] :=shape6;    z[1] :=shape7;   z[2] :=shape8;
   z[3] :=shape9;   z[4] :=shape10;

   for i:=0 to 4 do
       begin
        a[i] := random(200); // формируем очередной элемент массива
        memo1.Lines[i]:= inttostr(a[i]); //для сопоставления полученных данных  заполняем строки многострочного поля 
       end;

            max:= a[1];

           for i:=1 to 4 do if a[i]>max then max:= a[i]; //поиск максимального значения среди элементов массива а

          for i:=0 to 4 do begin b[i].Height:= round(a[i]*100/max); z[i].Height:= a[i]; end;
end;         

Обращаем ваше внимание:

1. поскольку высота прямоугольника может быть только целым числом, а в результате операции деления может быть дробное число, в команде b [i] .Height = round (a [i] * 100 / max)  выполнено округление с использованием функции round (англ. Round - круглый);
2. таким же образом можно масштабировать высоты прямоугольников, если значение элементов табличной величины а малые, так и малыми будут высоты соответствующих прямоугольников.

Вариант 4.

 Визуализировать значения элементов числовой табличной величины можно с использованием свойства Canvas формы.

Рассмотрим пример.

procedure TForm1.Button1Click(Sender: TObject);
var a:array[0..7] of integer; i,L : integer; //Переменная L использована для изменения абсцисс левой нижней и правой верхней вершин прямоугольников
begin
   for i:=0 to 7 do   begin   a[i] := random(300);   memo1.Lines[i]:= inttostr(a[i]);   end;
   L:=5; //начальное значение взято 5 (можно было бы взять и другое значение)
   for i:=0 to 7 do 
        begin 
            canvas.Rectangle(L,form1.Height,L+20,form1.Height - a[i]);{Для того чтобы визуализация была более похожа на традиционный вид диаграммы, для ординат левой нижней и правой верхней вершин прямоугольников использовано числа:Form1.Height и Form1.Height-a [i]}
            L:=L + 25;{}
        end;
end; 

Ширина прямоугольника взята 20 поэтому абсциссы левой нижней  вершины прямоугольников и абсциссы правой верхней вершин прямоугольников соответственно равны: L и L + 20
Расстояние между прямоугольниками взята 5 (поэтому в цикле значения L увеличивается на 25

Пример 2.  Визуализация элементов табличной величины

• 2017 Февраль