AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。
AnyChar HTML5圖表高度可定制且高度兼容。擁有純JavaScript API，AnyChart圖表內置客戶端數據實時更新，多層次向下鉆區和具體參數更新。強大的主題引擎使你通過一系列圖表進行獨特的演示體驗，而PDF和圖像輸出能產出圖書質量打印文檔。
點擊下載AnyChart最新版
展示如何創建交互式 JS Flow Map 的分步教程。通過可視化移民美國的數據來說明。
使用 JavaScript 為 Web 創建交互式 Flow Map 似乎很復雜。但事實并非如此！這個易于遵循的教程將向您展示如何輕松構建漂亮的 JS 流程圖。
在疫情的這困難時期，全球人們對移民身份存在很多困惑和擔憂。我決定看看美國的移民數據，美國的移民人數比世界上任何其他國家都多。在這里，我探討了這些移民來自哪里，代表了 2019 年向美國貢獻最多移民的前 15 個國家。
流程圖似乎是展示從不同國家流入美國的移民的完美方式。在進一步討論之前，讓我簡要介紹一下流程圖及其用途。
什么是流程圖？
Flow Maps 在地理上可視化對象的移動——例如，從一個位置到另一個位置的人或貨物及其數量。
流圖是一種連接器圖，它是通過用指示流向的箭頭或標記將放置在地圖上的點連接起來的直線或曲線繪制的。通常，流量的大小用線的粗細表示。
這些地圖中連接器的起點和終點由緯度和經度參數定義，因此有必要為每個連接器設置這些參數。請注意，應首先定義點的緯度，然后定義每個點的經度。
例如，這是 我將在本教程結束時創建的流程圖。[現在也可以在AnyChart Playground 上使用。]
使用 JavaScript 創建流程圖
有很多優秀的JavaScript 圖表庫可用于創建引人注目的數據可視化。他們中的許多人提供了構建地圖的能力并有自己的優勢。因此，您可以使用最適合您的項目要求的庫。
在本教程中，我使用AnyChart。它看起來最適合使用開箱即用的流程圖選項和深入的文檔來了解流程。
流程圖比條形圖或餅圖等基本圖表稍微復雜一些，但我將引導您完成代碼行以使其更容易掌握。一些關于 HTML 和 JavaScript 的背景知識將幫助您更快地理解，但并不難。看看如何通過 4 個簡單的步驟創建漂亮的交互式 JavaScript 流程圖。
1. 創建一個 HTML 頁面
第一步是創建一個空白的 HTML 頁面，用于保存交互式流程圖。將div具有唯一 id的元素添加到此頁面，稍后將引用該元素。
我將 div 的寬度和高度設置為 100%，以便在整個屏幕上顯示地圖。這可以根據要求和偏好進行修改。
<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. 添加必要的腳本
要使用圖表庫構建數據可視化，您需要鏈接您正在使用的庫的相應 JS 腳本。所有這些腳本文件都包含在 HTML 頁面中。
為了創建 JS 流程圖，我將添加 AnyChart 的“核心”和“地理地圖”模塊。
由于地圖是整個世界的，我鏈接包含世界地理數據的文件，來自圖書館的地圖集合，也可以在其CDN 上找到。
此外，我將使用另一個 JavaScript 庫——Proj4js——簡而言之，它負責繪制各個地理區域的坐標。
<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. 連接數據
對于地圖，數據需要具有緯度和經度坐標以及要顯示的其他信息。我通過整理來自維基百科的移民信息并添加來自名為Latlong的站點的坐標來創建數據集。
對于流程圖，我需要源國家和目的地國家的經緯度。在這里，所有數據點的目的地國家都是美國。要查看數據集的外觀，您可以在此處找到該文件。
為了加載數據文件，我將在 HTML 頁面的部分中包含 AnyChart的數據適配器模塊<head>[并利用 HTML 頁面正文中標記loadJsonFile() 內的方法 <script>來加載帶有 JSON 數據的文件，用于流圖可視化]。
<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()函數中，以確保在執行任何操作之前頁面已完全加載。接下來，我將使用anychart.data.loadJsonFile()函數加載數據。
現在，我使用連接器功能創建流圖，因為這是一種連接器地圖，然后設置地理數據以及設置以確保世界上的所有區域都清晰可見。
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');
})
});
我為圖表添加了一個標題并允許重疊，以便所有數據點及其標簽都可以在地圖上看到，即使它們重疊。
// 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");
現在是創建連接器系列的主要部分，它將代表各種連接。
為此，我創建了一個以數據為參數的輔助函數。在函數中，我創建了將形成連接線的系列，并在 100% 位置添加箭頭標記，這是目的地，因為我們的流程是從各個來源國家到目的地國家 - 美國。
然后我添加顯示來源國家/地區名稱的標簽。
// 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');
});
};
我現在設置數據并調用我使用該數據集作為參數創建的函數。最后一步是設置容器以引用之前添加的 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 構建的現有流程圖很好地展示了大多數移民來自哪里。但是沒有顯示每個國家的移民數量。因此，我將自定義地圖以顯示這一點，并通過一些額外的代碼使地圖更具洞察力。我也會改進視覺美感并做一些其他的小改動。
A. 設置連接器的顏色和大小以及圖例
我決定用連接線的粗細和調色板來表示從每個國家流向美國的移民數量。沒有必要兩者都做，因為可以使用任何一個指標，但我喜歡當兩者都存在時，洞察力如何更容易閱讀。
我修改了輔助函數以包含名稱和顏色參數以及數據。我將使用名稱來標識連接器系列并管理線條的粗細，而顏色變量將指示我在為每個系列調用函數時將指定的顏色。
然后我將名稱和顏色添加到連接器系列，并添加懸停在線和標記的設置。
接下來，我根據系列的名稱設置線條的粗細。這個命名是基于遷移的數量，一旦調用函數就會更清楚。
由于連接器系列根據數據具有不同的顏色，因此我添加了顏色圖例。
如果這一切聽起來很復雜，請不要不知所措。一旦您查看代碼和注釋以及每個片段，就會更有意義。
// 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);
};
在繼續之前，我將創建另一個輔助函數，它是一個過濾器函數，用于分離每個系列中的數據。我將在代碼的末尾添加這個函數。
// 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;
};
}
現在，我基于總移民數據創建了 5 個不同的系列，為每個系列指定一個唯一名稱，根據數據集中的總數字段為每個系列過濾數據，并提供唯一顏色值作為第三個參數。這將根據總遷移數據創建 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 圖表庫的所有內置功能。
B. 完善提示信息
JavaScript 流程圖的默認工具提示顯示源和目標的緯度和經度。這些信息對我們沒有任何用處。因此，我自定義了工具提示以顯示該國家/地區的名稱和來自該國家/地區的移民總數。
我使用 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')
結論
使用 JavaScript 構建交互式地圖可能很困難，但使用 JS 圖表庫可以讓創建此類可視化變得更加簡單和快捷。AnyChart 中有許多可用的圖表類型，您可以在此處查看或查看其他JavaScript 圖表庫以了解有關它們的更多信息。
我希望本教程為您揭開了創建流程圖的神秘面紗，并讓您興奮地探索更多帶有 JavaScript 庫的圖表。無論您是本地人還是移民，家是每個人都更快樂的地方，而 JS 圖表庫是更容易創建圖表的地方！
請提出任何問題或讓我知道您有任何建議。
相關產品推薦：
AnyGantt——構建復雜且內容豐富的甘特圖的理想工具
AnyStock——基于XML/JSON的Flash金融圖表解決方案
AnyMap——可交互式地圖
想要購買AnyChart正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
4次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線