三角插圖

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

總覽

「Sankey 圖表」是一種視覺化圖表，用來呈現在一組值之間流通的情形。連線的連線稱為「節點」，連線稱為「連結」。如果您想在兩個網域 (例如大專院校和主要網域) 之間顯示多對多對應關係，或是跨一系列網域 (例如 Google Analytics (分析)) 顯示流量是經由另一個網頁傳輸到您網站的其他網頁，就適合使用 Santo 。

為了方便起見，它們是以 Captain Sankey 命名，並以寬度蒸汽引擎效率圖表命名。

注意：或是在未來的 Google 圖表版本中，野火圖表可能出現重大修訂版本。

系統會利用 SVG 或 VML 在瀏覽器中顯示火星圖表，這適用於使用者的瀏覽器。Google 的 sankey 版面配置程式碼衍生自 D3 的 sankey 版面配置程式碼。

注意：Microsoft Internet Explorer 8 以下版本不支援 Google san Graph 圖表。

簡易範例

假設您有兩個類別，分別是 A 和 B，並連結至三個其他類別：X、Y 和 Z。有些連線能力比較高。例如，B 有一個與 X 的強烈連線，以及 Y 的洽詢程度非常高。

將滑鼠遊標懸停在其中一個連結上，系統就會醒目顯示連結。

如要建立 sankey 圖表，請提供一組資料列，且每個資料列都含有一個連線的相關資訊，分別是：from、from 和 weight。然後使用 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>

注意：請避免資料週期：如果指向本身的連結，或連結至 B 連結至 A 的 B 連結，您的圖表將不會顯示。

多層式瀏覽金鑰

您可以建立含有多個連線程度的 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 欄 (選填)
用途： 來源 目的地 值 … 選用角色
資料類型： 字串 字串 號碼 …
角色： 網域 網域 資料或曾存取這類資料的人員 …
選用的資料欄角色：

無

無

無

 …

 

設定選項

名稱
強制頁框

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

類型：布林值
預設：false
height

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

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

使用多層式處理機時，有時很難選擇節點來提高最佳可讀性。具備不同節點版面配置的 D3 版面配置引擎實驗，在嘗試 sankey.iterations 後停止嘗試。這個數字越大，代表越喜歡使用假的草坪，但這麼做會產生費用，但車子的顯示時間會較長。反之，如果數字越短，圖表顯示的速度就越快。

類型：整數
預設：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'
    ]
  }
}
類型：物件
預設：空值
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'
    ]
  }
}
類型：物件
預設：空值
sankey.node.colorMode

設定瀏覽鍵節點的顏色。可能的類型包括：

  • 'unique' - 每個節點都會有專屬顏色。
類型：字串
預設：「專屬」
工具提示

包含成員的物件，用於設定各種工具提示元素。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示：

{textStyle: {color: '#FF0000'}, showColorCode: true}
類型：物件
預設：空值
工具提示.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>}
width

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

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

方法

方法
draw(data, options)

繪製圖表。圖表只會在觸發 ready 事件後接受進一步方法呼叫。Extended description。

Return Type (傳回類型)：無
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 。

Return Type (傳回類型)：無
clearChart()

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

Return Type (傳回類型)：無

活動

名稱
error

嘗試轉譯圖表時發生錯誤。

Properties：id、message
onmouseover

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

屬性：列、欄
onmouseout

使用者離開視覺實體時觸發。回傳對應資料表元素的資料列和資料欄索引。長條會與資料表裡的儲存格建立關聯、資料列的圖例項目 (空值) 和一個資料列 (欄索引為空值)。

屬性：列、欄
ready

這張圖表已經可供外部方法呼叫使用。如果您想要在繪製圖表後呼叫互動方法，請在呼叫 draw 方法「之前」設定這個事件的監聽器，並且只在事件觸發後呼叫。

屬性：無
select

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

屬性：無

資料政策

瀏覽器會處理所有程式碼和資料，並經過轉譯。不會將任何資料傳送至任何伺服器。