Sơ đồ Sankey

  1. Tổng quan
  2. Ví dụ đơn giản
  3. Sankeys đa cấp
  4. Kiểm soát màu
  5. Tuỳ chỉnh phông chữ
  6. Điều chỉnh nút
  7. Đang tải
  8. Định dạng dữ liệu
  9. Các lựa chọn cấu hình
  10. Phương thức
  11. Sự kiện
  12. Chính sách về dữ liệu

Tổng quan

Biểu đồ sankey là hình ảnh dùng để mô tả luồng từ một tập hợp giá trị đến tập hợp giá trị khác. Những thứ được kết nối được gọi là nút và các kết nối được gọi là đường liên kết. Tốt nhất là bạn nên sử dụng khoá này khi muốn cho thấy mối liên kết nhiều đến nhiều giữa hai miền (ví dụ: trường đại học và đại lý) 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á san để cho biết cách lưu lượng truy cập lưu chuyển từ các trang đến các trang khác trên trang web của bạn).

Đối với người dùng tò mò, chúng được đặt theo tên Đại úy Sankey, người đã tạo ra sơ đồ hiệu suất của động cơ hơi nước sử dụng các mũi tên có chiều rộng tỷ lệ với lượng nhiệt thất thoát.

Lưu ý: Biểu đồ sankey có thể trải qua những sửa đổi đáng kể trong các bản phát hành sau này của Google Biểu đồ.

Sơ đồ Sankey được kết xuất trong trình duyệt bằng cách sử dụng SVG hoặc VML, tuỳ theo lựa chọn 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 đồ sankey của Google không có trong Microsoft Internet Explorer 8 và các phiên bản cũ hơn.

Một ví dụ đơn giản

Giả sử bạn có 2 danh mục A và B kết nối với 3 danh mục khác là X, Y và Z. Một số kết nối trong số đó lớn 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.

Hãy thử di chuột qua một trong các đường liên kết để làm nổi bật mối kết nối đó.

Để tạo biểu đồ sankey, hãy cung cấp một tập hợp các hàng, mỗi hàng chứa thông tin về một kết nối: từ, đến và trọng số. Sau đó, sử dụng phương thức google.visualization.Sankey() để khởi chạy biểu đồ rồi sử dụng phương thức draw() để kết xuất 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 các chu kỳ trong dữ liệu: nếu A liên kết với chính nó hoặc liên kết đến B liên kết với C và liên kết với A, thì biểu đồ của bạn sẽ không hiển thị.

Thanh toán đa cấp

Bạn có thể tạo biểu đồ Sankey có nhiều cấp độ kết nối:

Biểu đồ Sankey sẽ thêm các cấp bổ sung nếu cần, sắp xếp các cấp đó 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ó khả năng đặt màu tuỳ chỉnh cho các nút và đường liên kết. Cả cá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 (sankey.node.colors và sankey.link.colors tương ứng). Bạn cũng có thể đặt các chế độ màu khác nhau bằng tuỳ chọn colorMode.

Nếu không được tuỳ chỉnh, màu sẽ được mặc định là bảng màu Material tiêu chuẩn.

    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 của các đường liên kết, nút và nhãn bằng các lựa chọn cấu hình. Ở đây, chúng tôi chọn 3 đối tượng có cùng màu sắc nhưng độ sáng khác nhau:

Dưới đây là ví dụ về các tuỳ chọn đó:

    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 độ trong suốt của các đường liên kết bằng tuỳ 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:

Bạn có thể chỉ định màu nét vẽ ở đị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 } },
      }
    };

Tuỳ chỉnh nhãn

Bạn có thể tuỳ chỉnh văn bản trên biểu đồ sankey bằng sankey.node.label.fontName và bạn bè:

Dưới đây là khổ tuỳ 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 tôi đã thêm 30 pixel khoảng đệ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 nút là 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 trực quan 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 đại diện cho một kết nối giữa 2 nhãn. Cột thứ ba cho biết cường độ của kết nối đó và sẽ được phản ánh trong 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 (không bắt buộc)
Mục đích: Nguồn Đích đến Giá trị ... Vai trò không bắt buộc
Loại dữ liệu: string string number ...
Vai trò: tên miền tên miền data ...
Các vai trò không bắt buộc trong cột:

None (Không có)

None (Không có)

None (Không có)

 ...

 

Các lựa chọn cấu hình

Tên
forceIFrame

Vẽ biểu đồ bên trong một khung cùng dòng. (Lưu ý rằng trên IE8, tuỳ chọn này sẽ bị bỏ qua; tất cả biểu đồ của IE8 đều được vẽ trong các khung i.)

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 sankey nhiều cấp, đôi khi không rõ ràng, bạn nên đặt các nút để có thể đọc được tối ưu. Công cụ bố cục D3 thử nghiệm với nhiều bố cục nút, dừng lại khi bạn thử sankey.iterations. Con số này càng lớn thì bố cục của các sankey phức tạp càng dễ chịu, nhưng đi kèm với một chi phí: các sankey sẽ mất nhiều thời gian hơn để hiển thị. Ngược lại, số này càng ngắn, biểu đồ của bạn sẽ hiển thị càng nhanh.

Loại: số nguyên
Mặc định: 32
sankey.link

