AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。
點擊下載AnyChart正式版
角規，也稱為圓規，是一種帶有徑向刻度的量規圖。這樣的可視化可以很好地顯示一個范圍內的值，并廣泛用于各種儀表板中。
疫苗的最新好消息在我們耳邊聽起來像是音樂。因此，我想為什么不將一些有趣的音樂數據用于本教程中的可視化！第63屆年度格萊美獎頒獎典禮將于2021年3月舉行，當我瀏覽年度唱片提名人名單時，我想知道這些歌曲的流行程度。為了找出答案，我決定在世界領先的音樂流媒體平臺之一Spotify上查看其流媒體的數量，并認為Solid Angular Gauge在這種視覺分析中可以很好地工作。它也類似于黑膠唱片，這使得它成為表示此類數據時特別有趣的圖表類型！
因此，在本教程中，我將在 JS Angular Gauge圖表中可視化Spotify流計數的每一首2021 GRAMMYs年度提名歌曲。那將很有趣！
擾流板：待開發的角規
在開始該過程之前，請查看最終的交互式JavaScript角度規圖表的外觀：
如何通過4個基本步驟構建JS角規
Web開發技能以及HTML和JavaScript等技術始終對交互式數據可視化很有幫助。但是實際上，您甚至不需要太多的技術知識和經驗。事實是，為網站或應用程序創建JS角規不是火箭科學。
基本上，有4個基本步驟可使用JavaScript構建角度規：
-
創建一個HTML頁面。
-
包括必要的JavaScript文件。
-
連接數據。
-
編寫圖表的JS代碼。
1.創建一個基本的HTML頁面
首先要做的是制作一個HTML頁面，在該頁面中將呈現角度儀表可視化。
我們添加了一個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％，以使量規圖表全屏顯示。但是，當然可以根據您的要求進行定制。
2.包含必要的JavaScript文件
第二步是在<head>部分中引用要使用的必要腳本。
某些 JavaScript圖表庫可以非常輕松地創建令人驚嘆的圖形和圖表，以可視化方式顯示數據，而沒有太多困難。在本教程中，我使用的是AnyChart，它是一個輕量級，靈活且易于使用的JavaScript圖表庫。它支持開箱即用的角度規，并具有豐富的文檔資料。另外，AnyChart JS提供了一個很酷的 代碼場來測試事物。
因此，讓我們包括該庫的CDN中的必要文件 。要創建角規，我們需要添加所有類型的圖表所需的 核心模塊和角規的 特定模塊。
<!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.準備并連接數據
第三步是關于數據。
我通過整理我從Grammys網站和 Spotify應用程序的官方來源獲得的信息來手動創建了該可視化數據。我包括了歌曲名稱，藝術家名稱，Spotify流數和每首歌曲的持續時間。
然后，我根據流的數量對數據進行降序排序，并添加了一個百分比字段。給定最高流記錄的100％，然后計算與最高流記錄相比的以下記錄的百分比。
最后，我創建了一個JSON文件，您可以在此處下載。
可以在數據適配器（通過專用模塊提供的其他有用腳本）的幫助下將JSON數據加載到AnyChart中。讓我們將其與中的所有JS腳本一起引用 <head>。
接下來，我們使用HTML頁面正文中標記loadJsonFile內的方法<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>
現在，我們已經完成了所有初步步驟，讓我們興奮起來，開始添加代碼以在基于JS的交互式角度規中可視化數據！
4.添加量規的JS代碼
要構建任何JS圖表或計量器，必須添加一個包含所有代碼的函數，這將確保其中的整個代碼僅在頁面準備好后才能執行。
我們現在創建的立體角規的構建要比其他圖表類型（如條形圖，餅圖或面積 圖）稍微復雜一些 。但是，請放心，因為所有代碼都已注釋，并且我還將通過代碼片段指導您。如果仍然感到困惑，只需按照以下步驟進行操作，您就可以立即制作出精美的圖表。在帖子評論中提問。
首先，我們提取徑向條所需的數據值，創建角度規，然后將提取的數據傳遞到圖表。
<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>
我希望每個數據點都有不同的顏色。因此，讓我們建立一個調色板。最初，我們可以使用AnyChart JavaScript圖表庫的默認顏色。
接下來，我們指定量規的屬性并創建軸。我不想顯示軸標簽和刻度，所以讓我們隱藏它們。
// 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);
現在是創建角規徑向條的主要部分。我們創建一個函數，該函數接受規格，每個徑向鋼筋的索引以及半徑以及徑向鋼筋的寬度作為參數。然后，我們根據數據點以及每個點的背景徑向條構建每個條。
接下來，我們設置標簽并將它們對齊以對應于每個徑向鋼筋。函數中的最后一件事是為每個數據點返回一個量規。
// 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);
};
現在已經創建了函數，我們為我們擁有的每個數據點調用函數。總共有8個數據點。因此，我們將函數調用了8次。半徑值是100除以數據點的數量，我將每個條的寬度保持為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容器并繪制角度規。
// 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已準備就緒！或者，您可以根據需要將其稱為圓規或徑向規。
從角度計中我們可以清楚地看到，這些音軌的流行程度有很大的不同。Dua Lipa的“ Do n't Start Now”是2021年度格萊美唱片年度提名名單中最受歡迎的歌曲，在Spotify上的流媒體數量高達12.6億，緊隨其后的是Post Malone的“ Circles”，流媒體數量為12.4億。通過此參數，這兩個是絕對的領導者。這是否意味著其中之一將獲勝？
Black Pumas的歌曲“ Colors”確實有3600萬個流，但最終成為該組中流最少的歌曲。
看看Angular Gauge的初始版本，以及Playground或 CodePen上的完整JS / CSS / HTML代碼 。
JavaScript角度規定制
用于數據可視化的強大JavaScript庫不僅簡化了圖表創建，而且還提供了進行自定義的靈活性。通過一些代碼調整，我們可以對圓形圖形進行快速有效的更改。
讓我們看一下角度規的一些不同功能和美觀性。
更改調色板
由于我們的數據是關于格萊美提名的，因此我決定使用類似于鍍金留聲機獎杯的顏色，并介紹相應的調色板。我們已經創建了具有不同顏色的調色板，因此讓我們用新顏色替換默認顏色。
// Set the colors based on the designated palette
var palette = anychart.palettes
.distinctColors()
.items([
'#593d04', '#6c4304', '#966905', '#a77b0a', '#cf9f20', '#ddb22e', '#f1c84d', '#ffdc73'
]);
看到圖表看起來更具個性化-這是使用JS構建的Angular Gauge，現在進行了以下修改：
在Playground或CodePen上簽出。
設置自定義欄大小
現在，讓我們對徑向條進行一些實驗，并將更多信息添加到當前圖表中。
例如，我們可以使每個條形的寬度代表歌曲的持續時間。
為此，我們需要從數據中提取每首歌曲的持續時間，然后創建一個循環，使每個小節的寬度與該數據點的持續時間相對應。
// 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上找到帶有完整代碼的此版本。
最終，我沒有發現它很有見地，而是恢復為每個小節都固定寬度的版本。我確實保留了循環，因為這樣可以減少代碼量，并且是重復調用函數的更好方法。
改進角度規工具提示的設計和其他格式
我們制作的JavaScript角度規已經看起來很棒。我們可能需要的只是一些最后的修飾。
讓我們設計一個美觀且有用的工具提示。
首先，請注意此處的更改：
// 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>";
});
最后，使用較大的字體美化標題并應用一些顏色更改以突出顯示我們所顯示的內容應該很棒：
// 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>'
);
您可以在下面找到此最終角規的完整源代碼，并在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>
結論
在本分步教程中，我向您詳細介紹了如何使用JavaScript（HTML5）創建引人注目的Angular Gauge。如您所見，創建交互式JS圖表很容易。
您可以嘗試其他JavaScript圖表庫，并評估它們在創建所需數據可視化中的功能?；蛘?，您可以查看AnyChart提供的其他各種圖表選項。為了獲得啟發，您可能希望訪問圖書館的庫以獲取基本圖表類型。 請隨時問我任何問題，或讓我知道您的JS量規的結果。
相關產品推薦：
AnyGantt-構建復雜且內容豐富的甘特圖的理想工具
AnyMap-可交互式地圖是AnyChart組件
AnyStock-基于XML/JSON的Flash金融圖表解決方案
APS幫助提升企業生產效率，真正實現生產計劃可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率
想要購買AnyChart正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
21次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線