AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。
點(diǎn)擊下載AnyChart正式版
在當(dāng)今數(shù)據(jù)呈指數(shù)增長的時(shí)代，可視化是工具箱中必不可少的技能。流行的技術(shù)包括條形圖，折線圖，餅圖和氣泡圖等。
對(duì)于任何開發(fā)人員，尤其是剛起步的開發(fā)人員，使用JavaScript從頭開始構(gòu)建交互式圖表可能都是一項(xiàng)艱巨的工作。這就是為什么我們擁有JS圖表庫的原因，該庫使您可以更輕松，更快捷地創(chuàng)建有見地的可視化效果！
繼續(xù)閱讀以了解如何使用這些庫之一創(chuàng)建JavaScript氣泡圖。
JavaScript圖表庫
有很多很棒的JavaScript庫可供使用，并且每個(gè)庫都有自己的優(yōu)缺點(diǎn)。但是最好的部分是，使用所有圖表構(gòu)建圖表的過程幾乎是相似的。因此，您可以與任何人一起學(xué)習(xí)繩索，然后使用適合您特定項(xiàng)目要求的任何庫。
我決定與本教程一起使用AnyChart JavaScript庫創(chuàng)建氣泡圖。我認(rèn)為對(duì)于初學(xué)者到中級(jí)編碼技能的開發(fā)人員來說，這是一個(gè)不錯(cuò)的選擇。AnyChart具有豐富的文檔資料，非常靈活，并且具有多種圖表類型，可以啟動(dòng)您的可視化之旅。
什么是氣泡圖，它將顯示什么？
我知道您很高興開始創(chuàng)建可視化文件，但是在我們開始之前，了解圖表類型以及為什么它適合我們要顯示的內(nèi)容非常重要。
氣泡圖實(shí)質(zhì)上是氣泡圖和在地理區(qū)域上繪制氣泡的圖的組合。氣泡的大小指示特定變量的值，而地圖上的位置指示位置。
2020年最重要的事件之一是美國總統(tǒng)大選。當(dāng)然，我們知道整體結(jié)果。但是，僅憑一種觀點(diǎn)來看誰在哪個(gè)州和哪個(gè)百分比獲勝就不會(huì)很有趣嗎？我當(dāng)然是這么認(rèn)為的！雖然我敢肯定我們很多人都看過很多2020年美國大選地圖，但我將創(chuàng)建自己的地圖并逐步向您展示！
我將使用氣泡圖圖表，將在每個(gè)美國州上繪制氣泡圖。指示的3個(gè)參數(shù)如下：
-
每個(gè)州的選舉投票數(shù)，以氣泡大小為單位。
-
每個(gè)州的獲勝方，由氣泡色表示。
-
顏色不透明贏得的選票百分比。
如您所見，氣泡圖圖表的超級(jí)強(qiáng)大之處在于能夠在單個(gè)視圖中顯示多個(gè)參數(shù)。
使用JavaScript創(chuàng)建氣泡圖
既然您知道了什么是泡沫圖，并希望您確信它是代表美國大選各州結(jié)果的正確圖表，那么讓我們深入研究一下該過程。
1.創(chuàng)建一個(gè)基本的HTML頁面
第一步是創(chuàng)建一個(gè)空白HTML頁面。為了保存我的圖表，我添加了一個(gè)具有唯一ID的div元素，以后將用它來引用它。
我將占位符div的寬度和高度設(shè)置為100％，以便該圖表顯示在整個(gè)屏幕上。您可以根據(jù)自己的喜好保留這些值。
<!DOCTYPE html>
<html>
<head>
<title>Bubble Map</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
2.包括必要的腳本
下一步是鏈接將用于創(chuàng)建氣泡圖的相應(yīng)JS腳本。由于我使用的是AnyChart庫，因此我將引用相應(yīng)的文件。對(duì)于我的圖表，我需要添加AnyChart的Base和Geo Maps模塊。我還需要包括具有美國各州地理數(shù)據(jù)的文件，該文件也可以在圖書館的CDN中找到。
提醒您，所有腳本文件都必須包含在<head>HTML頁面的部分中。
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-map.min.js" type="text/javascript"></script>
<script src="http://cdn.anychart.com/geodata/latest/countries/united_states_of_america/united_states_of_america.js"></script>
3.連接數(shù)據(jù)
美國選舉結(jié)果有大量數(shù)據(jù)集。對(duì)于此圖表，我們需要特定的字段，因此我必須通過組合來自多個(gè)來源的數(shù)據(jù)來創(chuàng)建最終數(shù)據(jù)集。我使用了美國國會(huì)圖書館網(wǎng)站上有關(guān)各州選舉投票數(shù)的數(shù)據(jù)集以及美聯(lián)社的獲獎(jiǎng)?wù)邤?shù)據(jù)。
AnyChart庫支持許多數(shù)據(jù)格式，包括CSV，JSON，XML ...為了使這里更簡(jiǎn)單，我對(duì)數(shù)據(jù)進(jìn)行了預(yù)處理，以包括圖表的相關(guān)字段，如下所示：
-
州代碼
-
緯度
-
經(jīng)度
-
州名
-
選舉人票數(shù)
-
勝利黨
-
贏得的選票百分比
在開始使用數(shù)據(jù)之前，我們需要在HTML頁面中再添加2個(gè)腳本文件。數(shù)據(jù)適配器模塊處理數(shù)據(jù)文件的加載，因此我們將其包括在內(nèi)。由于我們正在創(chuàng)建地圖，因此我們將使用另一個(gè)JavaScript庫Proj4js，該庫將點(diǎn)坐標(biāo)從一個(gè)坐標(biāo)系轉(zhuǎn)換為另一個(gè)坐標(biāo)系。簡(jiǎn)而言之，它將負(fù)責(zé)在各個(gè)地理區(qū)域上繪制氣泡。
4.添加代碼以繪制圖表
既然預(yù)備賽已經(jīng)結(jié)束，現(xiàn)在是時(shí)候進(jìn)入主要部分了。關(guān)于使用JavaScript圖表庫的重要之處在于，必須編寫的代碼量確實(shí)很少。我將引導(dǎo)您完成代碼行，以便您更好地理解氣泡圖的繪制方式。
首先，我將確保所有用于創(chuàng)建圖表的代碼都在anychart.onDocumentReady()函數(shù)內(nèi)部。這是為了在執(zhí)行其他任何操作之前將頁面完全加載。接下來，我們使用anychart.data.loadJsonFile()函數(shù)加載數(shù)據(jù)。
我首先創(chuàng)建地圖，為其定義一些設(shè)置，然后設(shè)置地理數(shù)據(jù)。我還為地圖添加了標(biāo)題。
anychart.onDocumentReady(function () {
anychart.data.loadJsonFile(
'//gist.githubusercontent.com/shacheeswadia/70ec3d69e0e7a8bff7917607ea2926e4/raw/c3329fa81e86d9e637503b042becd17e68d9a718/bubbleMapData.json',
function (data) {
// Creates map chart
var map = anychart.map();
// Define settings for maps regions
map
.unboundRegions()
.enabled(true)
.fill('#E1E1E1')
.stroke('#D2D2D2');
// Set geodata using the script added
map.geoData('anychart.maps.united_states_of_america');
// Set Chart Title
map
.title('2020 US Election Results');
});
});
接下來，我將氣泡添加到地圖上。由于無法很好地看到微小的氣泡，而很大的氣泡會(huì)造成混亂的重疊，因此我設(shè)置了最小和最大氣泡大小。
// Set bubble min/max size settings
map.minBubbleSize('0.8%').maxBubbleSize('5%');
現(xiàn)在，由于我們要顯示選舉結(jié)果，因此我們需要用獲勝黨的顏色來表示每個(gè)州的獲勝者-民主黨代表藍(lán)色，共和黨代表紅色。為此，我們檢查數(shù)據(jù)中的獲勝者，并為填充屬性分配相應(yīng)的顏色。
// Fill color based on the winner
data.forEach(function(d){
if(d.winner == "Democrats"){
d.fill = "#019bd8";
}else{
d.fill = "#d81c28";
}
});
然后，我根據(jù)數(shù)據(jù)繪制氣泡并設(shè)置氣泡的大小，以反映數(shù)據(jù)中的選舉票數(shù)。我通過一些樣式啟用了氣泡圖的默認(rèn)工具提示和標(biāo)簽。
最后的步驟是設(shè)置容器以引用先前添加的HTML塊元素并繪制圖表。
就是這樣-僅用這幾行HTML和JS代碼就可以準(zhǔn)備好漂亮，功能齊全的交互式氣泡圖！
您可以在CodePen [或在Playground ]上簽出此初始版本。為了您的方便，這是完整的代碼：
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-map.min.js" type="text/javascript"></script>
<script src="http://cdn.anychart.com/geodata/latest/countries/united_states_of_america/united_states_of_america.js"></script>
<script src="http://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.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>
anychart.onDocumentReady(function () {
anychart.data.loadJsonFile(
'//gist.githubusercontent.com/shacheeswadia/70ec3d69e0e7a8bff7917607ea2926e4/raw/c3329fa81e86d9e637503b042becd17e68d9a718/bubbleMapData.json',
function (data) {
// Creates map chart
var map = anychart.map();
// Define settings for maps regions
map
.unboundRegions()
.enabled(true)
.fill('#E1E1E1')
.stroke('#D2D2D2');
// Set geodata using the script added
map.geoData('anychart.maps.united_states_of_america');
// Set Chart Title
map
.title('2020 US Election Results');
// Set bubble min/max size settings
map.minBubbleSize('0.8%').maxBubbleSize('5%');
// Fill color based on the winner
data.forEach(function(d){
if(d.winner == "Democrats"){
d.fill = "#019bd8";
}else{
d.fill = "#d81c28";
}
});
//Charting the bubbles
var series = map.bubble(
anychart.data.set(data).mapAs({ size: 'electoralvotes' })
);
// Tooltip
series
.tooltip(true)
.stroke('2 #E1E1E1')
.fill('#1976d2')
.selectionMode('none');
// Labels
series
.labels()
.enabled(true)
.anchor('left-center')
.position('right')
.fontSize(11)
.offsetX(5);
// Set container id for the chart
map.container('container');
// Initiates chart drawing
map.draw();
});
});
</script>
</body>
</html>
自定義氣泡圖
JS圖表庫通常提供一系列預(yù)先構(gòu)建的自定義選項(xiàng)。
現(xiàn)有的氣泡圖已經(jīng)很棒，但是我們可以用更多的代碼對(duì)其進(jìn)行調(diào)整，使其更具洞察力，更美觀，并改善顯示的信息。
A.根據(jù)得票率分配不透明度
在不增加太多復(fù)雜性的情況下，在一個(gè)視圖中展示最大信息始終是一個(gè)好主意。因此，我想通過用氣泡顏色的不透明度表示贏得的選票百分比來為可視化添加一個(gè)新的方面，這將是一個(gè)很好的機(jī)會(huì)，向您展示如何在過程中使用不同的JavaScript庫。您需要一些特定的功能。
我將使用D3.js（一個(gè)著名的用于數(shù)據(jù)圖形的開源JS庫），并使用它創(chuàng)建一個(gè)線性比例尺，該比例尺將接受數(shù)據(jù)中投票百分比的值并返回相應(yīng)的不透明度值。為此，我添加了必需的D3腳本，然后添加代碼以進(jìn)行縮放。我根據(jù)數(shù)據(jù)調(diào)整輸入和輸出值。最后，我將不透明度值添加到fill屬性。
// Linear scale to get opacity values
var opacity = d3.scaleLinear()
.domain([49, 70])
.range([0.4, 0.9]);
// Fill color based on winner and opacity based on % of votes won
data.forEach(function(d){
var opacityVal = opacity(d.votepercent);
opacityVal = opacityVal.toFixed(2);
if(d.winner == "Democrats"){
d.fill = "#019bd8 " + opacityVal;
}else{
d.fill = "#d81c28 " + opacityVal;
}
});
如果您不完全了解這一部分，請(qǐng)不要感到不知所措。您會(huì)發(fā)現(xiàn)，它雖然稍稍超出了初學(xué)者的水平，但對(duì)許多人還是有幫助的，而且不太復(fù)雜。
B.改善工具提示
默認(rèn)的工具提示僅顯示州名稱，其緯度/經(jīng)度和值對(duì)應(yīng)于每個(gè)州的選舉人票數(shù)。
我們可以自定義工具提示，以顯示我們想要顯示的信息-更有意義。
對(duì)于每個(gè)州，我決定顯示獲勝方的名稱，選舉人票數(shù)和獲勝者所獲票數(shù)的百分比。由于我想顯示多個(gè)字段，因此我為工具提示啟用了HTML，使我可以設(shè)置文本格式。然后，我以HTML格式添加所有信息并修改某些樣式。嗯，現(xiàn)在工具提示就像是氣泡圖可視化的建設(shè)性補(bǔ)充。
// Enable HTML for labels
series.tooltip().useHtml(true);
// Customize tooltip text
series
.tooltip()
.titleFormat("<h6 style='font-size:16px;margin: 0.2rem 0; font-weight:400;'>{%name}")
.format("<h6 style='font-size:14px; font-weight:400; margin: 0.2rem 0;'>Winning Party: <b>{%winner}</b></h6><h6 style='font-size:14px; font-weight:400; margin: 0.2rem 0;'>Electoral Votes: <b>{%electoralvotes}</b></h6><h6 style='font-size:14px; font-weight:400; margin: 0.2rem 0;'>% of votes won: <b>{%votepercent}%</b></h6>");
C.增強(qiáng)圖表的整體外觀
最后一些簡(jiǎn)單的修改以增強(qiáng)圖表。我為圖表添加了一些樣式的字幕，并更改了標(biāo)簽顏色以使其更具對(duì)比度。
我要調(diào)整的最后一件事是將氣泡懸停在氣泡上時(shí)的顏色。
瞧！我們具有基于JavaScript的引人入勝且有效的氣泡圖可視化，可以按州展示美國選舉結(jié)果數(shù)據(jù)！
結(jié)論
如您所見，使用JavaScript庫創(chuàng)建交互式數(shù)據(jù)可視化效果（例如氣泡圖）非常容易且令人興奮。您可以研究其他JavaScript圖表庫，并找到有關(guān)它們的更多信息。
希望本教程使您對(duì)數(shù)據(jù)可視化感興趣，并讓您興奮地開始探索JavaScript圖表。請(qǐng)隨時(shí)提出任何問題，提供建議或發(fā)表評(píng)論?？偠灾灰戎_始創(chuàng)建漂亮，有用的可視化！
相關(guān)產(chǎn)品推薦：
AnyGantt-構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具
AnyMap-可交互式地圖是AnyChart組件
AnyStock-基于XML/JSON的Flash金融圖表解決方案
APS幫助提升企業(yè)生產(chǎn)效率，真正實(shí)現(xiàn)生產(chǎn)計(jì)劃可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場(chǎng)景的生產(chǎn)計(jì)劃，提高準(zhǔn)時(shí)交貨能力，提高產(chǎn)能和資源利用率
想要購買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ī)買球 
18次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買球相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線