Обзор
Диаграмма Санки — это визуализация, используемая для изображения потока от одного набора значений к другому. Соединяемые вещи называются узлами , а соединения называются ссылками . Санки лучше всего использовать, когда вы хотите показать сопоставление «многие ко многим» между двумя областями (например, университетами и специальностями) или несколько путей через набор этапов (например, 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 | Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите Свойства: нет |
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.