Обзор
Диаграмма Санки — это визуализация, используемая для изображения потока от одного набора значений к другому. Соединяемые вещи называются узлами , а соединения называются ссылками . Санки лучше всего использовать, когда вы хотите показать сопоставление «многие ко многим» между двумя областями (например, университетами и специальностями) или несколько путей через набор этапов (например, Google Analytics использует санки, чтобы показать, как трафик перетекает со страниц на страницы). другие страницы вашего веб-сайта).
Для любопытных они названы в честь капитана Санки, который создал диаграмму эффективности паровой машины , в которой использовались стрелки, ширина которых пропорциональна потерям тепла.
Примечание. Диаграмма Санки может быть существенно изменена в будущих версиях 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, ваша диаграмма не будет отображаться.
Многоуровневые Санки
Вы можете создать диаграмму Санки с несколькими уровнями соединений:
Диаграммы Sankey будут добавлять дополнительные уровни по мере необходимости, размещая их автоматически. Вот полный код для приведенной выше диаграммы:
<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>
Управление цветами
Диаграммы Sankey имеют возможность устанавливать собственные цвета для узлов и связей. И узлам, и ссылкам можно задать собственные цветовые палитры, используя их параметры 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 (необязательно) | |
|---|---|---|---|---|---|
| Цель: | Источник | Место назначения | Ценить | ... | Дополнительные роли |
| Тип данных: | нить | нить | число | ... | |
| Роль: | домен | домен | данные | ... | |
| Необязательные роли столбцов : | Никто | Никто | Никто | ... |
Параметры конфигурации
| Имя | |
|---|---|
| ForceIFrame | Рисует диаграмму внутри встроенного фрейма. (Обратите внимание, что в IE8 этот параметр игнорируется; все диаграммы IE8 отображаются в i-фреймах.) Тип: логический По умолчанию: ложь |
| высота | Высота диаграммы в пикселях. Тип: номер По умолчанию: высота содержащего элемента |
| sankey.iterations | С многоуровневыми санкиями иногда неочевидно, где должны быть размещены узлы для оптимальной читабельности. Механизм макета D3 экспериментирует с различными макетами узлов, останавливаясь, когда были предприняты попытки Тип: целое По умолчанию: 32 |
| санки.ссылка | Управляет атрибутами соединений между узлами. В настоящее время все атрибуты относятся к цвету:
sankey: {
link: {
color: {
fill: '#efd', // Color of the link.
fillOpacity: 0.8, // Transparency of the link.
stroke: 'black', // Color of the link border.
strokeWidth: 1 // Thickness of the link border (default 0).
},
colors: [
'#a6cee3', // Custom color palette for sankey links.
'#1f78b4', // Nodes will cycle through this palette
'#b2df8a', // giving the links for that node the color.
'#33a02c'
]
}
}
Тип: объект По умолчанию: ноль |
| sankey.link.colorMode | Устанавливает режим окраски для связей между узлами. Возможные значения:
Этот параметр переопределяет sankey.link.color. Тип: строка По умолчанию: «нет» |
| санки.узел | Управляет атрибутами узлов (вертикальные полосы между ссылками):
sankey: {
node: {
label: {
fontName: 'Times-Roman',
fontSize: 12,
color: '#000',
bold: true,
italic: false
},
interactivity: true, // Allows you to select nodes.
labelPadding: 6, // Horizontal distance between the label and the node.
nodePadding: 10, // Vertical distance between nodes.
width: 5, // Thickness of the node.
colors: [
'#a6cee3', // Custom color palette for sankey nodes.
'#1f78b4', // Nodes will cycle through this palette
'#b2df8a', // giving each node its own color.
'#33a02c'
]
}
}
Тип: объект По умолчанию: ноль |
| sankey.node.colorMode | Устанавливает режим окраски для узлов sankey. Возможные значения:
Тип: строка По умолчанию: «уникальный» |
| подсказка | Объект с членами для настройки различных элементов всплывающей подсказки. Чтобы указать свойства этого объекта, вы можете использовать литеральную нотацию объекта, как показано здесь: {textStyle: {color: '#FF0000'}, showColorCode: true} Тип: объект По умолчанию: ноль |
| tooltip.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 | Запускается, когда пользователь уводит мышь от визуального объекта. Возвращает обратно индексы строк и столбцов соответствующего элемента таблицы данных. Гистограмма соотносится с ячейкой в таблице данных, запись легенды — со столбцом (индекс строки равен нулю), а категория — со строкой (индекс столбца равен нулю). Свойства: строка, столбец |
ready | Диаграмма готова к вызову внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вы должны настроить прослушиватель для этого события до вызова метода Свойства: нет |
select | Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите Свойства: нет |
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.