桑基圖

  1. Overview
  2. 簡易範例
  3. 多層次桑基
  4. 控制顏色
  5. 自訂字型
  6. 調整節點
  7. 載入中
  8. 資料格式
  9. 設定選項
  10. 方法
  11. 事件
  12. 資料政策

總覽

桑基圖是一種視覺化內容，用來描述一組值之間的流程。連接的東西稱為「節點」，連線則稱為「連結」。如果想呈現兩個網域 (例如大專院校和主要檔案) 之間的多對多對應關係，或是想顯示一組階段的多條路徑 (例如，Google Analytics (分析) 會使用 Sankey 來呈現從網頁到網站上其他網頁的流量)。

好奇的是，我們以桑基船長 (Captain Sankey) 命名，建立了蒸汽引擎效率圖表，其中使用的箭頭寬度與熱損失成正比。

注意：日後的 Google Charts 版本可能會進行大量修訂。

在使用者的瀏覽器適用的情況下，系統會使用 SVG 或 VML 在瀏覽器中算繪桑基圖。Google 的 Sankey 版面配置程式碼衍生自 D3 的 Sankey 版面配置程式碼。

注意：Microsoft Internet Explorer 8 以下版本無法使用 Google 清理圖表。

簡易範例

假設您有 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>

注意：避免資料循環：如果連結本身，或連結至 C 且指向 A 的 C，圖表就不會顯示。

多層次桑基

您可以建立多個連結層級的桑基圖：

桑基圖會視需要新增其他層級，並自動安排位置。以下是上方圖表的完整程式碼：

<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 選項，為這些色彩模式提供不同的色彩模式。

如未自訂顏色，則會預設為標準質感調色盤。

    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 欄 (選用)
用途： 來源 目的地 價值 ... 選用角色
資料類型： 字串 字串 號碼 ...
角色： 網域 網域 資料 ...
選用的資料欄角色：

無

無

無

 ...

 

設定選項

名稱
forceIFrame

在內嵌頁框中繪製圖表。(請注意，在 IE8 中，系統會忽略此選項；所有 IE8 圖表都會繪製成 iFrame。)

類型：布林值
預設值：false
高度

圖表的高度，以像素為單位。

類型：數字
預設：所含元素的高度
sankey.iterations

為了獲得最佳可讀性，多層式 Sankey 有時可能難以察覺節點的放置位置。使用不同的節點版面配置的 D3 版面配置引擎實驗 (在嘗試執行 sankey.iterations 時停止)。這個數字越大，複雜 Sankey 的版面配置就越美化，但也需要成本： Sankey 需要較長的轉譯時間。反之，這個數字越短，圖表算繪的速度就越快。

類型：整數
預設值：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

設定節點之間連結的色彩模式。可能的類型包括：

  • 'source'：來源節點的顏色會用於所有目標節點的連結。
  • 'target'：目標節點的顏色會用於連結其來源節點。
  • 'gradient'：來源與目標節點之間的連結會以漸層色，呈現來源節點顏色與目標節點顏色之間的漸層。
  • 'none'：預設選項，連結顏色會設為預設值 (或 sankey.link.color.fill 和 sankey.link.color.fillOpacity 選項指定的顏色)。

這個選項會覆寫 sankey.link.color。

類型：字串
預設：「無」
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'：每個節點都會收到不重複的顏色。
類型：字串
預設值：「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 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
寬度

圖表的寬度，以像素為單位。

類型：數字
預設：所含元素的寬度

方法

方法
draw(data, options)

繪製圖表。只有在觸發 ready 事件後，圖表才能接受其他方法呼叫。Extended description。

傳回類型：無
getBoundingBox(id)

傳回包含圖表元素 id 左側、頂端、寬度和高度的物件。尚未記錄 id 的格式 (這些是事件處理常式的傳回值)，但以下提供一些範例：

var cli = chart.getChartLayoutInterface();

圖表區域的高度
cli.getBoundingBox('chartarea').height
長條圖第一連串的第三條長條寬度
cli.getBoundingBox('bar#0#2').width
圓餅圖第五個楔形的定界框
cli.getBoundingBox('slice#4')
垂直 (例如柱狀圖) 圖表資料的定界框：
cli.getBoundingBox('vAxis#0#gridline')
水平 (例如長條圖) 的圖表資料定界框：
cli.getBoundingBox('hAxis#0#gridline')

值是相對於圖表容器的值。請在繪製圖表「之後」呼叫此動作。

傳回類型：物件
getSelection()

傳回所選圖表實體的陣列。 可選取的實體包括長條圖、圖例項目和類別。 在這張圖表中，無論何時都只能選取一個實體。 Extended description 。

傳回類型：選取元素的陣列
setSelection()

選取指定的圖表實體。取消先前選取的任何項目。 可選取的實體包括長條圖、圖例項目和類別。 在這張圖表中，一次只能選取一個實體。 Extended description 。

傳回類型：無
clearChart()

清除圖表並釋出所有分配的資源。

傳回類型：無

事件

名稱
error

嘗試算繪圖表時發生錯誤時觸發。

屬性：ID、訊息
onmouseover

在使用者將滑鼠遊標懸停在視覺實體上時觸發。回傳對應資料表元素的列和欄索引。 長條與資料表中的儲存格、資料欄的圖例項目 (列索引為空值) 以及資料列的類別 (欄索引為空值) 相關聯。

屬性：列、欄
onmouseout

在使用者滑鼠遊標移離視覺實體時觸發。傳回對應資料表元素的列和欄索引。長條與資料表中的儲存格、資料欄的圖例項目 (列索引為空值) 以及資料列的類別 (欄索引為空值) 相關聯。

屬性：列、欄
ready

圖表已可供外部方法呼叫。如果您想與圖表互動，並在繪製後呼叫方法，您應「先」設定此事件的事件監聽器，並只在事件觸發後才呼叫這些事件。draw

屬性：無
select

在使用者點選視覺實體時觸發。如要瞭解已選取的項目，請呼叫 getSelection()。

屬性：無

資料政策

所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。