Создание анимированного графика: визуализации в Analytic Workspace

Создание анимированного графика. Красивые визуализации в Analytic Workspace

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

Анимация позволит плавно отображать изменение продаж со временем, делая презентацию более привлекательной и понятной для зрителей.

Analytic Workspace предоставляет 23 вида визуализаций «из коробки», что уже обеспечивает широкий выбор для создания наглядных и понятных дашбордов. Но самое интересное заключается в интеграции с библиотекой ECharts, где доступно более 400 видов визуализаций. Это дает возможность создавать практически любые желаемые визуальные представления данных.

Для создания анимированных графиков воспользуемся виджетом типа «HTML».

Создание виджета

Вначале необходимо создать виджет и выбрать для него тип «HTML». В виджете «HTML» доступно три вкладки: HTML, CSS, JS. Нас интересует вкладка HTML.

Во вкладке HTML записываем следующий код, чтобы подключить библиотеку eCharts через CDN (Content Delivery Network) и создать блок с классом main, в который будем рендерить график:

<script src=" https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js "></script>
<div class="main"></div>"

Теперь нужно настроить данные, которые будут отображаться на графике.

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

Создание графика и загрузка данных

Перейдем на вкладку JS в HTML-виджете. Инициируем отрисовку графика, введя на вкладку JS следующий код:

let myChart = echarts.init(document.querySelector('.main'));

Далее объявляем функцию render.

Функция render будет вызываться каждый раз при открытии виджета или изменении данных, таких как выбор значений в системном фильтре. Внутри функции мы получаем необходимые данные и значения фильтров для обновления графика. Затем определяем настройки графика в объекте option, включая тип графика, данные, значения фильтров и другие дополнительные настройки. Наконец, вызываем функцию drawChart, которая будет отрисовывать график с использованием заданных настроек option.

const option = {
    grid: {
      top: 10,
      bottom: 30,
      left: 150,
      right: 80
    },
    xAxis: {
      max: 'dataMax',
      axisLabel: {
        formatter: function (n) {
          return Math.round(n) + '';
        }
      }
    },
    dataset: {
      source: data.filter(function (d) {
        return d["f_4"].value === startYear;
      })
    },
    yAxis: {
      type: 'category',
      inverse: true,
      max: 10,
      axisLabel: {
        show: true,
        fontSize: 14,
        formatter: function (value) {
            return value;
          return value + '{flag|' + getFlag(value) + '}';
        },
        rich: {
          flag: {
            fontSize: 25,
            padding: 5
          }
        }
      },
      animationDuration: 300,
      animationDurationUpdate: 300
    },
    series: [
      {
        realtimeSort: true,
        seriesLayoutBy: 'column',
        type: 'bar',
        itemStyle: {
          color: function (param) {
            
            return countryColors[param?.value?.name?.value] || '#5470c6';
          }
        },
        encode: {
          x: dimension,
          y: 3
        },
        label: {
          show: true,
          precision: 1,
          position: 'right',
          valueAnimation: true,
          fontFamily: 'monospace'
        }
      }
    ],
    // Disable init animation.
    animationDuration: 0,
    animationDurationUpdate: updateFrequency,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear',
    graphic: {
      elements: [
        {
          type: 'text',
          right: 0,
          bottom: 60,
          style: {
            text: startYear,
            font: 'bolder 80px monospace',
            fill: 'rgba(100, 100, 100, 0.25)'
          },
          z: 100
        }
      ]
    }
  };

График будет отрисован после вызова:

myChart.setOption(option);

Получаем статичную гистограмму следующего вида:

Анимирование графика

Анимацию реализуем через периодическое изменение настроек графика (объект option). Для этого внутри функции render объявляем функцию для обновления:

function updateYear(year) {
    let source = data.filter(function (d) {
      return d["f_4"].value  === year;
    });
    let src = source.map(item => [Number(item.f_0.value), Number(item.f_1.value), Number(item.f_2.value), item.name.value, Number(item.f_4.value)])
    option.series[0].data = src;
    option.graphic.elements[0].style.text = year;
    myChart.setOption(option);
  }

Функция принимает текущий год в качестве аргумента. Общий набор данных фильтруется по выбранному году и устанавливается в качестве источника.

Затем через вызов myChart.setOption(option) происходит обновление графика.

Используем JavaScript функцию setTimeout, чтобы запустить периодический ререндер графика.
Для каждого года из списка запланирован вызов обновления графика через величину, пропорциональную частоте обновления (updateFrequency, устанавливается дополнительно).

for (let i = startIndex; i < years.length - 1; ++i) {
    (function (i) {
      setTimeout(function () {
        updateYear(years[i + 1]);
      }, (i - startIndex) * updateFrequency);
    })(i);

Теперь значения меняются динамически.

Заключение

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

Таким образом, благодаря встроенной интеграции с ECharts и возможности подключения других библиотек, AW BI обеспечивает широкий спектр вариантов для создания красивых и информативных визуализаций данных.

Главная
→
Технические лайфхаки
→
Создание анимированного графика