Обзор
Диаграмма Санки — это визуализация, используемая для изображения потока от одного набора значений к другому. Соединяемые вещи называются узлами , а соединения — ссылками . Sankeys лучше всего использовать, когда вы хотите показать сопоставление «многие ко многим» между двумя доменами (например, университетами и специальностями) или несколькими путями через набор этапов (например, Google Analytics использует sankeys, чтобы показать, как трафик передается со страниц на другие страницы вашего сайта).
Для любопытных они названы в честь капитана Сэнки, который создал диаграмму эффективности парового двигателя , в которой использовались стрелки, ширина которых пропорциональна потерям тепла.
Примечание. Диаграмма Санки может подвергнуться существенным изменениям в будущих версиях Google Charts.
Диаграммы Санки отображаются в браузере с использованием SVG или VML , в зависимости от того, что подходит для браузера пользователя. Код макета sankey Google получен из кода макета sankey D3.
Примечание. Диаграммы Санки Google недоступны в Microsoft Internet Explorer 8 и более ранних версиях.
Простой пример
Предположим, у вас есть две категории, A и B, которые связаны с тремя другими категориями: X, Y и Z. Некоторые из этих связей тяжелее других. Например, B имеет тонкую связь с X и гораздо более толстую связь с Y.
Попробуйте навести курсор на одну из ссылок, чтобы выделить соединение.
Чтобы создать диаграмму Санки, предоставьте набор строк, каждая из которых содержит информацию об одном соединении: от, до и вес. Затем используйте метод google.visualization.Sankey() для инициализации диаграммы, а затем метод draw() для ее визуализации:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['sankey']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
[ 'A', 'X', 5 ],
[ 'A', 'Y', 7 ],
[ 'A', 'Z', 6 ],
[ 'B', 'X', 2 ],
[ 'B', 'Y', 9 ],
[ 'B', 'Z', 4 ]
]);
// Sets chart options.
var options = {
width: 600,
};
// Instantiates and draws our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>
</body>
</html>
Примечание. Избегайте циклов в данных: если A ссылается на самого себя или ссылается на B, который ссылается на C, который ссылается на A, ваша диаграмма не будет отображаться.
Многоуровневые санки
Вы можете создать диаграмму Санки с несколькими уровнями связей:
Диаграммы Санки при необходимости добавляют дополнительные уровни, располагая их автоматически. Вот полный код приведенной выше диаграммы:
<html>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>
<script type="text/javascript">
google.charts.load("current", {packages:["sankey"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
[ 'Brazil', 'Portugal', 5 ],
[ 'Brazil', 'France', 1 ],
[ 'Brazil', 'Spain', 1 ],
[ 'Brazil', 'England', 1 ],
[ 'Canada', 'Portugal', 1 ],
[ 'Canada', 'France', 5 ],
[ 'Canada', 'England', 1 ],
[ 'Mexico', 'Portugal', 1 ],
[ 'Mexico', 'France', 1 ],
[ 'Mexico', 'Spain', 5 ],
[ 'Mexico', 'England', 1 ],
[ 'USA', 'Portugal', 1 ],
[ 'USA', 'France', 1 ],
[ 'USA', 'Spain', 1 ],
[ 'USA', 'England', 5 ],
[ 'Portugal', 'Angola', 2 ],
[ 'Portugal', 'Senegal', 1 ],
[ 'Portugal', 'Morocco', 1 ],
[ 'Portugal', 'South Africa', 3 ],
[ 'France', 'Angola', 1 ],
[ 'France', 'Senegal', 3 ],
[ 'France', 'Mali', 3 ],
[ 'France', 'Morocco', 3 ],
[ 'France', 'South Africa', 1 ],
[ 'Spain', 'Senegal', 1 ],
[ 'Spain', 'Morocco', 3 ],
[ 'Spain', 'South Africa', 1 ],
[ 'England', 'Angola', 1 ],
[ 'England', 'Senegal', 1 ],
[ 'England', 'Morocco', 2 ],
[ 'England', 'South Africa', 7 ],
[ 'South Africa', 'China', 5 ],
[ 'South Africa', 'India', 1 ],
[ 'South Africa', 'Japan', 3 ],
[ 'Angola', 'China', 5 ],
[ 'Angola', 'India', 1 ],
[ 'Angola', 'Japan', 3 ],
[ 'Senegal', 'China', 5 ],
[ 'Senegal', 'India', 1 ],
[ 'Senegal', 'Japan', 3 ],
[ 'Mali', 'China', 5 ],
[ 'Mali', 'India', 1 ],
[ 'Mali', 'Japan', 3 ],
[ 'Morocco', 'China', 5 ],
[ 'Morocco', 'India', 1 ],
[ 'Morocco', 'Japan', 3 ]
]);
// Set chart options
var options = {
width: 600,
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
chart.draw(data, options);
}
</script>
</body>
</html>
Управление цветами
Диаграммы Санки имеют возможность устанавливать собственные цвета для узлов и связей. И узлам, и ссылкам можно задать собственные цветовые палитры, используя их параметры colors ( sankey.node.colors и sankey.link.colors соответственно). Им также можно задать разные режимы окраски с помощью опции colorMode .
Если цвета не настроены, по умолчанию используется стандартная палитра материалов.
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
'#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];
var options = {
height: 400,
sankey: {
node: {
colors: colors
},
link: {
colorMode: 'gradient',
colors: colors
}
}
};
Вы можете управлять цветами ссылок, узлов и меток с помощью параметров конфигурации. Здесь мы выбираем три с одинаковым оттенком, но разной яркостью:
Вот как выглядят эти варианты:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae' } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
Вы также можете контролировать прозрачность ссылок с помощью опции sankey.link.color.fillOpacity :
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
Чтобы создать рамку вокруг ссылок, используйте параметры sankey.link.color.stroke и sankey.link.color.strokeWidth :
Цвет обводки можно указать как в формате RGB, так и по английскому названию.
var options = {
width: 750,
height: 400,
sankey: {
node: { colors: [ '#a61d4c' ] },
link: { color: { stroke: 'black', strokeWidth: 1 } },
}
};
Настройка этикеток
Текст на диаграммах Санки можно настроить с помощью sankey.node.label.fontName и его друзей:
Вот строка варианта для приведенной выше диаграммы:
var options = {
width: 600,
sankey: {
node: { label: { fontName: 'Times-Roman',
fontSize: 14,
color: '#871b47',
bold: true,
italic: true } } },
};
Вы можете настроить положение меток относительно узлов с помощью опции sankey.node.labelPadding :
На диаграмме выше мы добавили 30 пикселей отступов между метками и узлами.
var options = {
width: 600,
sankey: { node: { labelPadding: 30 } },
};
Настройка узлов
Вы можете контролировать ширину узлов с помощью sankey.node.width :
Выше мы установили ширину узла равной 2.
var options = {
width: 600,
sankey: { node: { width: 2 } },
};
Вы можете настроить расстояние между узлами с помощью sankey.node.nodePadding :
На приведенной выше диаграмме мы установили для sankey.node.nodePadding значение 80.
var options = {
width: 900,
sankey: { node: { nodePadding: 80 } },
};
Загрузка
Имя пакета google.charts.load — "sankey" :
google.charts.load("current" {packages: ["sankey"]});
Имя класса визуализации — google.visualization.Sankey :
var visualization = new google.visualization.Sankey(container);
Формат данных
Строки: каждая строка в таблице представляет соединение между двумя метками. Третий столбец указывает силу этого соединения и будет отражен в ширине пути между метками.
Столбцы:
| Столбец 0 | Столбец 1 | Столбец 2 | ... | Столбец N (необязательно) | |
|---|---|---|---|---|---|
| Цель: | Источник | Место назначения | Ценить | ... | Дополнительные роли |
| Тип данных: | нить | нить | число | ... | |
| Роль: | домен | домен | данные | ... | |
| Дополнительные роли столбцов : | Никто | Никто | Никто | ... |
Параметры конфигурации
| Имя | |
|---|---|
| сила IFrame | Рисует диаграмму внутри встроенного фрейма. (Обратите внимание, что в IE8 этот параметр игнорируется; все диаграммы IE8 рисуются в i-кадрах.) Тип: логический По умолчанию: ложь |
| высота | Высота диаграммы в пикселях. Тип: номер По умолчанию: высота содержащего элемента. |
| Санки.итерации | При использовании многоуровневых санки иногда неочевидно, где следует разместить узлы для оптимальной читаемости. Механизм компоновки D3 экспериментирует с различными макетами узлов, останавливаясь при попытке выполнить Тип: целое число По умолчанию: 32 |
| Санки.ссылка | Управляет атрибутами соединений между узлами. В настоящее время все атрибуты относятся к цвету: sankey: { Тип: объект По умолчанию: ноль |
| sankey.link.colorMode | Устанавливает режим окраски связей между узлами. Возможные значения:
Эта опция переопределяет sankey.link.color. Тип: строка По умолчанию: «нет» |
| Санки.узел | Управляет атрибутами узлов (вертикальные полосы между ссылками): sankey: { Тип: объект По умолчанию: ноль |
| sankey.node.colorMode | Устанавливает режим окраски для узлов Sankey. Возможные значения:
Тип: строка По умолчанию: «уникальный» |
| подсказка | Объект с членами для настройки различных элементов подсказки. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь: {textStyle: {color: '#FF0000'}, showColorCode: true} Тип: объект По умолчанию: ноль |
| подсказка.isHtml | Если установлено значение true, используйте всплывающие подсказки, отображаемые в формате HTML (а не в формате SVG). Дополнительные сведения см. в разделе «Настройка содержимого всплывающей подсказки» . Примечание. Настройка содержимого всплывающей подсказки HTML с помощью роли данных столбца подсказки не поддерживается визуализацией пузырьковой диаграммы . Тип: логический По умолчанию: ложь |
| Tooltip.textStyle | Объект, определяющий стиль текста подсказки. Объект имеет такой формат: { color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Тип: объект По умолчанию: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
| ширина | Ширина диаграммы в пикселях. Тип: номер По умолчанию: ширина содержащего элемента. |
Методы
| Метод | |
|---|---|
draw(data, options) | Рисует диаграмму. Диаграмма принимает дальнейшие вызовы методов только после запуска события Тип возврата: нет |
getBoundingBox(id) | Возвращает объект, содержащий
Значения относятся к контейнеру диаграммы. Вызовите это после того, как диаграмма будет нарисована. Тип возвращаемого значения: объект |
getSelection() | Возвращает массив выбранных объектов диаграммы. Выбираемыми объектами являются полосы, записи легенды и категории. Для этой диаграммы в любой момент времени можно выбрать только одну сущность. Тип возвращаемого значения: Массив элементов выбора. |
setSelection() | Выбирает указанные объекты диаграммы. Отменяет любой предыдущий выбор. Выбираемыми объектами являются полосы, записи легенды и категории. Для этой диаграммы одновременно можно выбрать только одну сущность. Тип возврата: нет |
clearChart() | Очищает диаграмму и освобождает все выделенные ей ресурсы. Тип возврата: нет |
События
| Имя | |
|---|---|
error | Вызывается, когда возникает ошибка при попытке отобразить диаграмму. Свойства: идентификатор, сообщение |
onmouseover | Вызывается, когда пользователь наводит указатель мыши на визуальный объект. Возвращает индексы строк и столбцов соответствующего элемента таблицы данных. Полоса соответствует ячейке в таблице данных, запись легенды — столбцу (индекс строки равен нулю), а категория — строке (индекс столбца равен нулю). Свойства: строка, столбец |
onmouseout | Вызывается, когда пользователь уводит указатель мыши от визуального объекта. Возвращает индексы строк и столбцов соответствующего элемента таблицы данных. Полоса соответствует ячейке в таблице данных, запись легенды — столбцу (индекс строки имеет значение NULL), а категория — строке (индекс столбца имеет значение NULL). Свойства: строка, столбец |
ready | Диаграмма готова для вызовов внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вам следует настроить прослушиватель этого события до вызова метода Свойства: нет |
select | Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите Свойства: нет |
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.