国产午夜福利在线,亚洲高清偷拍国产,国产九九91在线

如何使用JavaScript創(chuàng)建酷互動(dòng)Sankey圖 (一）

翻譯|使用教程|編輯：吳園園|2019-07-08 14:15:59.720|閱讀 686 次

概述：本教程將講解如何使用AnyChart繪制基于JavaScript的互動(dòng)式Sankey圖表。

圖片1_meitu_8.jpg

Sankey圖在數(shù)據(jù)可視化任務(wù)中變得越來越流行。因此，前端Web開發(fā)人員必須知道如何創(chuàng)建此類圖表。實(shí)際上，這是一個(gè)非常簡單明了的過程，特別是如果您使用的是一個(gè)優(yōu)秀的JavaScript圖表庫。

在本次教程中，向您展示如何創(chuàng)建美觀，直觀，交互式的JS（HTML5）Sankey圖表。

什么是Sankey圖

首先快速認(rèn)識(shí)Sankey是什么，這樣你才能理解目的，然后再開始討論JavaScript圖表問題。

Sankey圖表是一種數(shù)據(jù)可視化，它按比例顯示從一組值到另一組值的流量和數(shù)量。它以愛爾蘭出生的船長兼工程師馬修?；麆?chuàng)造了一張圖表來說明19世紀(jì)后期蒸汽機(jī)的能效。

在Sankey圖中，彼此鏈接的東西稱為節(jié)點(diǎn)，它們使用線或箭頭連接。線或箭頭的寬度與從源到目標(biāo)的流量成比例; 也就是說，寬度越大，流量越大。

線條或箭頭可以在過程的每個(gè)階段通過它們的路徑連接或分開。您還可以添加顏色以將圖表拆分為不同的類別，或者演示從流程的一個(gè)狀態(tài)到另一個(gè)狀態(tài)的轉(zhuǎn)換。因此，Sankeys可用于顯示系統(tǒng)中的主要傳輸或流程，這有助于指向整個(gè)過程。因此，這種類型的圖表可以很好地可視化兩個(gè)域之間的多對(duì)多關(guān)系或通過系統(tǒng)內(nèi)的一組階段的多個(gè)路徑。

例如，Sankey圖表可用于說明從源到目的地的能量流，貨物從一個(gè)位置到另一個(gè)位置的轉(zhuǎn)移，以及其他不同的過程及其狀態(tài)。

如何構(gòu)建一個(gè)簡單的JavaScript Sankey圖

Sankey圖看起來很復(fù)雜，似乎很難創(chuàng)建。但是，網(wǎng)上有幾個(gè)Sankey圖表庫，您可以使用它們輕松繪制交互式Sankey圖表。

從本質(zhì)上講，幾乎所有用于支持此圖表類型的數(shù)據(jù)可視化的JavaScript庫繪制Sankey圖的步驟往往大致相同。因此，在掌握了如何使用其中任何一個(gè)之后，您可以簡單地將該過程外推到其他庫，并構(gòu)建其他非凡的東西。

對(duì)于這個(gè)Sankey圖教程，我將使用AnyChart JavaScript圖表庫。AnyChart重量輕，功能多樣且易于使用。特別是其廣泛的文檔，其中包含用于測試事物的代碼操場，各種支持的圖表類型以及其他一些具有吸引力的數(shù)據(jù)可視化功能。

【點(diǎn)擊下載AnyChart最新試用版】

現(xiàn)在，讓我們親自動(dòng)手，看看如何使用AnyChart繪制基于JavaScript的互動(dòng)式Sankey圖表。

以下是要遵循的步驟：

1.創(chuàng)建一個(gè)容器

讓我們首先在HTML頁面上創(chuàng)建一個(gè)引用Sankey圖的容器。

<div id="container"></div>

2.連接到JavaScript圖表庫

連接到JS圖表庫有助于將其功能部署到我們的工作空間。我們可以通過下載相關(guān)軟件包并將其保存在本地或使用內(nèi)容交付網(wǎng)絡(luò)（CDN）服務(wù)來連接到庫。CDN通常是首選，因?yàn)樗鼜淖羁拷脩舻臄?shù)據(jù)中心部署庫的文件，從而提高內(nèi)容的可用性和性能。

AnyChart采用極簡主義，基于模塊的技術(shù)，允許您僅連接項(xiàng)目中所需的圖表類型和功能，從而顯著降低應(yīng)用程序所需的JavaScript代碼大小。

要?jiǎng)?chuàng)建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.創(chuàng)建數(shù)據(jù)

現(xiàn)在，讓我們創(chuàng)建將在Sankey圖上顯示的數(shù)據(jù)數(shù)組。AnyChart JS圖表庫需要定義以下數(shù)據(jù)字段：

from?—?specifies the source of the data flow
to?—?specifies the destination of the data flow
weight?—?specifies the value of the data

在AnyChart中，數(shù)據(jù)行標(biāo)識(shí)連接兩個(gè)節(jié)點(diǎn)的數(shù)據(jù)流，其名稱在from和to字段中定義。該weight值表示每個(gè)流的寬度; 其中，寬度越大，流量越大。

自動(dòng)排列成多列的節(jié)點(diǎn)具有不同的高度，這些高度與輸入或輸出流的總量成比例; 也就是說，數(shù)量越大，高度越高。

例如，以下是一些網(wǎng)站每天從兩個(gè)熱門搜索引擎收到的網(wǎng)絡(luò)流量的任意數(shù)據(jù)：

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.調(diào)用Sankey功能

要繪制Sankey圖，我們需要調(diào)用anychart.sankey()圖表構(gòu)造函數(shù)并將data參數(shù)傳遞給它，如下圖所示。

var sankey_chart = anychart.sankey(data);

5.自定義節(jié)點(diǎn)

現(xiàn)在讓我們調(diào)用該nodeWidth()方法來配置節(jié)點(diǎn)的寬度。節(jié)點(diǎn)的寬度可以設(shè)置為百分比或像素。

sankey_chart.nodeWidth("20%");

此外，我們可以調(diào)用該nodePadding()方法來設(shè)置節(jié)點(diǎn)之間的垂直填充。在這種情況下，我們?yōu)榇怪碧畛?提供了值20。

sankey_chart.nodePadding(20);

6.設(shè)置容器ID并開始繪制JS圖表

讓我們將Sankey Diagram指向我們在HTML頁面上創(chuàng)建的容器ID，并開始繪制漂亮的圖表。

sankey_chart.container("container");
sankey_chart.draw();

最后，我們將整個(gè)代碼包裝在AnyChart的onDocumentReady()函數(shù)中，以確保在網(wǎng)頁準(zhǔn)備好顯示內(nèi)容時(shí)呈現(xiàn)圖表。

以下是使用JavaScript創(chuàng)建簡單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>

以下是圖表在瀏覽器上的顯示方式：

圖片2_meitu_9.jpg