📋 Вступление
Данный пример довольно специфичный и требовательный к качеству данных. Но на выходе мы получаем очень наглядную визуализацию, показывающую грузоперевозки из страны отправления в страну назначения.
📚 Данные
Для построение нашего колеса зависимостей необязательно знать подробности модели данных, которая может быть довольно сложной. Самое главное иметь представление о том, что кладется в столбцы и строки в запросе на ViQube для виджета и как потом мы манипулируем с прилетевшей из ViQube информаций для отображения именно того что нам нужно: а именно топ 10 стран по грузоперевозкам и все связи между ними на колесе.
В качестве данных загружено 100 строк таблицы. Первая ячейка - страна импортёр, вторая - страна экспортёр, третья - показатель.
Код виджета
Развернуть / Свернуть
// Подключаем библиотеки необходимые для Колеса распределения
let tempElem = document.createElement('script');
let tempElem2 = document.createElement('script');
tempElem.type = 'text/javascript';
tempElem.src = 'https://code.highcharts.com/7.1.3/modules/sankey.js'
document.head.append(tempElem);
tempElem2.type = 'text/javascript';
tempElem2.src = 'https://code.highcharts.com/7.1.3/modules/dependency-wheel.js'
tempElem2.onload = render;
document.head.append(tempElem2);
var time = performance.now()
// Готовим массив всех данных
var tempArr = [];
for (var i= 0; i < w.data.rows.length; i++){
tempArr.push([w.data.rows[i][0], w.data.rows[i][1], w.data.values[0][i]])
}
// Создаём массив уникальных имён первого измерения w.data.rows[i][0], и подсчитываем сумму всех элементов с таким именем.
let country = [];
for (let str of tempArr) {
if (!country.map(item => item[0]).includes(str[0])) {
country.push([str[0]]);
}
if (country[country.map(item => item[0]).indexOf(str[0])].length <2) {country[country.map(item => item[0]).indexOf(str[0])].push(str[2])}
else {country[country.map(item => item[0]).indexOf(str[0])][1] += str[2]}
}
// Сортируем список уникальных имён и оставляем Топ-10, после чего массив значений фильтруем по имеющимся именам в Топ-10, имена проверяем и в 1 и во 2 измерении
country.sort(function(a, b) { return b[1] - a[1]; });
country.splice(10, country.length-10);
tempArr = tempArr.filter(item => (country.map(it => it[0]).includes(item[0])>0) && (country.map(it => it[0]).includes(item[1])>0) && (item[2] !== null))
time = performance.now() - time;
console.log('Время выполнения = ', time);
function render () {Highcharts.chart(w.general.renderTo, {
series: [{
keys: ['from', 'to', 'weight'],
data: tempArr,
type: 'dependencywheel',
name: 'Направление перевозок'
}]
});}
🎞 Пример
💡 Советы и лайфхаки