AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數(shù)據(jù)分析、統(tǒng)計學、金融等領域。
點擊下載AnyChart正式版
角規(guī)，也稱為圓規(guī)，是一種帶有徑向刻度的量規(guī)圖。這樣的可視化可以很好地顯示一個范圍內(nèi)的值，并廣泛用于各種儀表板中。
疫苗的最新好消息在我們耳邊聽起來像是音樂。因此，我想為什么不將一些有趣的音樂數(shù)據(jù)用于本教程中的可視化！第63屆年度格萊美獎頒獎典禮將于2021年3月舉行，當我瀏覽年度唱片提名人名單時，我想知道這些歌曲的流行程度。為了找出答案，我決定在世界領先的音樂流媒體平臺之一Spotify上查看其流媒體的數(shù)量，并認為Solid Angular Gauge在這種視覺分析中可以很好地工作。它也類似于黑膠唱片，這使得它成為表示此類數(shù)據(jù)時特別有趣的圖表類型！
因此，在本教程中，我將在 JS Angular Gauge圖表中可視化Spotify流計數(shù)的每一首2021 GRAMMYs年度提名歌曲。那將很有趣！
擾流板：待開發(fā)的角規(guī)
在開始該過程之前，請查看最終的交互式JavaScript角度規(guī)圖表的外觀：
如何通過4個基本步驟構(gòu)建JS角規(guī)
Web開發(fā)技能以及HTML和JavaScript等技術始終對交互式數(shù)據(jù)可視化很有幫助。但是實際上，您甚至不需要太多的技術知識和經(jīng)驗。事實是，為網(wǎng)站或應用程序創(chuàng)建JS角規(guī)不是火箭科學。
基本上，有4個基本步驟可使用JavaScript構(gòu)建角度規(guī)：
-
創(chuàng)建一個HTML頁面。
-
包括必要的JavaScript文件。
-
連接數(shù)據(jù)。
-
編寫圖表的JS代碼。
1.創(chuàng)建一個基本的HTML頁面
首先要做的是制作一個HTML頁面，在該頁面中將呈現(xiàn)角度儀表可視化。
我們添加了一個div元素來保存圖表，并為其提供一個ID，以在以后正確引用div。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Angular Gauge</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>
在此，div塊元素的寬度和高度為100％，以使量規(guī)圖表全屏顯示。但是，當然可以根據(jù)您的要求進行定制。
2.包含必要的JavaScript文件
第二步是在<head>部分中引用要使用的必要腳本。
某些 JavaScript圖表庫可以非常輕松地創(chuàng)建令人驚嘆的圖形和圖表，以可視化方式顯示數(shù)據(jù)，而沒有太多困難。在本教程中，我使用的是AnyChart，它是一個輕量級，靈活且易于使用的JavaScript圖表庫。它支持開箱即用的角度規(guī)，并具有豐富的文檔資料。另外，AnyChart JS提供了一個很酷的 代碼場來測試事物。
因此，讓我們包括該庫的CDN中的必要文件 。要創(chuàng)建角規(guī)，我們需要添加所有類型的圖表所需的 核心模塊和角規(guī)的 特定模塊。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Venn Diagram</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-circular-gauge.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>
// All the code for the angular gauge chart will come here
</script>
</body>
</html>
3.準備并連接數(shù)據(jù)
第三步是關于數(shù)據(jù)。
我通過整理我從Grammys網(wǎng)站和 Spotify應用程序的官方來源獲得的信息來手動創(chuàng)建了該可視化數(shù)據(jù)。我包括了歌曲名稱，藝術家名稱，Spotify流數(shù)和每首歌曲的持續(xù)時間。
然后，我根據(jù)流的數(shù)量對數(shù)據(jù)進行降序排序，并添加了一個百分比字段。給定最高流記錄的100％，然后計算與最高流記錄相比的以下記錄的百分比。
最后，我創(chuàng)建了一個JSON文件，您可以在此處下載。
可以在數(shù)據(jù)適配器（通過專用模塊提供的其他有用腳本）的幫助下將JSON數(shù)據(jù)加載到AnyChart中。讓我們將其與中的所有JS腳本一起引用 <head>。
接下來，我們使用HTML頁面正文中標記loadJsonFile內(nèi)的方法<script>來加載JSON文件。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Angular Gauge</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-circular-gauge.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.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('{JSON data file location here}', function (data) {
// The angular gauge's JS code will come here
});
</script>
</body>
</html>
現(xiàn)在，我們已經(jīng)完成了所有初步步驟，讓我們興奮起來，開始添加代碼以在基于JS的交互式角度規(guī)中可視化數(shù)據(jù)！
4.添加量規(guī)的JS代碼
要構(gòu)建任何JS圖表或計量器，必須添加一個包含所有代碼的函數(shù)，這將確保其中的整個代碼僅在頁面準備好后才能執(zhí)行。
我們現(xiàn)在創(chuàng)建的立體角規(guī)的構(gòu)建要比其他圖表類型（如條形圖，餅圖或面積 圖）稍微復雜一些 。但是，請放心，因為所有代碼都已注釋，并且我還將通過代碼片段指導您。如果仍然感到困惑，只需按照以下步驟進行操作，您就可以立即制作出精美的圖表。在帖子評論中提問。
首先，我們提取徑向條所需的數(shù)據(jù)值，創(chuàng)建角度規(guī)，然后將提取的數(shù)據(jù)傳遞到圖表。
<script>
anychart.onDocumentReady(function () {
anychart.data.loadJsonFile('//gist.githubusercontent.com/shacheeswadia/9e4598a73bb86180f1726daf9de8062f/raw/b258e93e1f9db37da6847eb05a230afcb64446d5/circularGaugeData.json', function (data) {
// Get the names of the records
var recordNames = data.map(function(d){
return d.Record;
});
// Get the percent values
var recordPercentValue = data.map(function(d){
return d.percent;
});
// Add the 100% value to signify the max value for each of the radial ring
recordPercentValue.push(100);
// Set the data to indicate the percent values
var dataSet = anychart.data.set(recordPercentValue);
// Create the angular gauge
var gauge = anychart.gauges.circular();
// Set the data for the angular gauge
gauge.data(dataSet);
});
});
</script>
我希望每個數(shù)據(jù)點都有不同的顏色。因此，讓我們建立一個調(diào)色板。最初，我們可以使用AnyChart JavaScript圖表庫的默認顏色。
接下來，我們指定量規(guī)的屬性并創(chuàng)建軸。我不想顯示軸標簽和刻度，所以讓我們隱藏它們。
// Set the colors based on the default palette
var palette = anychart.palettes
.distinctColors()
.items([
'#64b5f6', '#1976d2', '#ef6c00', '#ffd54f', '#455a64', '#dd2c00', '#00838f', '#00bfa5', '#96a6a6', '#ffa000'
]);
// Specify the attributes of the angular gauge chart
gauge
.fill('#fff')
.stroke(null)
.padding(25, 100, 25, 100)
.margin(0)
.startAngle(0)
.sweepAngle(270);
// Create the angular gauge axis
var axis = gauge.axis().radius(100).width(1).fill(null);
// Set the minimum and maximum values for the axis
axis
.scale()
.minimum(0)
.maximum(100);
// Hide the axis labels and ticks
axis.labels().enabled(false);
axis.ticks().enabled(false);
axis.minorTicks().enabled(false);
現(xiàn)在是創(chuàng)建角規(guī)徑向條的主要部分。我們創(chuàng)建一個函數(shù)，該函數(shù)接受規(guī)格，每個徑向鋼筋的索引以及半徑以及徑向鋼筋的寬度作為參數(shù)。然后，我們根據(jù)數(shù)據(jù)點以及每個點的背景徑向條構(gòu)建每個條。
接下來，我們設置標簽并將它們對齊以對應于每個徑向鋼筋。函數(shù)中的最后一件事是為每個數(shù)據(jù)點返回一個量規(guī)。
// Create a function to make radial bars for each data point
var makeBarWithBar = function (gauge, radius, i, width) {
// Create the radial bars based on the data
gauge
.bar(i)
.dataIndex(i)
.radius(radius)
.width(width)
.fill(palette.itemAt(i))
.stroke(null)
.zIndex(5);
// Create the background radial bars indicating the total value
gauge
.bar(i + 100)
.dataIndex(8)
.radius(radius)
.width(width)
.fill('#F5F4F4')
.stroke(null)
.zIndex(4);
// Set the labels based on each data point
gauge
.label(i)
.text(recordNames[i]);
// Align the labels
gauge
.label(i)
.hAlign('center')
.vAlign('middle')
.anchor('right-center')
.padding(0, 10)
.height(width / 2 + '%')
.offsetY(radius + '%')
.offsetX(0);
return gauge.bar(i);
};
現(xiàn)在已經(jīng)創(chuàng)建了函數(shù)，我們?yōu)槲覀儞碛械拿總€數(shù)據(jù)點調(diào)用函數(shù)。總共有8個數(shù)據(jù)點。因此，我們將函數(shù)調(diào)用了8次。半徑值是100除以數(shù)據(jù)點的數(shù)量，我將每個條的寬度保持為11。
// Call the function to create the radial bars with specifications
makeBarWithBar(gauge, 100, 0, 11);
makeBarWithBar(gauge, 87.5, 1, 11);
makeBarWithBar(gauge, 75, 2, 11);
makeBarWithBar(gauge, 62.5, 3, 11);
makeBarWithBar(gauge, 50, 4, 11);
makeBarWithBar(gauge, 37.5, 5, 11);
makeBarWithBar(gauge, 25, 6, 11);
makeBarWithBar(gauge, 12.5, 7, 11);
然后，我們向圖表添加標題。最后，我們參考div容器并繪制角度規(guī)。
// Add the angular gauge chart title
gauge.title('Comparing Popularity of 2021 GRAMMYs Record of the Year Nominations on Spotify');
// Drawing the resulting angular gauge
gauge.container('container');
gauge.draw();
到位了-功能齊全且功能強大且基于JavaScript的Angular Gauge已準備就緒！或者，您可以根據(jù)需要將其稱為圓規(guī)或徑向規(guī)。
從角度計中我們可以清楚地看到，這些音軌的流行程度有很大的不同。Dua Lipa的“ Do n't Start Now”是2021年度格萊美唱片年度提名名單中最受歡迎的歌曲，在Spotify上的流媒體數(shù)量高達12.6億，緊隨其后的是Post Malone的“ Circles”，流媒體數(shù)量為12.4億。通過此參數(shù)，這兩個是絕對的領導者。這是否意味著其中之一將獲勝？
Black Pumas的歌曲“ Colors”確實有3600萬個流，但最終成為該組中流最少的歌曲。
看看Angular Gauge的初始版本，以及Playground或 CodePen上的完整JS / CSS / HTML代碼 。
JavaScript角度規(guī)定制
用于數(shù)據(jù)可視化的強大JavaScript庫不僅簡化了圖表創(chuàng)建，而且還提供了進行自定義的靈活性。通過一些代碼調(diào)整，我們可以對圓形圖形進行快速有效的更改。
讓我們看一下角度規(guī)的一些不同功能和美觀性。
更改調(diào)色板
由于我們的數(shù)據(jù)是關于格萊美提名的，因此我決定使用類似于鍍金留聲機獎杯的顏色，并介紹相應的調(diào)色板。我們已經(jīng)創(chuàng)建了具有不同顏色的調(diào)色板，因此讓我們用新顏色替換默認顏色。
// Set the colors based on the designated palette
var palette = anychart.palettes
.distinctColors()
.items([
'#593d04', '#6c4304', '#966905', '#a77b0a', '#cf9f20', '#ddb22e', '#f1c84d', '#ffdc73'
]);
看到圖表看起來更具個性化-這是使用JS構(gòu)建的Angular Gauge，現(xiàn)在進行了以下修改：
在Playground或CodePen上簽出。
設置自定義欄大小
現(xiàn)在，讓我們對徑向條進行一些實驗，并將更多信息添加到當前圖表中。
例如，我們可以使每個條形的寬度代表歌曲的持續(xù)時間。
為此，我們需要從數(shù)據(jù)中提取每首歌曲的持續(xù)時間，然后創(chuàng)建一個循環(huán)，使每個小節(jié)的寬度與該數(shù)據(jù)點的持續(xù)時間相對應。
// Get the time of each song
var recordLength = data.map(function(d){
return d['Time'];
});
// Call the function to create the radial bars with specifications
for(var i=0, j=100; i<data.length, j>=12.5; i++, j-=12.5){
makeBarWithBar(gauge, j, i, (recordLength[i]* 2.75));
}
您可以在Playground或CodePen上找到帶有完整代碼的此版本。
最終，我沒有發(fā)現(xiàn)它很有見地，而是恢復為每個小節(jié)都固定寬度的版本。我確實保留了循環(huán)，因為這樣可以減少代碼量，并且是重復調(diào)用函數(shù)的更好方法。
改進角度規(guī)工具提示的設計和其他格式
我們制作的JavaScript角度規(guī)已經(jīng)看起來很棒。我們可能需要的只是一些最后的修飾。
讓我們設計一個美觀且有用的工具提示。
首先，請注意此處的更改：
// Add the 100% value to signify the max value for each of the radial ring
var initialLength = recordPercentValue.length;
recordPercentValue.length *= 2;
recordPercentValue.fill(100, initialLength);
...
// Create the background radial bars indicating the total value
gauge
.bar(i + 100)
.dataIndex(initialLength + I)
.radius(radius)
.width(width)
.fill('#F5F4F4')
.stroke(null)
.zIndex(4);
我們添加以下部分：
// Angular gauge tooltip
gauge.tooltip().useHtml(true);
// Format the information of the tooltip
gauge
.tooltip()
.format(function(){
var index = this.index;
if (index >= initialLength)
index -= initialLength;
return "<div style='font-size:15px; font-weight:400; margin: 0.2rem 0; color: #1db954; padding:0.15rem'>Record: <span style='color:#fff;'>" + data[index]['Record'] + "</span></div><div style='font-size:15px; font-weight:400; margin: 0.2rem 0; color: #1db954; padding:0.15rem'>Artist: <span style='color:#fff;'>" + data[index]['Artist'] + "</span></div><div style='font-size:15px; font-weight:400; margin: 0.2rem 0; color: #1db954; padding:0.15rem'>Number of Spotify Streams: <span style='color:#fff;'>" + Intl.NumberFormat().format(data[index]['StreamsSpotify']) + "</span></div><div style='font-size:15px; font-weight:400; margin: 0.2rem 0; color: #1db954; padding:0.15rem'>Comparitive Popularity: <span style='color:#fff;'>" + data[index]['percent'] + "%</span></div>";
});
最后，使用較大的字體美化標題并應用一些顏色更改以突出顯示我們所顯示的內(nèi)容應該很棒：
// Add the angular gauge chart title
gauge
.title()
.useHtml(true)
.text(
'<span style = "color: #4c2b04; font-size:20px;">Comparing Popularity of 2021 GRAMMYs Record of the Year Nominations</span>' +
'<br/><span style="color:#1db954; font-size: 18px;">(Based on the number of Spotify Streams)</span>'
);
您可以在下面找到此最終角規(guī)的完整源代碼，并在Playground或CodePen上進行研究和使用。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Angular Gauge</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-circular-gauge.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.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.onDocumentReady(function () {
anychart.data.loadJsonFile('//gist.githubusercontent.com/shacheeswadia/9e4598a73bb86180f1726daf9de8062f/raw/b258e93e1f9db37da6847eb05a230afcb64446d5/circularGaugeData.json', function (data) {
// Get the names of the records
var recordNames = data.map(function(d){
return d.Record;
});
// Get the percent values
var recordPercentValue = data.map(function(d){
return d.percent;
});
// Add the 100% value to signify the max value for each of the radial ring
var initialLength = recordPercentValue.length;
recordPercentValue.length *= 2;
recordPercentValue.fill(100, initialLength);
// Set the data to indicate the percent values
var dataSet = anychart.data.set(recordPercentValue);
// Create the angular gauge
var gauge = anychart.gauges.circular();
// Set the data for the angular gauge
gauge.data(dataSet);
// Set the colors based on the designated palette
var palette = anychart.palettes
.distinctColors()
.items([
'#593d04', '#6c4304', '#966905', '#a77b0a', '#cf9f20', '#ddb22e', '#f1c84d', '#ffdc73'
]);
// Specify the attributes of the angular gauge chart
gauge
.fill('#fff')
.stroke(null)
.padding(25, 100, 25, 100)
.margin(0)
.startAngle(0)
.sweepAngle(270);
// Create the angular gauge axis
var axis = gauge.axis().radius(100).width(1).fill(null);
// Set the minimum and maximum values for the axis
axis
.scale()
.minimum(0)
.maximum(100);
// Hide the axis labels and ticks
axis.labels().enabled(false);
axis.ticks().enabled(false);
axis.minorTicks().enabled(false);
// Create a function to make radial bars for each data point
var makeBarWithBar = function (gauge, radius, i, width) {
// Create the radial bars based on the data
gauge
.bar(i)
.dataIndex(i)
.radius(radius)
.width(width)
.fill(palette.itemAt(i))
.stroke(null)
.zIndex(5);
// Create the background radial bars indicating the total value
gauge
.bar(i + 100)
.dataIndex(initialLength + i)
.radius(radius)
.width(width)
.fill('#F5F4F4')
.stroke(null)
.zIndex(4);
// Set the labels based on each data point
gauge
.label(i)
.text(recordNames[i]);
// Align the labels
gauge
.label(i)
.hAlign('center')
.vAlign('middle')
.anchor('right-center')
.padding(0, 10)
.height(width / 2 + '%')
.offsetY(radius + '%')
.offsetX(0);
return gauge.bar(i);
};
// Angular gauge tooltip
gauge.tooltip().useHtml(true);
// Format the information of the tooltip
gauge
.tooltip()
.format(function(){
var index = this.index;
if (index >= initialLength)
index -= initialLength;
return "<div style='font-size:15px; font-weight:400; margin: 0.2rem 0; color: #1db954; padding:0.15rem'>Record: <span style='color:#fff;'>" + data[index]['Record'] + "</span></div><div style='font-size:15px; font-weight:400; margin: 0.2rem 0; color: #1db954; padding:0.15rem'>Artist: <span style='color:#fff;'>" + data[index]['Artist'] + "</span></div><div style='font-size:15px; font-weight:400; margin: 0.2rem 0; color: #1db954; padding:0.15rem'>Number of Spotify Streams: <span style='color:#fff;'>" + Intl.NumberFormat().format(data[index]['StreamsSpotify']) + "</span></div><div style='font-size:15px; font-weight:400; margin: 0.2rem 0; color: #1db954; padding:0.15rem'>Comparitive Popularity: <span style='color:#fff;'>" + data[index]['percent'] + "%</span></div>";
});
// Call the function to create the radial bars with specifications
for(var i=0, j=100; i<data.length, j>=12.5; i++, j-=12.5){
makeBarWithBar(gauge, j, i, 12);
}
// Add the angular gauge chart title
gauge
.title()
.useHtml(true)
.text(
'<span style = "color: #4c2b04; font-size:20px;">Comparing Popularity of 2021 GRAMMYs Record of the Year Nominations</span>' +
'<br/><span style="color:#1db954; font-size: 18px;">(Based on the number of Spotify Streams)</span>'
);
gauge
.title()
.enabled(true)
.hAlign('center')
.padding(0)
.margin([0, 0, 10, 0]);
// Drawing the resulting angular gauge
gauge.container('container');
gauge.draw();
});
});
</script>
</body>
</html>
結(jié)論
在本分步教程中，我向您詳細介紹了如何使用JavaScript（HTML5）創(chuàng)建引人注目的Angular Gauge。如您所見，創(chuàng)建交互式JS圖表很容易。
您可以嘗試其他JavaScript圖表庫，并評估它們在創(chuàng)建所需數(shù)據(jù)可視化中的功能。或者，您可以查看AnyChart提供的其他各種圖表選項。為了獲得啟發(fā)，您可能希望訪問圖書館的庫以獲取基本圖表類型。 請隨時問我任何問題，或讓我知道您的JS量規(guī)的結(jié)果。
相關產(chǎn)品推薦：
AnyGantt-構(gòu)建復雜且內(nèi)容豐富的甘特圖的理想工具
AnyMap-可交互式地圖是AnyChart組件
AnyStock-基于XML/JSON的Flash金融圖表解決方案
APS幫助提升企業(yè)生產(chǎn)效率，真正實現(xiàn)生產(chǎn)計劃可視化呈現(xiàn)與控制,快速有效響應不同場景的生產(chǎn)計劃，提高準時交貨能力，提高產(chǎn)能和資源利用率
想要購買AnyChart正版授權(quán)，或了解更多產(chǎn)品信息請點擊
標簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務必注明出處、不得修改原文相關鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自：
金喜正規(guī)買球 
18次
相關產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買球相關的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線