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