Kiểm soát thuộc tính của kết nối giữa các nút. Hiện tại, tất cả các thuộc tính đều 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ế độ tô màu cho đường 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:

  • 'source' – Màu của nút nguồn được dùng cho các đường liên kết đến tất cả các nút đích.
  • 'target' – Màu của nút đích được dùng cho đường liên kết đến các nút nguồn.
  • 'gradient' – Đường liên kết giữa nút nguồn và nút đích được tô màu dưới dạng dải chuyển màu từ màu nút nguồn sang màu của nút đích.
  • 'none' – lựa chọn mặc định; màu của đường liên kết sẽ được đặt thành mặc định (hoặc màu được chỉ định trong các tuỳ chọn sankey.link.color.fill và sankey.link.color.fillOpacity).

Tuỳ chọn này sẽ ghi đè sankey.link.color.

Loại: chuỗi
Mặc định: "không có"
sankey.node

Kiểm soát thuộc tính của các nút (các 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:

  • 'unique' – Mỗi nút sẽ nhận được một màu duy nhất.
Loại: chuỗi
Mặc định: "duy nhất"
chú thích

Một đối tượng có các thành viên để định cấu hình nhiều phần tử chú thích. Để 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 bằng chữ đố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 bạn đặt chính sách này thành true, hãy sử dụng chú giải công cụ được kết xuất HTML (thay vì kết xuất SVG). Hãy xem bài viết Tuỳ chỉnh nội dung chú thích để biết thêm chi tiết.

Lưu ý: Tính năng tuỳ chỉnh nội dung chú thích HTML thông qua vai trò dữ liệu của cột chú giải công cụ không được hỗ trợ trong hình ảnh Biểu đồ bong bóng.

Loại: boolean
Mặc định: false
tooltip.textStyle

Đối tượng chỉ định kiểu văn bản cho chú giải công cụ. Đối tượng có định dạng sau:

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

color có thể là bất kỳ chuỗi màu HTML nào, ví dụ: 'red' hoặc '#00cc00'. Xem thêm fontName và fontSize.

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 đồ này chỉ chấp nhận các lệnh gọi phương thức khác sau khi kích hoạt sự kiện ready. Extended description.

Loại trả lại: không có
getBoundingBox(id)

Trả về một đối tượng chứa bên trái, trên cùng, chiều rộng và chiều cao của phần tử biểu đồ id. Định dạng của id chưa được ghi nhận (chúng là các giá trị trả về của trình xử lý sự kiện), nhưng sau đây là một số ví dụ:

var cli = chart.getChartLayoutInterface();

Chiều cao của vùng biểu đồ
cli.getBoundingBox('chartarea').height
Chiều rộng của thanh thứ ba trong chuỗi đầu tiên của biểu đồ thanh hoặc biểu đồ cột
cli.getBoundingBox('bar#0#2').width
Hộp giới hạn của hình chêm thứ năm của biểu đồ hình tròn
cli.getBoundingBox('slice#4')
Hộp giới hạn cho dữ liệu biểu đồ của một biểu đồ dọc (ví dụ: cột):
cli.getBoundingBox('vAxis#0#gridline')
Hộp giới hạn cho dữ liệu biểu đồ của biểu đồ ngang (ví dụ: biểu đồ thanh):
cli.getBoundingBox('hAxis#0#gridline')

Các giá trị liên quan đến vùng chứa của biểu đồ. Gọi lệnh 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 gồm các thực thể biểu đồ đã chọn. Thực thể có thể chọn là thanh, mục nhập chú giải và danh mục. Đối với biểu đồ này, bạn chỉ có thể chọn một thực thể tại một thời điểm bất kỳ. Extended description .

Loại dữ liệu trả về: Mảng gồm các phần tử lựa chọn
setSelection()

Chọn các thực thể biểu đồ đã chỉ định. Huỷ mọi lựa chọn trước đó. Thực thể có thể chọn là thanh, mục nhập chú giải và danh mục. Đối với biểu đồ này, mỗi lần bạn chỉ có thể chọn một thực thể. Extended description .

Loại trả lại: không có
clearChart()

Xoá biểu đồ và giải phóng tất cả tài nguyên đã phân bổ của biểu đồ đó.

Loại trả lại: 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ã nhận dạng, thông báo
onmouseover

Được kích hoạt khi người dùng di chuột qua một thực thể hình ảnh. Trả về các chỉ mục hàng và cột của phần tử tương ứng trong bảng dữ liệu. Thanh tương quan với một ô trong bảng dữ liệu, một mục chú giải cho một cột (chỉ mục hàng rỗng) và một danh mục cho một hàng (chỉ mục cột là rỗng).

Tài sản: hàng, cột
onmouseout

Được kích hoạt khi người dùng di chuột ra khỏi một thực thể trực quan. Trả về các chỉ mục hàng và cột của phần tử tương ứng trong bảng dữ liệu. Thanh tương quan với một ô trong bảng dữ liệu, một mục chú giải cho một cột (chỉ mục hàng rỗng) và một danh mục cho một hàng (chỉ mục cột là rỗng).

Tài sản: hàng, cột
ready

Biểu đồ này đã 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 draw và chỉ gọi các phương thức này sau khi sự kiện được kích hoạt.

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ể hình ảnh. Để tìm hiểu những mục đã được chọn, hãy gọi hàm getSelection().

Thuộc tính: không có

Chính sách về 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.