📖 Документация Qumir

← Вернуться в Playground

← Все примеры

Столбчатая диаграмма

Визуализация данных в виде столбчатой диаграммы с осями, подписями и заголовком. Программа показывает, как использовать массивы для хранения данных и отдельную процедуру для рисования каждого столбца.

Разбор

Подготовка данных

использовать Чертежник

алг
нач
    вещ таб данные[0:4]
    лит таб названия[0:4]
    цел i

    данные[0] := 3.5
    данные[1] := 5.2
    данные[2] := 2.8
    данные[3] := 4.6
    данные[4] := 3.1

    названия[0] := "A"
    названия[1] := "B"
    названия[2] := "C"
    названия[3] := "D"
    названия[4] := "E"

Объявляются два массива с индексами от $0$ до $4$ (5 элементов):

Рисование осей

    выбрать чернила(0)  | черный
    опустить перо

    | Ось Y
    поднять перо
    сместиться в точку(0.0, 0.0)
    опустить перо
    сместиться в точку(0.0, 6.0)

    | Ось X
    поднять перо
    сместиться в точку(0.0, 0.0)
    опустить перо
    сместиться в точку(6.0, 0.0)

Оси диаграммы рисуются чёрным цветом. Вертикальная ось (ось значений) идёт от $(0, 0)$ до $(0, 6)$, горизонтальная ось (ось категорий) -- от $(0, 0)$ до $(6, 0)$.

Рисование столбцов в цикле

    нц для i от 0 до 4
        столбец(i, данные[i], названия[i])
    кц

Цикл проходит по массиву и вызывает процедуру столбец для каждого элемента, передавая номер, высоту и подпись.

Заголовок

    поднять перо
    выбрать чернила(0)
    сместиться в точку(0.5, 6.5)
    написать(3.0, "ДАННЫЕ")
кон

Заголовок «ДАННЫЕ» выводится чёрным цветом над диаграммой.

Процедура столбец

алг столбец(цел номер, вещ высота, лит название)
нач
    вещ x, ширина
    цел цвет

    ширина := 0.8
    x := 0.5 + номер * 1.0

Горизонтальная позиция каждого столбца вычисляется по формуле $x = 0{,}5 + \text{номер} \times 1{,}0$. Ширина столбца фиксирована -- $0{,}8$. Между столбцами остаётся зазор $0{,}2$.

Выбор цвета и рисование контура

    цвет := 1 + mod(номер, 5)
    выбрать чернила(цвет)

    опустить перо
    поднять перо
    сместиться в точку(x, 0.0)
    опустить перо
    сместиться в точку(x + ширина, 0.0)
    сместиться в точку(x + ширина, высота)
    сместиться в точку(x, высота)
    сместиться в точку(x, 0.0)

Выражение 1 + mod(номер, 5) циклически назначает цвета от $1$ до $5$. Функция mod возвращает остаток от деления, поэтому даже при большом количестве столбцов цвета будут повторяться. Контур столбца -- это прямоугольник из четырёх отрезков.

Подпись под столбцом

    поднять перо
    выбрать чернила(0)
    сместиться в точку(x + ширина / 4.0, -0.3)
    написать(0.3, название)
кон

Под каждым столбцом выводится его название чёрным цветом. Позиция подписи смещена на четверть ширины столбца вправо от его левого края, чтобы текст был примерно по центру.

Полная программа

| Простая столбчатая диаграмма
использовать Чертежник

алг
нач
    вещ таб данные[0:4]
    лит таб названия[0:4]
    цел i

    | Данные для диаграммы
    данные[0] := 3.5
    данные[1] := 5.2
    данные[2] := 2.8
    данные[3] := 4.6
    данные[4] := 3.1

    названия[0] := "A"
    названия[1] := "B"
    названия[2] := "C"
    названия[3] := "D"
    названия[4] := "E"

    | Рисуем оси
    выбрать чернила(0)  | черный
    опустить перо

    | Ось Y
    поднять перо
    сместиться в точку(0.0, 0.0)
    опустить перо
    сместиться в точку(0.0, 6.0)

    | Ось X
    поднять перо
    сместиться в точку(0.0, 0.0)
    опустить перо
    сместиться в точку(6.0, 0.0)

    | Рисуем столбцы
    нц для i от 0 до 4
        столбец(i, данные[i], названия[i])
    кц

    | Заголовок
    поднять перо
    выбрать чернила(0)
    сместиться в точку(0.5, 6.5)
    написать(3.0, "ДАННЫЕ")
кон

| Рисует один столбец диаграммы
алг столбец(цел номер, вещ высота, лит название)
нач
    вещ x, ширина
    цел цвет

    ширина := 0.8
    x := 0.5 + номер * 1.0

    | Выбираем цвет столбца (циклически)
    цвет := 1 + mod(номер, 5)
    выбрать чернила(цвет)

    | Рисуем столбец
    опустить перо
    поднять перо
    сместиться в точку(x, 0.0)
    опустить перо
    сместиться в точку(x + ширина, 0.0)
    сместиться в точку(x + ширина, высота)
    сместиться в точку(x, высота)
    сместиться в точку(x, 0.0)

    | Подпись под столбцом
    поднять перо
    выбрать чернила(0)
    сместиться в точку(x + ширина / 4.0, -0.3)
    написать(0.3, название)
кон

▶ Запустить пример