Угловой датчик, также известный как круговой датчик, представляет собой тип диаграммы с радиальной шкалой. Такие визуализации могут красиво отображать значение в пределах диапазона и широко используются в различных информационных панелях.
Недавние хорошие новости о вакцинах кажутся нам музыкой. Итак, я подумал, почему бы не взять некоторые интересные музыкальные данные для визуализации в этом уроке! 63-я ежегодная церемония вручения премии «Грэмми» состоится в марте 2021 года, и когда я просмотрел список номинантов на «Рекорд года», мне стало интересно, насколько популярна каждая из этих песен. Чтобы выяснить это, я решил взглянуть на количество их стримов на Spotify, одной из ведущих в мире платформ потоковой передачи музыки, и подумал, что Solid Angular Gauge может хорошо работать при таком визуальном анализе. Он также напоминает виниловую пластинку, что делает его особенно интересным типом диаграмм для представления таких данных!
Итак, по ходу обучения я буду визуализировать количество потоков Spotify для каждой песни, номинированной на премию GRAMMY в 2021 году в диаграмме JS Angular Gauge. Это будет интересно! Все на борту!
Прежде чем мы перейдем к процессу, посмотрим, как будет выглядеть окончательная интерактивная диаграмма углового датчика JavaScript:
Навыки веб-разработки и такие технологии, как HTML и JavaScript, всегда помогают в интерактивной визуализации данных. Но на самом деле здесь даже не нужно много технических знаний и опыта. Дело в том, что создание угловых датчиков JS для веб-сайта или приложения - это не ракетостроение.
По сути, есть 4 основных шага для создания углового датчика с использованием JavaScript:
- Создайте HTML-страницу.
- Включите необходимые файлы JavaScript.
- Подключите данные.
- Напишите код JS для диаграммы.
1. Создайте базовую HTML-страницу.
Первое, что нужно сделать, это создать HTML-страницу, на которой будет отображаться визуализация углового датчика.
Мы добавляем элемент div для хранения диаграммы и предоставляем ему идентификатор для правильной ссылки на этот 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. Подготовьте и подключите данные
Шаг третий касается данных.
Я создал данные для этой визуализации вручную, сопоставив то, что я хотел, из официальных источников сайта Грэмми и приложения Spotify. Я включил название песни, имя исполнителя, количество потоков Spotify и продолжительность каждой песни.
Затем я отсортировал данные в порядке убывания в зависимости от количества потоков и добавил процентное поле. Наивысшей потоковой записи было присвоено 100%, и процент для следующих записей был вычислен по сравнению с самой высокой потоковой записью.
Наконец, я создал файл JSON, который вы можете скачать здесь.
Загрузить данные JSON в AnyChart можно с помощью Адаптера данных, дополнительного полезного скрипта, доступного через специальный модуль. Давайте сослаться на него вместе со всеми сценариями JS в <head>.
Затем мы используем метод loadJsonFile внутри тега <script> в теле нашей HTML-страницы для загрузки файла 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();
Вот и все - полнофункциональный и крутой Angular Gauge на основе JavaScript готов! Или вы можете назвать это круговым или радиальным датчиком - как вам больше нравится.
По нашему угловому датчику мы можем ясно видеть, что существует огромная разница в популярности этих треков. Песня Дуа Липы «Don’t Start Now» является самой популярной песней из списка номинантов на премию «Грэмми» 2021 года, набравшая 1,26 миллиарда прослушиваний на Spotify, за ней следует «Circles» Поста Мэлоуна с 1,24 миллиардами прослушиваний. Эти двое - безоговорочные лидеры по этому параметру. Значит ли это, что один из них победит? Хм… (Не обязательно, знаете ли.)
Песня «Colours» от Black Pumas имеет впечатляющее общее количество потоков - 36 миллионов, но в итоге она стала наименее транслируемой песней в этой группе.
Взгляните на эту начальную версию Angular Gauge с полным кодом JS / CSS / HTML на Playground или CodePen.
Настройка углового датчика JavaScript
Надежные библиотеки JavaScript для визуализации данных не только упрощают создание диаграмм, но и обеспечивают гибкость для настройки. С помощью нескольких настроек кода мы можем быстро и эффективно изменить нашу круговую графику.
Давайте посмотрим на некоторые различные функции и эстетику углового датчика.
Изменить цветовую палитру
Поскольку наши данные касаются номинаций на Грэмми, я решил использовать цвета, напоминающие позолоченные грампластинки, и ввести соответствующую палитру. Мы уже создали палитру с различными цветами, поэтому давайте просто заменим цвета по умолчанию на новые.
// Set the colors based on the designated palette
var palette = anychart.palettes
.distinctColors()
.items([
'#593d04', '#6c4304', '#966905', '#a77b0a', '#cf9f20', '#ddb22e', '#f1c84d', '#ffdc73'
]);
Посмотрите, как диаграмма выглядит более персонализированной - вот Angular Gauge, созданный с помощью JS, теперь со следующими изменениями:
Проверьте это на 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>'
);
Вы можете найти полный исходный код этого последнего Angular Gauge здесь ниже, а также изучить его и поиграть с ним на 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>
Заключение
В этом пошаговом руководстве я подробно показал вам, как создать привлекательный датчик Angular с помощью JavaScript (HTML5). Как видите, создавать интерактивные JS-диаграммы очень просто.
Вы можете опробовать другие библиотеки диаграмм JavaScript и оценить их возможности по созданию необходимых вам визуализаций данных. Или вы можете проверить различные другие параметры диаграммы, предоставляемые AnyChart. Для вдохновения посетите библиотечную галерею основных типов диаграмм. Пожалуйста, не стесняйтесь задавать мне любые вопросы или дайте мне знать, как получился ваш JS-индикатор.
Желаем вам здорового, музыкального и визуального 2021 года!
Мы в AnyChart рады поблагодарить Шачи Свадиа, опытного дизайнера данных, за создание этого замечательного руководства. Ознакомьтесь с другими учебными пособиями по построению диаграмм по JavaScript.
Первоначально опубликовано на https://www.anychart.com 3 февраля 2021 г.
