Вступление 

Рассмотрим примеры, как оживить графики клика на основе столбчатых диаграмм. Основополагающий принцип тут точно такой же? как и при разработке анимации линейных графиков в первой части статьи.

НА ЗАМЕТКУ! Если раскрыть правую боковую панель: “Панель управления”, то на ней вы найдете список других видов анимаций столбчатых диаграмм. Попробуйте повыбирать и их тоже.

Перейдем к построению…

Исходные данные

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

Создаем “Bar Chart”. Сделаем сначала обычный Chart без какой-либо анимации, чтобы потом было понятно, как оживить другие, уже готовые графики.
Итак, при создании “Bar Chart” на первой вкладке “General” просто убираем галочку “Show Title in Chart” и нажимаем кнопку “Далее >”.

Следующую вкладку “Dimensions” пропускаем, так как у нас фиксированное количество известных показателей, т.е. снова нажимаем кнопку “Далее >”.

А на вкладке Expressions прописываем нужную формулу первого показателя. В моем примере я просто напишу вместо формулы константу = 310 и назову показатель “A”.

Добавляем второй показатель-выражение: для примера я также пропишу константу = 155, показатель “B”.

И третий показатель константа 93, показатель “C”. Нажимаем закончить (кнопка “Готово”). Получили пример (А).

Вкладка Style

Переключаем ориентацию отрисовки столбиков на горизонтальное, а вид (“Look”) выберем – вторая миниатюра сверху во втором столбце.

Вкладка Presentation

Отключаем показ легенды, убрав галочку “Show Legend” и отключаем галочку “Pop-up Labels”.

На вкладке Expressions

Включим у всех трех выражений опцию “Values on Data Points”.

Вкладка Colors

Поменяем цвета. Для первого показателя, пропишем желтый цвет:
RGB(255,217,47)

Второй цвет сделаем оранжевым:
RGB(255,128,0)

И третий цвет – красным:
RGB(251,33,9)

Отключаем показ значений на оси абсцисс. Для этого на вкладке Axes достаточно, выбрав первый показатель “A”, включить у него галочку “Hide Axis”.

Увеличим теперь размер шрифта для цифр, выводимых справа у столбиков. Для этого на этой же вкладке Axes, в блоке “Expression Axes” нажимаем кнопку “Font…”. В появившемся окне “Font Dialogs” выбираем Arial, 28, полужирный, да к тому же включим галочку “Drop Shadow”, подтверждаем кнопкой “OK”.

Чтобы цвета выводимых значений совпадали с цветами самих полосок, надо вернуться на вкладку Expressions, раскрыть (+) у первого выражения и прописать ему свойство “Text Color” как:
Color(1).

Для второго выражения, соответственно “Text Color” пишем:
Color(2).

Для третьего:
Color(3) .

Цвет и размер шрифта у названий показателей слева от столбиков точно также можно настроить отдельно, нажав на кнопку “Font…”, но уже в блоке “Dimension Axis”.
Arial, 28, полужирный, цвет зададим RGB(148,192,199).

Ну и заголовок отключаем.
(на вкладке “Caption” просто убираем галочку “Show Caption”). Вот всё готово к анимации…

Добавляем анимацию.

Для оживления графика нам понадобится в скрипте создать вспомогательную таблицу:
animation:

LOAD RowNo() as ID AUTOGENERATE 31;

Когда у нас уже создана такая таблица или уже есть независимое поле
для такого рода анимаций, то на вкладке Dimensions добавляем в качестве первого и единственного дименшена поле ID и уберем галочки “Label” и “Show Legend”.

Тут же, нажав кнопку “Animate…”, заходим в настройки анимации:
включаем её галочкой: “Animate First Dimension”.

Далее время между отрисовками кадров (параметр “Time Between Values (ms)”) вписываем равным 50, и, следовательно, получается 20 кадров в секунду.

Этот параметр 20 и вписываем в поле “Frame per Second”.
Ставим галочку “Autoplay”, оставляя параметр “Play Once” не включенным.
Нажимаем “OK”.

Теперь параметр “ID” можно использовать в своих выражениях.

Перейдем на вкладку Expressions и подправим наши формулы в выражениях.

Для первого формула будет:
Round(310*ID/31)

Второе выражение примет вид:
Round(155*ID/31)

И третье:
Round(93*ID/31)

Как видим, зная, до какого значения будет меняться параметр ID, на это значение мы и делим его в формулах, получая меняющийся во время анимации множитель от 0 до 1.
Понятно, что вместо констант, использованных в выражениях данного примера, вы можете подставить любую свою нужную формулу или расчетную переменную.

Также для моего примера я добавлю в качестве фона к моему графику
темно-синюю карту мира.

Фоновую картинку можно добавить на вкладке Colors. Просто переключаемся в блоке “Frame Background” на вариант “Image” и выбираем подходящую картинку. А чтобы картинка заполнила фоном весь объект, а не только область построения, нужно отключить галочку “Plot Area Only”. Получили пример анимации вида “СОВМЕСТНО”.

Нижнюю полоску управления анимацией можно прикрыть другим объектом, расположив его над объектом графика.

НА ЗАМЕТКУ! Чтобы уменьшить область отрисовки графика внутри объекта, уменьшите эту область, удерживая вместе левый Ctrl+Shift, но только при временном отключении анимации! на вкладке “General”).

Рассмотрим второй пример анимации “ПО ОЧЕРЕДИ” для столбчатых диаграмм. В этот раз рассмотри случай, когда количество выводимых столбцов зависит от какой-либо размерности.

Пусть в нашем случае в качестве исходных данных будет таблица вида:

DATA_GROUP, DATA_VAR, DATA_SUMMA
group-1, 1, 28
group-1, 2, 11
group-2, 3, 13
group-3, 4, 9
group-1, 5, 13

