概览
桑基图是一种直观呈现一组值与值之间的流。所谓“连接”,就是“连接”。如果您想显示两个网域(例如大学和主修学)或一组阶段的多条路径之间的多对多映射(例如,Google Analytics(分析)使用 sankey 显示流量从网站页面流向网站上的其他页面),则最好使用 Sankey。
出于好奇,这个名字以桑基船长的名字命名,他绘制了蒸汽机效率图表,使用的箭头宽度与热量成正比。
注意:在未来的 Google 图表版本中,三角图表可能会经过大量修改。
Sankey 图使用 SVG 或 VML 在浏览器中呈现,具体取决于用户浏览器。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.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
和朋友自定义 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 布局引擎会尝试不同的节点布局,当尝试 类型:整数
默认: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 |
设置节点之间的链接的着色模式。可能的值包括:
此选项会替换 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”
|
提示 |
一个可配置各种提示元素的对象。如需指定此对象的属性,您可以使用对象字面量表示法,如下所示: {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: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
width |
图表的宽度(以像素为单位)。 类型:数字
默认:所在元素的宽度
|
方法
方法 | |
---|---|
draw(data, options) |
绘制图表。图表仅在 返回值类型:无
|
getBoundingBox(id) |
返回一个对象,其中包含图表元素
值是相对于图表容器而言的。在绘制图表之后调用此方法。 返回类型:对象
|
getSelection() |
返回一组选定图表实体。
您可以选择的实体包括条形、图例条目和类别。
对于此图表,在任何给定时刻都只能选择一个实体。
返回类型:选择元素数组
|
setSelection() |
选择指定的图表实体。取消之前的所有选择。
您可以选择的实体包括条形、图例条目和类别。
对于此图表,一次只能选择一个实体。
返回值类型:无
|
clearChart() |
清除图表,并释放其分配的所有资源。 返回值类型:无
|
活动
名称 | |
---|---|
error |
尝试呈现图表时出错时触发。 属性:id、message
|
onmouseover |
在用户将鼠标悬停在视觉实体上时触发。传递相应数据表元素的行和列索引。 柱形对应于数据表中的单元格、列的图例条目(行索引为 null)以及类别与行(列索引为 null)。 属性:行、列
|
onmouseout |
在用户离开视觉实体时触发。传递相应数据表元素的行和列索引。 柱形对应于数据表中的单元格、列的图例条目(行索引为 null)以及类别与行(列索引为 null)。 属性:行、列
|
ready |
此图表已可供外部方法调用。如果您希望与图表互动,并在绘制图表后调用方法,则应在调用 属性:无
|
select |
在用户点击视觉实体时触发。如需了解所选内容,请调用 属性:无
|
数据政策
所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送任何数据。