Эта страница переведена с помощью Cloud Translation API.

Диаграмма Санки

Обзор
Простой пример
Многоуровневые санки
Управление цветами
Настройка шрифтов
Настройка узлов
Загрузка
Формат данных
Параметры конфигурации
Методы
События
Политика данных

Обзор

Диаграмма Санки — это визуализация, используемая для изображения потока от одного набора значений к другому. Соединяемые вещи называются узлами , а соединения — ссылками . 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 экспериментирует с различными макетами узлов, останавливаясь при попытке выполнить `sankey.iterations` . Чем больше это число, тем приятнее макет сложных санки, но за это приходится платить: рендеринг санки займет больше времени. И наоборот, чем короче это число, тем быстрее будут отображаться ваши диаграммы. Тип: целое число По умолчанию: 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	Устанавливает режим окраски связей между узлами. Возможные значения: `'source'` — цвет исходного узла используется для ссылок на все целевые узлы. `'target'` — цвет целевого узла используется для ссылки на исходные узлы. `'gradient'` — связь между исходным и целевым узлом окрашена в виде градиента от цвета исходного узла к цвету целевого узла. `'none'` — вариант по умолчанию; цвета ссылок будут установлены по умолчанию (или цвет, указанный параметрами `sankey.link.color.fill` и `sankey.link.color.fillOpacity` ). Эта опция переопределяет 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. Возможные значения: `'unique'` — каждый узел получит уникальный цвет. Тип: строка По умолчанию: «уникальный»
подсказка	Объект с членами для настройки различных элементов подсказки. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь: {textStyle: {color: '#FF0000'}, showColorCode: true} Тип: объект По умолчанию: ноль
подсказка.isHtml	Если установлено значение true, используйте всплывающие подсказки, отображаемые в формате HTML (а не в формате SVG). Дополнительные сведения см. в разделе «Настройка содержимого всплывающей подсказки» . Примечание. Настройка содержимого всплывающей подсказки HTML с помощью роли данных столбца подсказки не поддерживается визуализацией пузырьковой диаграммы . Тип: логический По умолчанию: ложь
Tooltip.textStyle	Объект, определяющий стиль текста подсказки. Объект имеет такой формат: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` может быть любой цветовой строкой HTML, например: `'red'` или `'#00cc00'` . Также см. `fontName` и `fontSize` . Тип: объект По умолчанию: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
ширина	Ширина диаграммы в пикселях. Тип: номер По умолчанию: ширина содержащего элемента.

Методы

Метод
`draw(data, options)`	Рисует диаграмму. Диаграмма принимает дальнейшие вызовы методов только после запуска события `ready` . `Extended description` . Тип возврата: нет
`getBoundingBox(id)`	Возвращает объект, содержащий `id` элемента диаграммы слева, сверху, ширины и высоты. Формат `id` еще не документирован (это возвращаемые значения обработчиков событий ), но вот несколько примеров: `var cli = chart.getChartLayoutInterface();` Высота области диаграммы `cli.getBoundingBox('chartarea').height` Ширина третьего столбца в первой серии гистограммы или гистограммы. `cli.getBoundingBox('bar#0#2').width` Ограничивающая рамка пятого сектора круговой диаграммы `cli.getBoundingBox('slice#4')` Ограничивающая рамка данных вертикальной (например, столбчатой) диаграммы: `cli.getBoundingBox('vAxis#0#gridline')` Ограничивающая рамка данных горизонтальной (например, гистограммы) диаграммы: `cli.getBoundingBox('hAxis#0#gridline')` Значения относятся к контейнеру диаграммы. Вызовите это после того, как диаграмма будет нарисована. Тип возвращаемого значения: объект
`getSelection()`	Возвращает массив выбранных объектов диаграммы. Выбираемыми объектами являются полосы, записи легенды и категории. Для этой диаграммы в любой момент времени можно выбрать только одну сущность. `Extended description` . Тип возвращаемого значения: Массив элементов выбора.
`setSelection()`	Выбирает указанные объекты диаграммы. Отменяет любой предыдущий выбор. Выбираемыми объектами являются полосы, записи легенды и категории. Для этой диаграммы одновременно можно выбрать только одну сущность. `Extended description` . Тип возврата: нет
`clearChart()`	Очищает диаграмму и освобождает все выделенные ей ресурсы. Тип возврата: нет

События

Имя
`error`	Вызывается, когда возникает ошибка при попытке отобразить диаграмму. Свойства: идентификатор, сообщение
`onmouseover`	Вызывается, когда пользователь наводит указатель мыши на визуальный объект. Возвращает индексы строк и столбцов соответствующего элемента таблицы данных. Полоса соответствует ячейке в таблице данных, запись легенды — столбцу (индекс строки равен нулю), а категория — строке (индекс столбца равен нулю). Свойства: строка, столбец
`onmouseout`	Вызывается, когда пользователь уводит указатель мыши от визуального объекта. Возвращает индексы строк и столбцов соответствующего элемента таблицы данных. Полоса соответствует ячейке в таблице данных, запись легенды — столбцу (индекс строки имеет значение NULL), а категория — строке (индекс столбца имеет значение NULL). Свойства: строка, столбец
`ready`	Диаграмма готова для вызовов внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вам следует настроить прослушиватель этого события до вызова метода `draw` и вызывать их только после того, как событие было запущено. Свойства: нет
`select`	Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите `getSelection()` . Свойства: нет

Политика данных

Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.

Диаграмма Санки Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.