НА ЗАМЕТКУ! То есть в ней есть две размерности: DATA_GROUP, DATA_VAR
и одно поле меры: DATA_SUMMA)

Построим группировку по размерности “DATA_GROUP”.

Создадим для этого объект “Combo Chart”. ,
На первой вкладке “General” выбираем тип “Combo Chart” и убираем галочку “Show Title in Chart”. Нажимаем кнопку “Далее >”.

На вкладке Dimensions выбираем в качестве дименшена поле: “DATA_GROUP”.

Включаем галочку “Suppress When Value Is Null”, но выключаем галочки “Label” и “Show Legend”. Нажимаем “Далее >”.

На вкладке Expressions добавляем первое выражение:
SUM(DATA_SUMMA)
и включим у него показывать значения (галочка: “Values on Data Points”).

На вкладке Axes выбираем наше первое выражение и для него включаем параметр “Static Min” и прописываем в него константу =0.

Также скрываем ось ординат, включив галочку “Hide Axis”.

Увеличим теперь размер шрифта для цифр, выводимых над столбиками. Для этого здесь же на вкладке Axes в блоке “Expression Axes” нажимаем кнопку “Font…”. В появившемся окне “Font Dialogs” выбираем Arial 36 полужирный. Подтверждаем кнопкой “OK”.

Теперь анимация. На вкладке Dimensions добавляем ещё один дименшин – поле ID для анимации. И переместим его на первое место (кнопка “Promote”). Выключим для него галочку “Label”. Тут же, нажав кнопку “Animate…”, заходим в настройки анимации: включаем её галочкой: “Animate First Dimension”. Далее время между отрисовками кадров (параметр “Time Between Values (ms)”) вписываем равным 40 и, следовательно, получается 25 кадров в секунду. Этот параметр 25 и вписываем в поле “Frame per Second”. Ставим галочку “Autoplay”, оставляя параметр “Play Once” не включенным. Нажимаем “OK”.

На вкладке Expressions:

Чтобы понимать в формуле, какой по порядку рисуется столбец на графике, вне зависимости в какой комбинации выбраны группы, добавим вспомогательное вычисляемое поле. Добавим второе выражение:

IF( IsNull(Above([счетчик])), 1, Above([счетчик])+1)

и обязательно, не забудем, прописать для него “Label” как счетчик.

А в “Display Options” для второго выражения переключимся на “Symbol”, убрав галочку с “Line”. И чтобы счетчик не отображался на графике? сделаем его скрытым, поставив галочку “Invisible”.

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

Вспомним, что у нас анимационный параметр ID пробегает от 1 до 31. А так как в нашем примере всего 4 типа “DATA_GROUP”, то получаетcя по 8 тактов на показ одного столбца. Поэтому формула для первого выражения будет:

IF( ID > [счетчик]*8-8,
IF( ID > [счетчик]*8, SUM(DATA_SUMMA),
Round(SUM(DATA_SUMMA)*MOD(ID-1,8)/7) ))

На вкладке Colors для количества возможных “DATA_GROUP” зададим нужные цвета. В нашем примере для первых четырех цветов заданы значения:
RGB(5,226,105)
RGB(196,251,49)
RGB(238,194,45)
RGB(252,111,50)

На вкладке Presentation отключаем показ легенды, убрав галочку “Show Legend” и отключаем галочку “Pop-up Labels”.

На вкладке Style выберем вид (“Look”).

Но чтобы для каждого значения “DATA_GROUP” зафиксировать свой цвет, который мы прописали на вкладке Color, надо раскрыть дополнительные параметры для первого выражения, нажав (+) и прописать в “Background Color”:

Color(FieldIndex(DATA_GROUP,DATA_GROUP))

Чтобы и числа были таким же цветом, что и столбец пропишем точно такую же формулу и в “Text Color”:

Color(FieldIndex(DATA_GROUP,DATA_GROUP))

Теперь у нас для каждой группы зафиксирован свой цвет.

Надписи групп под столбиками можно оставить как есть, а можно научиться переносить их внутрь столбиков над их основанием. К тому же этот приём можно использовать, чтобы выводить абсолютно любую дополнительную информацию внутри столбиков, а не только повторять название групп.

Для этого добавим третье выражение на вкладке Expressions:
DUAL( DATA_GROUP, 1)

Для него так же включим галочку “Values on Data Points” и переключимся на “Symbol”, убрав галочку с “Line”. А также скрываем его, поставив галочку “Invisible”.

Чтобы можно было использовать другой шрифт или размер шрифта для этих надписей внутри столбиков, надо на вкладке Axes выбрать третье выражение и переключить для него параметр “Position” с “Left” на “Right”.
К тому же надо задать для него особый масштаб, включив “Static Min” и “Static Max” (для MIN – впишем 0, для MAX =30). Правую ось отключаем, ставим галочку “Hide Axis”.

НА ЗАМЕТКУ! Как я уже писал, вместо выражения DATA_GROUP в первом параметре функции DUAL, можно прописать любой желаемый текст для вывода.

Получили пример (Е).

Ну, и последние штрихи. Теперь можно отключить вывод названий групп под осью абсцисс. Для этого на вкладке “Dimensions” отключаем галочку “Show Legend” у первого дименшина ID. Отключаем заголовок (галочка “Show Caption” на вкладке Caption) и добавим нужный фон (вкладка Colors, блок “Frame Background”, параметр “Image”).
Галочку “Plot Area Only” отключаем. Нижнюю полосу анимации закрываем поверх белой полоской объекта “Text”.

Итак, наш пример анимации “ПО ОЧЕРЕДИ” готов!

Друзья, на этом сегодня все! До новых встреч в эфире!