AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。
点击下载AnyChart正式版
角规，也称为圆规，是一种带有径向刻度的量规图。这样的可视化可以很好地显示一个范围内的值，并广泛用于各种仪表板中。
![ç¬è®°æ¬çµèå±å¹ä¸JavaScriptä¸çè§è§å¯æ ¹æ®Spotifyæ°æ®å¯è§åGrammys年度å±çæåææ²çæµè¡åº¦]()
疫苗的最新好消息在我们耳边听起来像是音乐。因此，我想为什么不将一些有趣的音乐数据用于本教程中的可视化！第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="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="https://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="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-circular-gauge.min.js"></script>
<script src="https://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('https://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="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-circular-gauge.min.js"></script>
<script src="https://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('https://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正版授权，或了解更多产品信息请点击【咨询在线客服】
