ECharts - библиотеки для создания визуализаций, имеют открытый исходный код. Данная статья посвящена интеграции SiglaVision и ECharts, а также тому, как создавать данный тип диаграмм. Информацию о построении графиков ECharts и особенностях работы с данным инструментом доступна по этой ссылке , а также в свободных источниках. ! Ограничения : ECharts не позволяет использовать фильтрацию "от" визуализации ECharts (при клике на ECharts не будет происходить фильтрации остальных компонентов дашборда). Все остальные фильтры, применяемые "к" ECharts - работают.
Создание диаграмм#
Для создания графиков ECharts потребуется подготовить новую Рабочую книгу, а затем выполнить следующие шаги:
- Выбрать тип графика ECharts.
Добавить в разделе "Свойства диаграммы" поля, которые будут использоваться. По умолчанию, это круговая диаграмма, рекомендуется использовать 1 измерение и 1 меру. После этого, простая круговая диаграмма построится автоматически. При этом, слева будет находиться код графика на JavaScript, а справа - сама диаграмма.
При необходимости, можно дополнительно настроить график. Для этого нужно дополнительно отредактировать код в левой части области предпросмотра. Существует два раздела: Операторы конфигураций и Операторы данных. Так, в разделе Операторы конфигураций можно настроить внешний вид диаграммы, а Операторы выполняют предварительную обработку данных.
Для предпросмотра изменений необходимо нажать кнопку Выполнить, а для того, чтобы изменения вступили в силу - кнопку Сохранить.
- Настройки диаграммы можно сохранить и переиспользовать в других компонентах. Для этого необходимо выбрать кнопку Сохранить шаблон как, а после этого - заполнить все поля. При необходимости можно опубликовать этот шаблон - тогда он будет доступен для других разработчиков.
- Чтобы воспользоваться готовым шаблоном, необходимо выбрать кнопку Ссылка на шаблон, а затем выбрать нужный из списка.
Редактирование кода#
Код разделен на две части: подготовка данных. Приведение полей к единой таблицы. Например:
Преобразует 3 поля в единую "таблицу" формата колонка 1 соотв. 1ому полю, колонка 2 второму полю и тд.
Далее представлен основной код создания визуализации, подобный код может помочь сформировать LLM (Большая Языковая Модель). Это можно делать постепенно, добавляя по одному улучшению за 1 запрос к LLM. И в итоге мы получим визуализацию, аналогичную на скриншоте выше.
Еще один пример возможной визуализации, выведена активная легенда.