Sankey圖在數據可視化任務中變得越來越流行。因此，前端Web開發人員必須知道如何創建此類圖表。實際上，這是一個非常簡單明了的過程，特別是如果您使用的是一個優秀的JavaScript圖表庫。
在本次教程中，向您展示如何創建美觀，直觀，交互式的JS（HTML5）Sankey圖表。
什么是Sankey圖
首先快速認識Sankey是什么，這樣你才能理解目的，然后再開始討論JavaScript圖表問題。
Sankey圖表是一種數據可視化，它按比例顯示從一組值到另一組值的流量和數量。它以愛爾蘭出生的船長兼工程師馬修桑基命名，他創造了一張圖表來說明19世紀后期蒸汽機的能效。
在Sankey圖中，彼此鏈接的東西稱為節點，它們使用線或箭頭連接。線或箭頭的寬度與從源到目標的流量成比例; 也就是說，寬度越大，流量越大。
線條或箭頭可以在過程的每個階段通過它們的路徑連接或分開。您還可以添加顏色以將圖表拆分為不同的類別，或者演示從流程的一個狀態到另一個狀態的轉換。因此，Sankeys可用于顯示系統中的主要傳輸或流程，這有助于指向整個過程。因此，這種類型的圖表可以很好地可視化兩個域之間的多對多關系或通過系統內的一組階段的多個路徑。
例如，Sankey圖表可用于說明從源到目的地的能量流，貨物從一個位置到另一個位置的轉移，以及其他不同的過程及其狀態。
如何構建一個簡單的JavaScript Sankey圖
Sankey圖看起來很復雜，似乎很難創建。但是，網上有幾個Sankey圖表庫，您可以使用它們輕松繪制交互式Sankey圖表。
從本質上講，幾乎所有用于支持此圖表類型的數據可視化的JavaScript庫繪制Sankey圖的步驟往往大致相同。因此，在掌握了如何使用其中任何一個之后，您可以簡單地將該過程外推到其他庫，并構建其他非凡的東西。
對于這個Sankey圖教程，我將使用AnyChart JavaScript圖表庫。AnyChart重量輕，功能多樣且易于使用。特別是其廣泛的文檔，其中包含用于測試事物的代碼操場，各種支持的圖表類型以及其他一些具有吸引力的數據可視化功能。
【點擊下載AnyChart最新試用版】
現在，讓我們親自動手，看看如何使用AnyChart繪制基于JavaScript的互動式Sankey圖表。
以下是要遵循的步驟：
1.創建一個容器
讓我們首先在HTML頁面上創建一個引用Sankey圖的容器。
<div id="container"></div>
2.連接到JavaScript圖表庫
連接到JS圖表庫有助于將其功能部署到我們的工作空間。我們可以通過下載相關軟件包并將其保存在本地或使用內容交付網絡（CDN）服務來連接到庫。CDN通常是首選，因為它從最靠近用戶的數據中心部署庫的文件，從而提高內容的可用性和性能。
AnyChart采用極簡主義，基于模塊的技術，允許您僅連接項目中所需的圖表類型和功能，從而顯著降低應用程序所需的JavaScript代碼大小。
要創建Sankey圖表，我們需要在
<script src="//cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script><script src="//cdn.anychart.com/releases/v8/js/anychart-sankey.min.js"></script>
3.創建數據
現在，讓我們創建將在Sankey圖上顯示的數據數組。AnyChart JS圖表庫需要定義以下數據字段：
from?—?specifies the source of the data flow
to?—?specifies the destination of the data flow
weight?—?specifies the value of the data
在AnyChart中，數據行標識連接兩個節點的數據流，其名稱在from和to字段中定義。該weight值表示每個流的寬度; 其中，寬度越大，流量越大。
自動排列成多列的節點具有不同的高度，這些高度與輸入或輸出流的總量成比例; 也就是說，數量越大，高度越高。
例如，以下是一些網站每天從兩個熱門搜索引擎收到的網絡流量的任意數據：
var data = [
{from: "Google", to: "Facebook", weight: 20000},
{from: "Google", to: "Twitter", weight: 17000},
{from: "Google", to: "YouTube", weight: 8000},
{from: "Google", to: "Wikipedia", weight: 11000},
{from: "Bing", to: "Facebook", weight: 7500},
{from: "Bing", to: "Twitter", weight: 5000},
{from: "Bing", to: "Wikipedia", weight: 4000}
];4.調用Sankey功能
要繪制Sankey圖，我們需要調用anychart.sankey()圖表構造函數并將data參數傳遞給它，如下圖所示。
var sankey_chart = anychart.sankey(data);
5.自定義節點
現在讓我們調用該nodeWidth()方法來配置節點的寬度。節點的寬度可以設置為百分比或像素。
sankey_chart.nodeWidth("20%");此外，我們可以調用該nodePadding()方法來設置節點之間的垂直填充。在這種情況下，我們為垂直填充提供了值20。
sankey_chart.nodePadding(20);
6.設置容器ID并開始繪制JS圖表
讓我們將Sankey Diagram指向我們在HTML頁面上創建的容器ID，并開始繪制漂亮的圖表。
sankey_chart.container("container");
sankey_chart.draw();最后，我們將整個代碼包裝在AnyChart的onDocumentReady()函數中，以確保在網頁準備好顯示內容時呈現圖表。
以下是使用JavaScript創建簡單Sankey圖的完整代碼：
<html><head><script src="//cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script><script src="//cdn.anychart.com/releases/v8/js/anychart-sankey.min.js"></script></head><body><div id="container"></div><script>
anychart.onDocumentReady(function(){
//creating the data
var data = [
{from: "Google", to: "Facebook", weight: 20000},
{from: "Google", to: "Twitter", weight: 17000},
{from: "Google", to: "YouTube", weight: 8000},
{from: "Google", to: "Wikipedia", weight: 11000},
{from: "Bing", to: "Facebook", weight: 7500},
{from: "Bing", to: "Twitter", weight: 5000},
{from: "Bing", to: "Wikipedia", weight: 4000}
];//calling the Sankey functionvar sankey_chart = anychart.sankey(data);//customizing the width of the nodes
sankey_chart.nodeWidth("20%");//setting the chart title
sankey_chart.title("Simple Sankey Diagram Example");//customizing the vertical padding of the nodes
sankey_chart.nodePadding(20);//setting the container id
sankey_chart.container("container");//initiating drawing the Sankey diagram
sankey_chart.draw();
});</script></body></html>以下是圖表在瀏覽器上的顯示方式：
正如您在上圖中看到的，默認情況下，此Sankey圖表是交互式的。
它的一些默認交互行為包括顯示權重值的工具提示，突出顯示懸浮的流，以及顯示不同顏色的節點。
【點擊查看下一篇：如何使用JavaScript創建酷互動Sankey圖 （二）】
想要購買AnyChart 正版授權的朋友可以。
有關產品動態更多的精彩內容，敬請關注下方的微信公眾號▼▼▼
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：
金喜正規買球 
次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線