概览
桑基图是一种可视化效果,用于描绘从一组值到另一值集的流。被连接的事物称为“节点”,连接称为“链路”。如果您想显示两个网域(例如大学和专业)之间的多对多映射或经过一组阶段的多个路径(例如,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 布局引擎使用不同的节点布局进行实验,并在尝试 类型:整数
默认值:32
|
sankey.link |
控制节点之间连接的属性。目前,所有属性都与颜色相关: sankey: { 类型:object
默认值:null
|
sankey.link.colorMode |
用于为节点之间的链接设置着色模式。可能的值:
此选项会覆盖 sankey.link.color。 类型:字符串
默认:“none”
|
sankey.node |
控制节点的属性(链接之间的竖线): sankey: { 类型:object
默认值:null
|
sankey.node.colorMode |
设置桑基节点的着色模式。可能的值:
类型:字符串
默认值:“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> }
类型:object
默认值:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
宽度 |
图表的宽度,以像素为单位。 类型:数字
默认值:所包含元素的宽度
|
方法
方法 | |
---|---|
draw(data, options) |
绘制图表。只有在 Return Type(返回类型):none
|
getBoundingBox(id) |
返回一个对象,其中包含图表元素
值是相对于图表容器而言的。在绘制图表之后调用此方法。 返回类型:object
|
getSelection() |
返回所选图表实体的数组。
可选的实体包括条形、图例条目和类别。
对于此图表,在任何给定时刻,只能选择一个实体。
返回类型:选择元素数组
|
setSelection() |
选择指定的图表实体。取消之前的所有选择。
可选的实体包括条形、图例条目和类别。
对于此图表,一次只能选择一个实体。
Return Type(返回类型):none
|
clearChart() |
清除图表,并释放为其分配的所有资源。 Return Type(返回类型):none
|
事件
名称 | |
---|---|
error |
尝试渲染图表时出错时触发。 属性:id、message
|
onmouseover |
用户将鼠标悬停在视觉实体上时触发。传回相应数据表元素的行和列索引。 条形与数据表中的单元格、列的图例条目(行索引为 null)以及类别(列索引为 null)相关联。 属性:行、列
|
onmouseout |
用户将鼠标远离视觉实体时触发。传回相应数据表元素的行和列索引。 条形与数据表中的单元格、列的图例条目(行索引为 null)以及类别(列索引为 null)相关联。 属性:行、列
|
ready |
该图表已准备好进行外部方法调用。如果您想与图表交互并在绘制图表后调用方法,则应在调用 属性:无
|
select |
当用户点击视觉实体时触发。如需了解已选择的内容,请调用 属性:无
|
数据政策
所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。