...
Данный пример довольно специфичный и требовательный к качеству данных. Но на выходе мы получаем очень наглядную визуализацию, показывающую грузоперевозки из страны отправления в страну назначения.
...
📚 Данные
...
Для построение построения нашего колеса зависимостей необязательно знать подробности модели данных, которая может быть довольно сложной. Самое главное иметь представление о том, что кладется в столбцы и строки в запросе на ViQube для виджета, и как потом мы манипулируем с прилетевшей из ViQube информацией для отображения именно того, что нам нужно: а именно топ топа-10 стран по экспорту товаров и все связи между ними на колесе.
...
Всего получилось 100 строк в таблице в рамках данного примера. Но может быть и больше. Первая ячейка - страна импортёр, вторая - страна экспортёр, третья - показатель.
Код виджета
...
Первый Первые 10 строчек необходимы для подключения внешних библиотек на лету. Это нужно только в случаях, когда мы не можем положить библиотеки в папку
/docker-volume/dashboard-viewer/customjsна сервере с платформой. Поэтому в большинстве случаев эти 10 строчек можно смело удалять, предварительно положивsankey.jsdependency-wheel.jsв папкуcustomjs.15-19 строки это преобразование данных с ViQube в массив данных, понятных Highcharts.
С 21 по 33 строчки происходят происходит основная работа с данными, необходимая для правильного выделения топа-10 стран. Причем мы выделяем топ-10 стран по экспорту (по первому измерению).
| Примечание |
|---|
Только для разработчика. |
Подробно алгоритм здесь описывать не будем, скажем лишь как поменять топ-10 на топ-15: в строке 32 меняем число 10 в двух местах на желаемое (15 в нашем случае):
country.splice(15, country.length-15)С 39 строчки отрисовывается сам виджет.
...