AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數(shù)據(jù)分析、統(tǒng)計學、金融等領域。
AnyChar HTML5圖表高度可定制且高度兼容。擁有純JavaScript API，AnyChart圖表內(nèi)置客戶端數(shù)據(jù)實時更新，多層次向下鉆區(qū)和具體參數(shù)更新。強大的主題引擎使你通過一系列圖表進行獨特的演示體驗，而PDF和圖像輸出能產(chǎn)出圖書質(zhì)量打印文檔。
點擊下載AnyChart最新版
展示如何創(chuàng)建交互式 JS Flow Map 的分步教程。通過可視化移民美國的數(shù)據(jù)來說明。
使用 JavaScript 為 Web 創(chuàng)建交互式 Flow Map 似乎很復雜。但事實并非如此！這個易于遵循的教程將向您展示如何輕松構(gòu)建漂亮的 JS 流程圖。
在疫情的這困難時期，全球人們對移民身份存在很多困惑和擔憂。我決定看看美國的移民數(shù)據(jù)，美國的移民人數(shù)比世界上任何其他國家都多。在這里，我探討了這些移民來自哪里，代表了 2019 年向美國貢獻最多移民的前 15 個國家。
流程圖似乎是展示從不同國家流入美國的移民的完美方式。在進一步討論之前，讓我簡要介紹一下流程圖及其用途。
什么是流程圖？
Flow Maps 在地理上可視化對象的移動——例如，從一個位置到另一個位置的人或貨物及其數(shù)量。
流圖是一種連接器圖，它是通過用指示流向的箭頭或標記將放置在地圖上的點連接起來的直線或曲線繪制的。通常，流量的大小用線的粗細表示。
這些地圖中連接器的起點和終點由緯度和經(jīng)度參數(shù)定義，因此有必要為每個連接器設置這些參數(shù)。請注意，應首先定義點的緯度，然后定義每個點的經(jīng)度。
例如，這是 我將在本教程結(jié)束時創(chuàng)建的流程圖。[現(xiàn)在也可以在AnyChart Playground 上使用。]
使用 JavaScript 創(chuàng)建流程圖
有很多優(yōu)秀的JavaScript 圖表庫可用于創(chuàng)建引人注目的數(shù)據(jù)可視化。他們中的許多人提供了構(gòu)建地圖的能力并有自己的優(yōu)勢。因此，您可以使用最適合您的項目要求的庫。
在本教程中，我使用AnyChart。它看起來最適合使用開箱即用的流程圖選項和深入的文檔來了解流程。
流程圖比條形圖或餅圖等基本圖表稍微復雜一些，但我將引導您完成代碼行以使其更容易掌握。一些關于 HTML 和 JavaScript 的背景知識將幫助您更快地理解，但并不難。看看如何通過 4 個簡單的步驟創(chuàng)建漂亮的交互式 JavaScript 流程圖。
1. 創(chuàng)建一個 HTML 頁面
第一步是創(chuàng)建一個空白的 HTML 頁面，用于保存交互式流程圖。將div具有唯一 id的元素添加到此頁面，稍后將引用該元素。
我將 div 的寬度和高度設置為 100%，以便在整個屏幕上顯示地圖。這可以根據(jù)要求和偏好進行修改。
<html>
<head>
<title>JavaScript Flow Map</title>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
2. 添加必要的腳本
要使用圖表庫構(gòu)建數(shù)據(jù)可視化，您需要鏈接您正在使用的庫的相應 JS 腳本。所有這些腳本文件都包含在 HTML 頁面中。
為了創(chuàng)建 JS 流程圖，我將添加 AnyChart 的“核心”和“地理地圖”模塊。
由于地圖是整個世界的，我鏈接包含世界地理數(shù)據(jù)的文件，來自圖書館的地圖集合，也可以在其CDN 上找到。
此外，我將使用另一個 JavaScript 庫——Proj4js——簡而言之，它負責繪制各個地理區(qū)域的坐標。
<html>
<head>
<title>JavaScript Flow Map</title>
<script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-map.min.js"></script>
<script src="http://cdn.anychart.com/geodata/latest/custom/world/world.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// All the code for the JS flow map will come here
</script>
</body>
</html>
3. 連接數(shù)據(jù)
對于地圖，數(shù)據(jù)需要具有緯度和經(jīng)度坐標以及要顯示的其他信息。我通過整理來自維基百科的移民信息并添加來自名為Latlong的站點的坐標來創(chuàng)建數(shù)據(jù)集。
對于流程圖，我需要源國家和目的地國家的經(jīng)緯度。在這里，所有數(shù)據(jù)點的目的地國家都是美國。要查看數(shù)據(jù)集的外觀，您可以在此處找到該文件。
為了加載數(shù)據(jù)文件，我將在 HTML 頁面的部分中包含 AnyChart的數(shù)據(jù)適配器模塊<head>[并利用 HTML 頁面正文中標記loadJsonFile() 內(nèi)的方法 <script>來加載帶有 JSON 數(shù)據(jù)的文件，用于流圖可視化]。
<html>
<head>
<title>JavaScript Flow Map</title>
<script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-map.min.js"></script>
<script src="http://cdn.anychart.com/geodata/latest/custom/world/world.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
<script src="http://cdn.anychart.com/releases/8.10.0/js/anychart-data-adapter.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.data.loadJsonFile('//gist.githubusercontent.com/shacheeswadia/a20ba5b62cef306ccc1a8e8857e5316a/raw/0337b16fa8dc4de97263bc0a4ededf935a529c35/migration-data.json', function (data) {
// The JS flow map's code will come here
});
</script>
</body>
</html>
4.編寫JS代碼繪制流程圖
在此之前，我會將所有代碼包含在anychart.onDocumentReady()函數(shù)中，以確保在執(zhí)行任何操作之前頁面已完全加載。接下來，我將使用anychart.data.loadJsonFile()函數(shù)加載數(shù)據(jù)。
現(xiàn)在，我使用連接器功能創(chuàng)建流圖，因為這是一種連接器地圖，然后設置地理數(shù)據(jù)以及設置以確保世界上的所有區(qū)域都清晰可見。
anychart.onDocumentReady(function () {
anychart.data.loadJsonFile('//gist.githubusercontent.com/shacheeswadia/a20ba5b62cef306ccc1a8e8857e5316a/raw/0337b16fa8dc4de97263bc0a4ededf935a529c35/migration-data.json', function (data) {
// сreate a connector map chart instance
var map = anychart.connector();
// include the world map geodata
map.geoData('anychart.maps.world');
// darken all regions
map
.unboundRegions()
.enabled(true)
.fill('#E1E1E1')
.stroke('#D2D2D2');
})
});
我為圖表添加了一個標題并允許重疊，以便所有數(shù)據(jù)點及其標簽都可以在地圖上看到，即使它們重疊。
// set the map chart title
map
.title('Migrations to the USA from the top 15 countries');
// display all labels even if there is an overlap
map
.overlapMode("allow-overlap");
現(xiàn)在是創(chuàng)建連接器系列的主要部分，它將代表各種連接。
為此，我創(chuàng)建了一個以數(shù)據(jù)為參數(shù)的輔助函數(shù)。在函數(shù)中，我創(chuàng)建了將形成連接線的系列，并在 100% 位置添加箭頭標記，這是目的地，因為我們的流程是從各個來源國家到目的地國家 - 美國。
然后我添加顯示來源國家/地區(qū)名稱的標簽。
// a helper function to create the series
// that will form the connector lines
var createSeries = function (data) {
// create and customize the connector series
var connectorSeries = map
.connector(data);
connectorSeries
.markers()
.position('100%')
.size(10);
// set the labels for the source countries
connectorSeries
.labels()
.enabled(true)
.format(function () {
return this.getData('from');
});
};
我現(xiàn)在設置數(shù)據(jù)并調(diào)用我使用該數(shù)據(jù)集作為參數(shù)創(chuàng)建的函數(shù)。最后一步是設置容器以引用之前添加的 div 并繪制地圖。
// create a dataset from the data
var dataSet = anychart.data.set(data).mapAs();
createSeries(dataSet);
// set the container
map.container('container');
// draw the map
map.draw();
自定義 JS Flow Map
剛剛使用 JavaScript 構(gòu)建的現(xiàn)有流程圖很好地展示了大多數(shù)移民來自哪里。但是沒有顯示每個國家的移民數(shù)量。因此，我將自定義地圖以顯示這一點，并通過一些額外的代碼使地圖更具洞察力。我也會改進視覺美感并做一些其他的小改動。
A. 設置連接器的顏色和大小以及圖例
我決定用連接線的粗細和調(diào)色板來表示從每個國家流向美國的移民數(shù)量。沒有必要兩者都做，因為可以使用任何一個指標，但我喜歡當兩者都存在時，洞察力如何更容易閱讀。
我修改了輔助函數(shù)以包含名稱和顏色參數(shù)以及數(shù)據(jù)。我將使用名稱來標識連接器系列并管理線條的粗細，而顏色變量將指示我在為每個系列調(diào)用函數(shù)時將指定的顏色。
然后我將名稱和顏色添加到連接器系列，并添加懸停在線和標記的設置。
接下來，我根據(jù)系列的名稱設置線條的粗細。這個命名是基于遷移的數(shù)量，一旦調(diào)用函數(shù)就會更清楚。
由于連接器系列根據(jù)數(shù)據(jù)具有不同的顏色，因此我添加了顏色圖例。
如果這一切聽起來很復雜，請不要不知所措。一旦您查看代碼和注釋以及每個片段，就會更有意義。
// a helper function to create the series
// that will form the connector lines
var createSeries = function (name, data, color) {
// create and customize the connector series
var connectorSeries = map
.connector(data)
.name(name)
.fill(color)
.stroke({
color: color,
thickness: 2
});
// change the coloring of the connector line in the hovered state
connectorSeries
.hovered()
.stroke('1.5 #212121')
.fill('#212121');
// configure the arrow marker
connectorSeries
.markers()
.position('100%')
.fill(color)
.stroke({
color: color
})
.size(8);
// configure the arrow marker in the hovered state
connectorSeries
.hovered()
.markers()
.position('100%')
.size(10)
.fill('#212121')
.stroke('2 #455a64');
// set the labels for the source countries
connectorSeries
.labels()
.enabled(true)
.format(function () {
return this.getData('from');
});
// set the thickness of the connector line based on the series
if (name === 'More than 50,000') {
connectorSeries.startSize(5).endSize(2);
} else if (name === '40,000 to 50,000') {
connectorSeries.startSize(3.5).endSize(1.5);
} else if (name === '20,000 to 40,000') {
connectorSeries.startSize(3).endSize(1);
} else if (name === '16,000 to 20,000') {
connectorSeries.startSize(2).endSize(0.5);
} else {
connectorSeries.startSize(1).endSize(0);
}
// configure the settings for the legend items
connectorSeries
.legendItem()
.iconType('square')
.iconFill(color)
.iconStroke(false);
};
在繼續(xù)之前，我將創(chuàng)建另一個輔助函數(shù)，它是一個過濾器函數(shù)，用于分離每個系列中的數(shù)據(jù)。我將在代碼的末尾添加這個函數(shù)。
// a helper function to bind the data field to the local var.
function filterFunction(val1, val2) {
if (val2) {
return function (fieldVal) {
return val1 <= fieldVal && fieldVal < val2;
};
}
return function (fieldVal) {
return val1 <= fieldVal;
};
}
現(xiàn)在，我基于總移民數(shù)據(jù)創(chuàng)建了 5 個不同的系列，為每個系列指定一個唯一名稱，根據(jù)數(shù)據(jù)集中的總數(shù)字段為每個系列過濾數(shù)據(jù)，并提供唯一顏色值作為第三個參數(shù)。這將根據(jù)總遷移數(shù)據(jù)創(chuàng)建 5 個具有不同厚度和顏色的連接器系列組。
// create five series filtering the data
// by the absolute values of the migration numbers
createSeries(
'Less than 16,000',
dataSet.filter('total', filterFunction(0, 16000)),
'#fed693'
);
createSeries(
'16,000 to 20,000',
dataSet.filter('total', filterFunction(16000, 20000)),
'#f5ad52'
);
createSeries(
'20,000 to 40,000',
dataSet.filter('total', filterFunction(20000, 40000)),
'#3fb8c5'
);
createSeries(
'40,000 to 50,000',
dataSet.filter('total', filterFunction(40000, 50000)),
'#1792c0'
);
createSeries(
'More than 50,000',
dataSet.filter('total', filterFunction(50000, 1000000)),
'#1c5eaa'
);
由于我添加了圖例，因此我為地圖啟用了它并為圖例添加了標題。
// set up the legend for the sample
map
.legend()
.enabled(true)
.position('center')
.padding([20, 0, 20, 0])
.fontSize(10);
map
.legend()
.title()
.enabled(true)
.fontSize(13)
.padding([0, 0, 5, 0])
.text('Number of Migrants (in the year 2019)');
請注意，圖例是交互式的。因此，您可以將鼠標懸停在圖例的每個元素上，相應的系列組將突出顯示。您還可以單擊圖例元素以添加或刪除該特定系列組。這是 JS 圖表庫的所有內(nèi)置功能。
B. 完善提示信息
JavaScript 流程圖的默認工具提示顯示源和目標的緯度和經(jīng)度。這些信息對我們沒有任何用處。因此，我自定義了工具提示以顯示該國家/地區(qū)的名稱和來自該國家/地區(qū)的移民總數(shù)。
我使用 HTML 作為工具提示，使我能夠設置文本格式。這使得工具提示更具信息性和吸引力。
// configure the tooltip setting for the series
connectorSeries
.tooltip()
.useHtml(true)
.format(function () {
return (
'<h4 style="font-size:14px; font-weight:400; margin: 0.25rem 0;">From:<b> ' + this.getData('from') + '</b></h4>' +
'<h4 style="font-size:14px; font-weight:400; margin: 0.25rem 0;">Total Migrants::<b>' + this.getData('total').toLocaleString() + '</b></h4>'
);
});
C. 加強標題和標簽
最后，我進行了一些簡單的修改，以增強地圖的美感并為標題添加一些見解。
我再次使用 HTML 格式化標題并添加副標題，以使文本的樣式可自定義。
// set the map chart title
map
.title()
.enabled(true)
.useHtml(true)
.padding([0, 0, 40, 0])
.text(
'<span style="color:#212121;">Migrations to the USA from the top 15 countries</span><br/>' +
'<span style="font-size: 14px;">Majority of the migrants come from Mexico, Asia and South America</span>'
);
最后，我將地圖圖例移到底部并使標簽顏色變暗以使其更加突出。
map
.legend()
.position('bottom')
結(jié)論
使用 JavaScript 構(gòu)建交互式地圖可能很困難，但使用 JS 圖表庫可以讓創(chuàng)建此類可視化變得更加簡單和快捷。AnyChart 中有許多可用的圖表類型，您可以在此處查看或查看其他JavaScript 圖表庫以了解有關它們的更多信息。
我希望本教程為您揭開了創(chuàng)建流程圖的神秘面紗，并讓您興奮地探索更多帶有 JavaScript 庫的圖表。無論您是本地人還是移民，家是每個人都更快樂的地方，而 JS 圖表庫是更容易創(chuàng)建圖表的地方！
請?zhí)岢鋈魏螁栴}或讓我知道您有任何建議。
相關產(chǎn)品推薦：
AnyGantt——構(gòu)建復雜且內(nèi)容豐富的甘特圖的理想工具
AnyStock——基于XML/JSON的Flash金融圖表解決方案
AnyMap——可交互式地圖
想要購買AnyChart正版授權，或了解更多產(chǎn)品信息請點擊
標簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務必注明出處、不得修改原文相關鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自：
半島外圍網(wǎng)上直營 
4次
相關產(chǎn)品
正式授權
最新文章 
半島外圍網(wǎng)上直營相關的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線