桑基图

  1. Overview
  2. 简单示例
  3. 多级 Sankey
  4. 控制颜色
  5. 自定义字体
  6. 调整节点
  7. 正在加载
  8. 数据格式
  9. 配置选项
  10. 方法
  11. 事件
  12. 数据政策

概览

桑基图是一种可视化效果，用于描绘从一组值到另一值集的流。被连接的事物称为“节点”，连接称为“链路”。如果您想显示两个网域（例如大学和专业）之间的多对多映射或经过一组阶段的多个路径（例如，Google Analytics（分析）使用 Sankey 显示流量如何从您网站上的网页流向其他网页），最适合使用 Sankey。

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

注意：在未来的 Google 图表版本中，桑基图可能会进行重大修订。

Sankey 图表会根据适合用户浏览器的 SVG 或 VML 在浏览器中呈现。Google 的 Sankey 布局代码派生自 D3 的 Sankey 布局代码。

注意：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 链接到自身，或者如果 A 链接到自身，或者链接到 C 并链接到 C 而 C 链接到 A，则图表不会呈现。

多级 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>

控制颜色

桑基图能够为节点和链接设置自定义颜色。可以使用其 colors 选项（分别为 sankey.node.colors 和 sankey.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.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 列（可选）
用途： 来源 Destination 价值 ... 可选角色
数据类型： string string number ...
角色： 网域 网域 data ...
可选的列角色：

无

无

无

 ...

 

配置选项

名称
forceIFrame

在内嵌框架内绘制图表。（请注意，在 IE8 上，此选项会被忽略；所有 IE8 图表都是在 iframe 中绘制的。）

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

图表的高度（以像素为单位）。

类型：数字
默认值：所包含元素的高度
sankey.iterations

使用多级别 Sankey 时，为了获得最佳可读性，有时应该放置节点的位置并不明显。D3 布局引擎使用不同的节点布局进行实验，并在尝试 sankey.iterations 次后停止。这个数字越大，复杂桑拿酒的布局就越令人愉悦，但代价是：桑拿饼的呈现时间会更长。相反，此数字越短，图表渲染的速度就越快。

类型：整数
默认值：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'
    ]
  }
}
类型：object
默认值：null
sankey.link.colorMode

用于为节点之间的链接设置着色模式。可能的值：

  • 'source' - 指向所有目标节点的链接使用源节点的颜色。
  • 'target' - 目标节点的颜色用于指向其源节点的链接。
  • 'gradient' - 源节点与目标节点之间的链接的颜色为从源节点颜色到目标节点颜色的渐变色。
  • 'none' - 默认选项；链接颜色将设置为默认值（或由 sankey.link.color.fill 和 sankey.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'
    ]
  }
}
类型：object
默认值：null
sankey.node.colorMode

设置桑基节点的着色模式。可能的值：

  • 'unique' - 每个节点都将收到独特的颜色。
类型：字符串
默认值：“unique”（唯一）
提示

包含用于配置各种提示元素的成员的对象。要指定此对象的属性，您可以使用对象字面量表示法，如下所示： 

{textStyle: {color: '#FF0000'}, showColorCode: true}
类型：object
默认值：null
tooltip.isHtml

如果此政策设为 true，系统会使用 HTML 渲染（而非 SVG 渲染）提示。如需了解详情，请参阅自定义提示内容。

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

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

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

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

color 可以是任何 HTML 颜色字符串，例如 'red' 或 '#00cc00'。另请参阅 fontName 和 fontSize。

类型：object
默认值： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
宽度

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

类型：数字
默认值：所包含元素的宽度

方法

方法
draw(data, options)

绘制图表。只有在 ready 事件触发后，图表才会接受进一步的方法调用。Extended description。

Return Type（返回类型）：none
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')

值是相对于图表容器而言的。在绘制图表之后调用此方法。

返回类型：object
getSelection()

返回所选图表实体的数组。 可选的实体包括条形、图例条目和类别。 对于此图表，在任何给定时刻，只能选择一个实体。 Extended description 。

返回类型：选择元素数组
setSelection()

选择指定的图表实体。取消之前的所有选择。 可选的实体包括条形、图例条目和类别。 对于此图表，一次只能选择一个实体。 Extended description 。

Return Type（返回类型）：none
clearChart()

清除图表，并释放为其分配的所有资源。

Return Type（返回类型）：none

事件

名称
error

尝试渲染图表时出错时触发。

属性：id、message
onmouseover

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

属性：行、列
onmouseout

用户将鼠标远离视觉实体时触发。传回相应数据表元素的行和列索引。 条形与数据表中的单元格、列的图例条目（行索引为 null）以及类别（列索引为 null）相关联。

属性：行、列
ready

该图表已准备好进行外部方法调用。如果您想与图表交互并在绘制图表后调用方法，则应在调用 draw 方法之前为该事件设置监听器，并仅在事件触发后调用监听器。

属性：无
select

当用户点击视觉实体时触发。如需了解已选择的内容，请调用 getSelection()。

属性：无

数据政策

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