概览
桑基图是一种可视化效果,用于描绘从一组值到另一值集的流。被连接的事物称为“节点”,连接称为“链路”。如果您想显示两个网域(例如大学和专业)之间的多对多映射或经过一组阶段的多个路径(例如,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: { 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 |
用于为节点之间的链接设置着色模式。可能的值:
此选项会覆盖 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”(唯一)
|
提示 |
包含用于配置各种提示元素的成员的对象。要指定此对象的属性,您可以使用对象字面量表示法,如下所示: {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 |
当用户点击视觉实体时触发。如需了解已选择的内容,请调用 属性:无
|
数据政策
所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。