AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。
點擊下載AnyChart正式版
在當今數據呈指數增長的時代，可視化是工具箱中必不可少的技能。流行的技術包括條形圖，折線圖，餅圖和氣泡圖等。
對于任何開發人員，尤其是剛起步的開發人員，使用JavaScript從頭開始構建交互式圖表可能都是一項艱巨的工作。這就是為什么我們擁有JS圖表庫的原因，該庫使您可以更輕松，更快捷地創建有見地的可視化效果！
繼續閱讀以了解如何使用這些庫之一創建JavaScript氣泡圖。
JavaScript圖表庫
有很多很棒的JavaScript庫可供使用，并且每個庫都有自己的優缺點。但是最好的部分是，使用所有圖表構建圖表的過程幾乎是相似的。因此，您可以與任何人一起學習繩索，然后使用適合您特定項目要求的任何庫。
我決定與本教程一起使用AnyChart JavaScript庫創建氣泡圖。我認為對于初學者到中級編碼技能的開發人員來說，這是一個不錯的選擇。AnyChart具有豐富的文檔資料，非常靈活，并且具有多種圖表類型，可以啟動您的可視化之旅。
什么是氣泡圖，它將顯示什么？
我知道您很高興開始創建可視化文件，但是在我們開始之前，了解圖表類型以及為什么它適合我們要顯示的內容非常重要。
氣泡圖實質上是氣泡圖和在地理區域上繪制氣泡的圖的組合。氣泡的大小指示特定變量的值，而地圖上的位置指示位置。
2020年最重要的事件之一是美國總統大選。當然，我們知道整體結果。但是，僅憑一種觀點來看誰在哪個州和哪個百分比獲勝就不會很有趣嗎？我當然是這么認為的！雖然我敢肯定我們很多人都看過很多2020年美國大選地圖，但我將創建自己的地圖并逐步向您展示！
我將使用氣泡圖圖表，將在每個美國州上繪制氣泡圖。指示的3個參數如下：
-
每個州的選舉投票數，以氣泡大小為單位。
-
每個州的獲勝方，由氣泡色表示。
-
顏色不透明贏得的選票百分比。
如您所見，氣泡圖圖表的超級強大之處在于能夠在單個視圖中顯示多個參數。
使用JavaScript創建氣泡圖
既然您知道了什么是泡沫圖，并希望您確信它是代表美國大選各州結果的正確圖表，那么讓我們深入研究一下該過程。
1.創建一個基本的HTML頁面
第一步是創建一個空白HTML頁面。為了保存我的圖表，我添加了一個具有唯一ID的div元素，以后將用它來引用它。
我將占位符div的寬度和高度設置為100％，以便該圖表顯示在整個屏幕上。您可以根據自己的喜好保留這些值。
<!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.包括必要的腳本
下一步是鏈接將用于創建氣泡圖的相應JS腳本。由于我使用的是AnyChart庫，因此我將引用相應的文件。對于我的圖表，我需要添加AnyChart的Base和Geo Maps模塊。我還需要包括具有美國各州地理數據的文件，該文件也可以在圖書館的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.連接數據
美國選舉結果有大量數據集。對于此圖表，我們需要特定的字段，因此我必須通過組合來自多個來源的數據來創建最終數據集。我使用了美國國會圖書館網站上有關各州選舉投票數的數據集以及美聯社的獲獎者數據。
AnyChart庫支持許多數據格式，包括CSV，JSON，XML ...為了使這里更簡單，我對數據進行了預處理，以包括圖表的相關字段，如下所示：
-
州代碼
-
緯度
-
經度
-
州名
-
選舉人票數
-
勝利黨
-
贏得的選票百分比
在開始使用數據之前，我們需要在HTML頁面中再添加2個腳本文件。數據適配器模塊處理數據文件的加載，因此我們將其包括在內。由于我們正在創建地圖，因此我們將使用另一個JavaScript庫Proj4js，該庫將點坐標從一個坐標系轉換為另一個坐標系。簡而言之，它將負責在各個地理區域上繪制氣泡。
4.添加代碼以繪制圖表
既然預備賽已經結束，現在是時候進入主要部分了。關于使用JavaScript圖表庫的重要之處在于，必須編寫的代碼量確實很少。我將引導您完成代碼行，以便您更好地理解氣泡圖的繪制方式。
首先，我將確保所有用于創建圖表的代碼都在anychart.onDocumentReady()函數內部。這是為了在執行其他任何操作之前將頁面完全加載。接下來，我們使用anychart.data.loadJsonFile()函數加載數據。
我首先創建地圖，為其定義一些設置，然后設置地理數據。我還為地圖添加了標題。
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";
}
});
然后，我根據數據繪制氣泡并設置氣泡的大小，以反映數據中的選舉票數。我通過一些樣式啟用了氣泡圖的默認工具提示和標簽。
最后的步驟是設置容器以引用先前添加的HTML塊元素并繪制圖表。
就是這樣-僅用這幾行HTML和JS代碼就可以準備好漂亮，功能齊全的交互式氣泡圖！
您可以在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圖表庫通常提供一系列預先構建的自定義選項。
現有的氣泡圖已經很棒，但是我們可以用更多的代碼對其進行調整，使其更具洞察力，更美觀，并改善顯示的信息。
A.根據得票率分配不透明度
在不增加太多復雜性的情況下，在一個視圖中展示最大信息始終是一個好主意。因此，我想通過用氣泡顏色的不透明度表示贏得的選票百分比來為可視化添加一個新的方面，這將是一個很好的機會，向您展示如何在過程中使用不同的JavaScript庫。您需要一些特定的功能。
我將使用D3.js（一個著名的用于數據圖形的開源JS庫），并使用它創建一個線性比例尺，該比例尺將接受數據中投票百分比的值并返回相應的不透明度值。為此，我添加了必需的D3腳本，然后添加代碼以進行縮放。我根據數據調整輸入和輸出值。最后，我將不透明度值添加到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;
}
});
如果您不完全了解這一部分，請不要感到不知所措。您會發現，它雖然稍稍超出了初學者的水平，但對許多人還是有幫助的，而且不太復雜。
B.改善工具提示
默認的工具提示僅顯示州名稱，其緯度/經度和值對應于每個州的選舉人票數。
我們可以自定義工具提示，以顯示我們想要顯示的信息-更有意義。
對于每個州，我決定顯示獲勝方的名稱，選舉人票數和獲勝者所獲票數的百分比。由于我想顯示多個字段，因此我為工具提示啟用了HTML，使我可以設置文本格式。然后，我以HTML格式添加所有信息并修改某些樣式。嗯，現在工具提示就像是氣泡圖可視化的建設性補充。
// 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.增強圖表的整體外觀
最后一些簡單的修改以增強圖表。我為圖表添加了一些樣式的字幕，并更改了標簽顏色以使其更具對比度。
我要調整的最后一件事是將氣泡懸停在氣泡上時的顏色。
瞧！我們具有基于JavaScript的引人入勝且有效的氣泡圖可視化，可以按州展示美國選舉結果數據！
結論
如您所見，使用JavaScript庫創建交互式數據可視化效果（例如氣泡圖）非常容易且令人興奮。您可以研究其他JavaScript圖表庫，并找到有關它們的更多信息。
希望本教程使您對數據可視化感興趣，并讓您興奮地開始探索JavaScript圖表。請隨時提出任何問題，提供建議或發表評論?？偠灾灰戎_始創建漂亮，有用的可視化！
相關產品推薦：
AnyGantt-構建復雜且內容豐富的甘特圖的理想工具
AnyMap-可交互式地圖是AnyChart組件
AnyStock-基于XML/JSON的Flash金融圖表解決方案
APS幫助提升企業生產效率，真正實現生產計劃可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率
想要購買AnyChart正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：
金喜正規買球 
18次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線