Название кейса | Грузоперевозки между странами |
---|---|
Описание кейса | Показываем все международные транзитные перевозки через Россию. |
Версия платформы | 2.17 |
Статус | ЧЕРНОВИК |
Сложность | Надо попотеть |
Используемые библиотеки |
📋 Вступление
📚 Данные
В качестве данных загружено 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: 'Направление перевозок' }] });}