Tổng quan
Sơ đồ tay là một hình ảnh trực quan dùng để mô tả luồng từ một tập hợp giá trị tới tập hợp giá trị khác. Những thứ được kết nối được gọi là nút và những kết nối được gọi là liên kết. Tốt nhất nên sử dụng Sankey khi bạn muốn hiển thị ánh xạ từ nhiều đến nhiều giữa hai miền (ví dụ: trường đại học và chuyên ngành) hoặc nhiều đường dẫn thông qua một tập hợp các giai đoạn (ví dụ: Google Analytics sử dụng khoá để hiển thị cách lưu lượng truy cập từ các trang đến các trang khác trên trang web của bạn).
Để gây tò mò, chúng được đặt theo tên của Thuyền trưởng Sankey, người đã tạo ra sơ đồ về hiệu suất của động cơ hơi nước, sử dụng các mũi tên có độ rộng tỷ lệ với tổn thất nhiệt.
Lưu ý: Biểu đồ lừa đảo có thể đang được sửa đổi nhiều trong các bản phát hành Google Biểu đồ trong tương lai.
Sơ đồ Sankey được kết xuất trong trình duyệt bằng SVG hoặc VML, bất cứ sơ đồ nào phù hợp với trình duyệt của người dùng. Mã bố cục sankey của Google được lấy từ mã bố cục sankey của D3.
Lưu ý: Biểu đồ khoá dưới dạng Google không có trong Microsoft Internet Explorer 8 và các phiên bản cũ hơn.
Ví dụ đơn giản
Giả sử bạn có hai danh mục, A và B, kết nối với ba danh mục khác, X, Y và Z. Một số kết nối nặng hơn các kết nối khác. Ví dụ: B có kết nối mỏng với X và kết nối dày hơn nhiều với Y.
Thử di chuột qua một trong các liên kết để đánh dấu kết nối.
Để tạo biểu đồ sankey, hãy cung cấp một tập hợp các hàng, trong đó mỗi hàng chứa thông tin về một kết nối: từ, đến và trọng số. Sau đó, hãy sử dụng phương thức google.visualization.Sankey()
để khởi tạo biểu đồ rồi phương thức draw() để
hiển thị biểu đồ đó:
<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>
Lưu ý: Tránh dùng các chu kỳ trong dữ liệu của bạn: nếu A liên kết tới chính nó hoặc liên kết tới B liên kết với C liên kết đến A, biểu đồ của bạn sẽ không hiển thị.
Sankey nhiều tầng
Bạn có thể tạo biểu đồ Sankey với nhiều cấp độ kết nối:
Biểu đồ Sankey sẽ tự động thêm các cấp độ khác nếu cần, sắp xếp các cấp độ này một cách tự động. Dưới đây là mã hoàn chỉnh cho biểu đồ trên:
<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>
Kiểm soát màu
Biểu đồ Sankey có thể đặt màu tuỳ chỉnh cho các nút và đường liên kết. Cả nút và đường liên kết đều có thể được cung cấp bảng màu tuỳ chỉnh bằng cách sử dụng các tuỳ chọn colors (tương ứng là sankey.node.colors và sankey.link.colors). Bạn cũng có thể cung cấp các chế độ tô màu khác nhau bằng tuỳ chọn colorMode.
Nếu không được tuỳ chỉnh, màu sẽ mặc định là bảng màu tiêu chuẩn của Material.
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
'#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];
var options = {
height: 400,
sankey: {
node: {
colors: colors
},
link: {
colorMode: 'gradient',
colors: colors
}
}
};
Bạn có thể kiểm soát màu sắc của đường liên kết, nút và nhãn bằng các tuỳ chọn cấu hình. Ở đây, chúng tôi chọn ba màu có cùng màu sắc nhưng độ sáng khác nhau:
Các tuỳ chọn đó trông như sau:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae' } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
Bạn cũng có thể kiểm soát tính minh bạch của các đường liên kết bằng
tùy chọn sankey.link.color.fillOpacity:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
Để tạo đường viền xung quanh các đường liên kết, hãy sử dụng các tuỳ chọn sankey.link.color.stroke và sankey.link.color.strokeWidth:
Màu nét vẽ có thể được chỉ định ở định dạng RGB hoặc theo tên tiếng Anh.
var options = {
width: 750,
height: 400,
sankey: {
node: { colors: [ '#a61d4c' ] },
link: { color: { stroke: 'black', strokeWidth: 1 } },
}
};
Tùy chỉnh nhãn
Bạn có thể tuỳ chỉnh văn bản trên biểu đồ sankey
bằng cách sử dụng sankey.node.label.fontName và bạn bè:
Dưới đây là khổ thơ tùy chọn cho biểu đồ trên:
var options = {
width: 600,
sankey: {
node: { label: { fontName: 'Times-Roman',
fontSize: 14,
color: '#871b47',
bold: true,
italic: true } } },
};
Bạn có thể điều chỉnh vị trí của các nhãn tương ứng với các nút
bằng tuỳ chọn sankey.node.labelPadding:
Trong biểu đồ trên, chúng ta đã thêm 30 pixel đệm giữa các nhãn và các nút.
var options = {
width: 600,
sankey: { node: { labelPadding: 30 } },
};
Điều chỉnh nút
Bạn có thể kiểm soát chiều rộng của các nút
bằng sankey.node.width:
Ở trên, chúng ta đặt chiều rộng của nút thành 2.
var options = {
width: 600,
sankey: { node: { width: 2 } },
};
Bạn có thể điều chỉnh khoảng cách giữa các nút bằng sankey.node.nodePadding:
Trong biểu đồ trên, chúng ta đặt sankey.node.nodePadding thành 80.
var options = {
width: 900,
sankey: { node: { nodePadding: 80 } },
};
Đang tải
Tên gói google.charts.load là "sankey":
google.charts.load("current" {packages: ["sankey"]});
Tên lớp của hình ảnh là google.visualization.Sankey:
var visualization = new google.visualization.Sankey(container);
Định dạng dữ liệu
Hàng: Mỗi hàng trong bảng thể hiện sự kết nối giữa hai nhãn. Cột thứ ba cho biết độ mạnh của kết nối đó và sẽ được phản ánh theo chiều rộng của đường dẫn giữa các nhãn.
Cột:
| Cột 0 | Cột 1 | Cột 2 | ... | Cột N (tùy chọn) | |
|---|---|---|---|---|---|
| Mục đích: | Nguồn | Đích đến | Giá trị | ... | Vai trò tùy chọn |
| Loại dữ liệu: | chuỗi | chuỗi | number | ... | |
| Vai trò: | miền | miền | data | ... | |
| Vai trò cột tùy chọn: | None (Không có) |
None (Không có) |
None (Không có) |
... |
|
Tùy chọn cấu hình
| Tên | |
|---|---|
| Khung buộc |
Vẽ biểu đồ bên trong khung nội tuyến. (Lưu ý rằng trên IE8, tuỳ chọn này bị bỏ qua; tất cả biểu đồ IE8 đều được vẽ trong i-frame). Loại: boolean
Mặc định: false
|
| độ cao |
Chiều cao của biểu đồ, tính bằng pixel. Loại: số
Mặc định: chiều cao của phần tử chứa
|
| sankey.iterations |
Với các phím tắt đa cấp, đôi khi, bạn nên xác định vị trí đặt các nút để dễ đọc
nhất. Công cụ bố cục D3 thử nghiệm các bố cục nút khác nhau, ngừng khi bạn đã thử Loại: số nguyên
Mặc định: 32
|
| liên kết sankey.link |
Kiểm soát các thuộc tính của kết nối giữa các nút. Hiện tại, tất cả thuộc tính liên quan đến màu sắc:
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'
]
}
}
Loại: đối tượng
Mặc định: rỗng
|
| sankey.link.colorMode |
Đặt chế độ màu cho các liên kết giữa các nút. Các loại tệp có thể được thu thập dữ liệu bao gồm:
Tuỳ chọn này sẽ ghi đè sankey.link.color. Loại: chuỗi
Mặc định: "none"
|
| sankey.node |
Kiểm soát thuộc tính của các nút (thanh dọc giữa các liên kết):
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'
]
}
}
Loại: đối tượng
Mặc định: rỗng
|
| sankey.node.colorMode |
Đặt chế độ tô màu cho các nút sankey. Các loại tệp có thể được thu thập dữ liệu bao gồm:
Loại: chuỗi
Mặc định: 'unique'
|
| chú giải công cụ |
Một đối tượng có các thành viên để định cấu hình các thành phần chú giải công cụ. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu của đối tượng, như minh hoạ dưới đây: {textStyle: {color: '#FF0000'}, showColorCode: true}
Loại: đối tượng
Mặc định: rỗng
|
| tooltip.isHtml |
Nếu đặt là true, hãy sử dụng chú giải công cụ hiển thị HTML (thay vì SVG). Hãy xem phần Tuỳ chỉnh nội dung trong chú giải công cụ để biết thêm thông tin chi tiết. Lưu ý: tính năng tuỳ chỉnh nội dung chú giải công cụ HTML thông qua vai trò dữ liệu cột chú giải công cụ không được hình ảnh Biểu đồ bong bóng hỗ trợ. Loại: boolean
Mặc định: false
|
| tooltip.textStyle |
Đối tượng chỉ định kiểu văn bản của chú giải công cụ. Đối tượng có định dạng sau:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Loại: đối tượng
Mặc định:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| chiều rộng |
Chiều rộng của biểu đồ, tính bằng pixel. Loại: số
Mặc định: chiều rộng của phần tử chứa
|
Phương thức
| Phương thức | |
|---|---|
draw(data, options) |
Vẽ biểu đồ. Biểu đồ chỉ chấp nhận các lệnh gọi phương thức khác sau khi sự kiện Loại dữ liệu trả về: không có
|
getBoundingBox(id) |
Trả về một đối tượng chứa thành phần biểu đồ bên trái, trên cùng, chiều rộng và chiều cao
Các giá trị tương ứng với vùng chứa của biểu đồ. Gọi sự kiện này sau khi biểu đồ được vẽ. Loại dữ liệu trả về: đối tượng
|
getSelection() |
Trả về một mảng các thực thể biểu đồ đã chọn.
Các mục có thể chọn là thanh, mục chú giải và danh mục.
Đối với biểu đồ này, hệ thống chỉ có thể chọn một thực thể tại một thời điểm bất kỳ.
Loại dữ liệu trả về: Mảng phần tử lựa chọn
|
setSelection() |
Chọn các thực thể biểu đồ đã chỉ định. Hủy mọi lựa chọn trước đó.
Các mục có thể chọn là thanh, mục chú giải và danh mục.
Đối với biểu đồ này, mỗi lần chỉ có thể chọn một mục.
Loại dữ liệu trả về: không có
|
clearChart() |
Xóa biểu đồ và giải phóng tất cả các tài nguyên được phân bổ của biểu đồ. Loại dữ liệu trả về: không có
|
Sự kiện
| Tên | |
|---|---|
error |
Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ. Thuộc tính: mã, thông báo
|
onmouseover |
Được kích hoạt khi người dùng di chuột qua một thực thể trực quan. Trả về chỉ mục hàng và cột của phần tử bảng dữ liệu tương ứng. Thanh tương quan với một ô trong bảng dữ liệu, mục nhập chú giải vào cột (chỉ mục hàng rỗng) và danh mục thành hàng (chỉ mục cột rỗng). Thuộc tính: hàng, cột
|
onmouseout |
Được kích hoạt khi người dùng di chuyển ra khỏi một thực thể trực quan. Trả về chỉ mục hàng và cột của phần tử bảng dữ liệu tương ứng. Thanh tương quan với một ô trong bảng dữ liệu, mục nhập chú giải vào cột (chỉ mục hàng rỗng) và danh mục thành hàng (chỉ mục cột rỗng). Thuộc tính: hàng, cột
|
ready |
Biểu đồ đã sẵn sàng cho các lệnh gọi phương thức bên ngoài. Nếu muốn tương tác với biểu đồ và gọi các phương thức sau khi vẽ, bạn nên thiết lập trình nghe cho sự kiện này trước khi gọi phương thức Thuộc tính: không có
|
select |
Được kích hoạt khi người dùng nhấp vào một thực thể trực quan. Để tìm hiểu nội dung đã được chọn, hãy gọi
Thuộc tính: không có
|
Chính sách dữ liệu
Tất cả mã và dữ liệu đều được xử lý và hiển thị trong trình duyệt. Không có dữ liệu nào được gửi đến bất kỳ máy chủ nào.