Sankey 示意图

概览

桑基图是一种直观呈现一组值与值之间的流。所谓“连接”,就是“连接”。如果您想显示两个网域(例如大学和主修学)或一组阶段的多条路径之间的多对多映射(例如,Google Analytics(分析)使用 sankey 显示流量从网站页面流向网站上的其他页面),则最好使用 Sankey。

出于好奇,这个名字以桑基船长的名字命名,他绘制了蒸汽机效率图表,使用的箭头宽度与热量成正比。

注意:在未来的 Google 图表版本中,三角图表可能会经过大量修改。

Sankey 图使用 SVGVML 在浏览器中呈现,具体取决于用户浏览器。Google 的 Sankey 布局代码衍生自 D3 的 sankey 布局代码。

注意:Google sankey 图表在 Microsoft Internet Explorer 8 及更早版本中不可用。

简单示例

假设您有两个类别(A 和 B),它们连接到其他三个类别:X、Y 和 Z。其中一些连接会比其他连接更重。例如,B 与 X 具有较细的连接,而与 Y 的连接则较细。


试着将鼠标悬停在其中一个链接上,以突出显示连接。

如需创建 Sankey 图表,请提供一组行,其中每行都包含有关一个连接(从、到、体重)的信息。然后,使用 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,而 C 链接到 A 链接,您的图表便不会呈现。

多级 Sankeys

您可以创建具有多层关联的 Sankey 图表:

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.colorssankey.link.colors)提供自定义调色板。您还可以使用 colorMode 选项为它们提供不同的着色模式。

如果颜色未自定义,系统会默认使用标准 Material 调色板。

    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.strokesankey.link.color.strokeWidth 选项:

描边颜色可通过 RGB 格式或英文名称指定。

    var options = {
      width: 750,
      height: 400,
      sankey: {
        node: { colors: [ '#a61d4c' ] },
        link: { color: { stroke: 'black', strokeWidth: 1 } },
      }
    };

自定义标签

可使用 sankey.node.label.fontName 和朋友自定义 Sankey 图表上的文本:

以下是上一图表中的选项节:

    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 列(可选)
目的: 来源 目标帐号 …… 可选角色
数据类型: string string number ……
角色: 网域 网域 data ……
可选的列角色

……

 

配置选项

名称
forceIFrame

在内嵌框架内绘制图表。(请注意,在 IE8 中,此选项会被忽略;所有 IE8 图表都是在 iframe 内绘制的)。

类型:布尔值
默认:false
高度

图表的高度(以像素为单位)。

类型:数字
默认:所在元素的高度
sankey.迭代次数

使用多级 Sankey,有时应将节点放在最佳位置,以此来提高可读性。D3 布局引擎会尝试不同的节点布局,当尝试 sankey.iterations 次时,这些引擎都会停止。此数字越大,复杂 sankey 的布局就越令人愉悦,但这么做也会带来开销:sankey 的渲染时间会更长。反之,此数字越短,您的图表呈现的速度就越快。

类型:整数
默认:32
sankey.link

控制节点之间连接的属性。目前,所有属性都与颜色相关:

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'
    ]
  }
}
      
类型:对象
默认:null
sankey.link.colorMode

设置节点之间的链接的着色模式。可能的值包括:

  • 'source' - 来源节点的颜色用于指向所有目标节点的链接。
  • 'target' - 目标节点的颜色用于指向其源节点的链接。
  • 'gradient' - 源节点与目标节点之间的链接从源节点颜色到目标节点颜色的渐变色。
  • 'none' - 默认选项;链接颜色将设置为默认值(或由 sankey.link.color.fillsankey.link.color.fillOpacity 选项指定的颜色)。

此选项会替换 sankey.link.color。

类型:字符串
默认:“none”
sankey.node

控制节点的属性(链接之间的垂直条):

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'
    ]
  }
}
      
类型:对象
默认:null
sankey.node.colorMode

为 Sankey 节点设置着色模式。可能的值包括:

  • 'unique' - 每个节点都会收到单色。
类型:字符串
默认:“unique”
提示

一个可配置各种提示元素的对象。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示:

{textStyle: {color: '#FF0000'}, showColorCode: true}
类型:对象
默认:null
tooltip.isHTML

如果设置为 true,请使用 HTML 呈现(而不是 SVG 呈现)的提示。如需了解详情,请参阅自定义提示内容

注意气泡图可视化支持通过提示列数据角色自定义 HTML 提示内容。

类型:布尔值
默认:false
tooltip.textStyle

用于指定提示文本样式的对象。该对象的格式如下:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color 可以是任何 HTML 颜色字符串,例如:'red''#00cc00'。另请参阅 fontNamefontSize

类型:对象
默认 {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
width

图表的宽度(以像素为单位)。

类型:数字
默认:所在元素的宽度

方法

方法
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

尝试呈现图表时出错时触发。

属性:id、message
onmouseover

在用户将鼠标悬停在视觉实体上时触发。传递相应数据表元素的行和列索引。 柱形对应于数据表中的单元格、列的图例条目(行索引为 null)以及类别与行(列索引为 null)。

属性:行、列
onmouseout

在用户离开视觉实体时触发。传递相应数据表元素的行和列索引。 柱形对应于数据表中的单元格、列的图例条目(行索引为 null)以及类别与行(列索引为 null)。

属性:行、列
ready

此图表已可供外部方法调用。如果您希望与图表互动,并在绘制图表后调用方法,则应在调用 draw 方法之前为此事件设置监听器,并仅在事件触发后调用它们。

属性:无
select

在用户点击视觉实体时触发。如需了解所选内容,请调用 getSelection()

属性:无

数据政策

所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送任何数据。