Если вы увлекаетесь визуализацией данных, одна из вещей, которую вам часто нужно делать, — это представлять значения переменной во времени. Или вам может понадобиться сравнить несколько наборов данных с точки зрения того, как они меняются в течение определенного периода. Здесь могут быть полезны диаграммы с областями.
Не знаете, как построить элегантную диаграмму с областями? Теперь вы освоите очень простой способ! В этом пошаговом руководстве мы будем визуализировать данные о военных бюджетах США и России за последние два десятилетия в интерактивных диаграммах с областями с использованием JavaScript. Все на борт!
Что такое диаграмма с областями?
Диаграмма с областями — это графическое представление данных, показывающее, как числовые значения одного или нескольких наборов данных изменяются относительно второй переменной, которой обычно является время.
Тип диаграммы с областями был введен Уильямом Плейфером в 1786 году, которому также приписывают изобретение линейных, столбчатых и круговых диаграмм. Он состоит из линии с нижележащей областью, заполненной цветом. Как вы понимаете, на многорядных диаграммах с областями есть несколько линий с заштрихованными областями.
Диаграмма с областями, которая будет создана
В этом уроке сначала мы построим военный бюджет Соединенных Штатов Америки с 2000 по 2020 год. Затем мы превратим эту однорядную диаграмму с областями JS в многорядную, добавив данные того же типа. для Российской Федерации.
Посмотрите, как будет выглядеть окончательная диаграмма с областями на основе JavaScript, показывающая, сколько миллиардов долларов две страны потратили на оборону за последние два десятилетия:
Как построить базовую диаграмму с областями JS
Создание интерактивной диаграммы с областями с нуля может быть пугающим и занимать много времени. Но есть довольно много полезных JavaScript-библиотек диаграмм, которые могут оказаться полезными. На самом деле, независимо от того, какой именно вы используете, весь процесс создания любой диаграммы на основе JS, включая нашу площадную диаграмму, можно разделить на четыре основных этапа:
- Создайте базовую веб-страницу в HTML.
- Добавьте необходимые файлы JavaScript.
- Загрузите данные.
- Напишите код JavaScript, чтобы нарисовать диаграмму.
Для наглядного примера в этом уроке я выбрал AnyChart. С этой библиотекой JavaScript несложно начать работу, так как имеется достаточно подробная документация и множество примеров, и она бесплатна для любого некоммерческого использования.
Хотя это и не обязательно, некоторые базовые знания HTML, CSS и JavaScript помогут быстрее понять концепции. Но не нужно беспокоиться, даже если вы новичок. Мы подробно рассмотрим каждый шаг, и к концу этого руководства вы научитесь строить диаграмму с областями JS, даже если вы новичок с ограниченным опытом программирования.
1. Создайте базовую веб-страницу в HTML
Первое, что нам нужно сделать, это создать базовую HTML-страницу для нашей диаграммы с областями. Мы даем ему название «Областная диаграмма JavaScript».
На этой странице мы добавляем блочный элемент HTML <div>. Мы даем ему уникальный атрибут id «контейнер», чтобы мы могли ссылаться на него позже в коде.
Мы также добавляем некоторые правила CSS в блок <style>, чтобы отображать нашу диаграмму на весь экран, и определяем свойства width и height как 100%, а поля и отступы как 0. Не стесняйтесь определять все это в соответствии с вашими потребностями.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Area Chart</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>
2. Добавьте необходимые файлы JavaScript
Далее нам нужно добавить файлы JavaScript библиотеки диаграмм в раздел <head>. Мы можем загрузить их локально или использовать CDN (сеть доставки контента).
Для этого урока добавим необходимые файлы скриптов из AnyChart CDN. AnyChart имеет модульную структуру, которая позволяет легко подключать только те типы диаграмм и функции, которые нам нужны в данный момент, уменьшая размер выполняемого кода JavaScript.
Например, для типа диаграммы с областями мы можем включить только один модуль Базовый.
Наш HTML теперь может выглядеть примерно так.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Area Chart</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.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>
</body>
</html>
3. Загрузите данные
Как указывалось ранее, мы визуализируем данные военного бюджета и начнем с диаграммы с областями JavaScript для Соединенных Штатов. Подходящий набор данных я нашел на Statista.
Чтобы правильно загрузить данные в нашу диаграмму, мы создаем массив, где каждый элемент массива состоит из двух элементов. Первый - год, а второй - военный бюджет США в миллиардах долларов.
Например, в 2000 году военный бюджет США составлял 320,09 млрд долларов. Итак, наш первый массив становится ["2000", 320.09].
var dataSet = [ ["2000", 320.09], ["2001", 331.81], ["2002", 378.46], ["2003", 440.53], ["2004", 493], ["2005", 533.2], ["2006", 558.34], ["2007", 589.59], ["2008", 656.76], ["2009", 705.92], ["2010", 738.01], ["2011", 752.29], ["2012", 725.21], ["2013", 679.23], ["2014", 647.79], ["2015", 633.83], ["2016", 639.86], ["2017", 646.75], ["2018", 682.49], ["2019", 731.75], ["2020", 766.58] ];
4. Напишите код JavaScript, чтобы нарисовать диаграмму
Теперь всего несколько строк кода JavaScript, чтобы наш чат работал.
Первое, что мы здесь делаем, это добавляем функцию anychart.onDocumentReady(), которая будет заключать в себе весь код JavaScript диаграммы с областями. Это гарантирует, что код не будет выполнен до полной загрузки страницы.
<script>
anychart.onDocumentReady(function () {
// The area chart's code will be written here.
});
</script>
Затем мы добавляем наши данные из шага 3.
anychart.onDocumentReady(function () {
var dataSet = [
["2000", 320.09],
["2001", 331.81],
["2002", 378.46],
["2003", 440.53],
["2004", 493],
["2005", 533.2],
["2006", 558.34],
["2007", 589.59],
["2008", 656.76],
["2009", 705.92],
["2010", 738.01],
["2011", 752.29],
["2012", 725.21],
["2013", 679.23],
["2014", 647.79],
["2015", 633.83],
["2016", 639.86],
["2017", 646.75],
["2018", 682.49],
["2019", 731.75],
["2020", 766.58]
];
});
</script>
Затем мы создаем нашу диаграмму, указав тип диаграммы как «область» и добавляем данные.
var chart = anychart.area(); chart.data(dataSet);
Наконец, мы добавляем заголовок, помещаем диаграмму в ранее определенный контейнер <div> и отображаем ее с помощью команды draw.
chart.title("Military Budget of the USA");
chart.container("container");
chart.draw();
Эврика! Наша диаграмма с областями готова.
Интерактивную версию этой простой диаграммы с областями JavaScript с полным кодом можно найти на Игровой площадке AnyChart. Не стесняйтесь играть с ним.
Для вашего удобства я разместил полный код ниже.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Area Chart</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.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 () {
// add the data as an array
var dataSet = [
["2000", 320.09],
["2001", 331.81],
["2002", 378.46],
["2003", 440.53],
["2004", 493],
["2005", 533.2],
["2006", 558.34],
["2007", 589.59],
["2008", 656.76],
["2009", 705.92],
["2010", 738.01],
["2011", 752.29],
["2012", 725.21],
["2013", 679.23],
["2014", 647.79],
["2015", 633.83],
["2016", 639.86],
["2017", 646.75],
["2018", 682.49],
["2019", 731.75],
["2020", 766.58]
];
// create an area chart
var chart= anychart.area();
// set the chart title
chart.title("Military Budget of the USA");
// set the container id for the chart
chart.container("container");
// initiate drawing the chart
chart.draw();
});
</script>
</body>
</html>
На самом деле, это всего лишь базовая версия диаграммы с областями, состоящая из одной серии. Теперь давайте добавим вторую серию.
Как создать многосерийную диаграмму с областями JS
Создание диаграммы с областями с несколькими рядами с помощью JavaScript также не представляет большой сложности. Нам потребуется всего три простых шага, чтобы превратить нашу диаграмму с областями с одной серией в диаграмму с несколькими рядами.
А. Добавьте данные
Во-первых, давайте добавим в наш массив данные о военном бюджете России. Опять же, мы используем набор данных из Statista. Теперь каждая строка будет состоять из трех элементов: год, значение для США и значение для России.
Например, в 2000 году военные бюджеты США и России составляли соответственно 320,09 и 9,23 млрд долларов. Итак, наш первый массив становится ["2000", 320.09, 9.23].
var dataSet = [ ["2000", 320.09, 9.23], ["2001", 331.81, 11.68], ["2002", 378.46, 13.94], ["2003", 440.53, 16.97], ["2004", 493, 20.96], ["2005", 533.2, 27.34], ["2006", 558.34, 34.52], ["2007", 589.59, 43.53], ["2008", 656.76, 56.18], ["2009", 705.92, 51.53], ["2010", 738.01, 58.72], ["2011", 752.29, 70.24], ["2012", 725.21, 81.47], ["2013", 679.23, 88.35], ["2014", 647.79, 84.7], ["2015", 633.83, 66.42], ["2016", 639.86, 69.25], ["2017", 646.75, 66.53], ["2018", 682.49, 61.39], ["2019", 731.75, 65.1], ["2020", 766.58, 61.71] ];
B. Сопоставьте данные
Во-вторых, давайте воспользуемся удобной функцией AnyChart Наборы данных: мы создадим набор данных из данных, а затем сопоставим его для каждой серии:
var chart = anychart.area();
var seriesData_1 = budgetData.mapAs({ x: 0, value: 1 });
var seriesData_2 = budgetData.mapAs({ x: 0, value: 2 });
C. Настройте серию
Наконец, мы создаем серии с сопоставленными данными, а также даем им имена.
var series1= chart.area(seriesData_1);
series1.name("USA");
var series2= chart.area(seriesData_2);
series2.name("Russia");
Вот и все, классная многорядная диаграмма с областями на основе JavaScript готова, предоставляя представление военного бюджета США и России в динамике на одном и том же графике.
Исследуйте его полный код на Игровой площадке AnyChart.
Наша диаграмма с областями уже выглядит хорошо. Но иногда хорошего недостаточно. И бывают случаи, когда вам может понадобиться настроить функциональность и внешний вид диаграммы. Итак, теперь давайте сделаем больше и посмотрим, как можно настроить такие графики, чтобы они выглядели еще лучше.
Как настроить диаграмму с областями JavaScript
К счастью, диаграммы JavaScript на базе AnyChart можно легко изменить в соответствии с вашими потребностями и предпочтениями.
Я покажу вам, как сделать несколько быстрых настроек, чтобы улучшить нашу диаграмму: точно настроить X-шкалу, добавить перекрестие, изменить цвет областей, добавить легенду и названия осей, а также настроить режим наведения.
Точная настройка X-шкалы
Будет здорово начать с одной быстрой корректировки — избавиться от пробелов справа и слева от области. Мы просто устанавливаем «непрерывный» режим для X-шкалы.
chart.xScale().mode('continuous');
Добавить перекрестие
Перекрестие помогает быстро понять значения X и Y наведенной точки данных. В нашем случае оставим только вертикальную линию перекрестия.
var crosshair = chart.crosshair();
crosshair.enabled(true)
.yStroke(null)
.xStroke('#fff');
crosshair.yLabel().enabled(false);
Всего несколько строк JS-кода, и вот перекрестие, которое делает диаграмму с областями более эстетичной.
Изменить цвет областей
Согласно одному исследованию, которое я помню, каждые четыре человека в группе из десяти человек считают синий своим любимым цветом. Но это не значит, что мы собираемся оставить цвет нашей диаграммы как есть, который по умолчанию синий.
Раскрасим серию США в красный цвет, а Россию в коричневый.
series1.fill("#AC2132", 0.7);
.stroke("#AC2132", 1);
series2.fill("#DEC081", 0.7)
.stroke("#DEC081", 1);
Здесь мы добавили методы fill и stroke для изменения цветов нашей диаграммы с областями. Существует также множество других настроек внешнего вида, которые можно применять к различным состояниям вашей визуализации.
Интерактивная версия этой диаграммы с областями доступна на AnyChart Playground. Смело меняйте цвета и смотрите: "Бабочка, бабочка, какой цвет тебе нравится?"
Добавьте легенду и названия осей
Мы можем добавить легенду для нашей диаграммы с областями JavaScript с помощью одной строки кода.
chart.legend(true);Точно так же мы можем легко присвоить осям названия. На нашей диаграмме по оси X отложены годы, а по оси Y – цифры военного бюджета в миллиардах долларов.
chart.xAxis().title("Year");
chart.yAxis().title("Billions of USD");
Вот как теперь выглядит наша диаграмма с областями на JS, с легендой и заголовками осей.
Настроить режим наведения
В настоящее время, когда мы наводим курсор на диаграмму, точки данных обоих рядов за соответствующий год выделяются маркером. Но что, если мы хотим разделить их?
Давайте включим «одиночный» режим наведения, и тогда, когда вы наводите курсор на область, будут отображаться только маркеры этой конкретной серии.
chart.interactivity().hoverMode("single");
Пока мы находимся в режиме «одиночного» наведения, прицел не имеет особого смысла. Итак, для настройки режима наведения мы можем либо удалить, либо закомментировать код, который мы написали в разделе «Добавить перекрестие» этого руководства.
Ознакомьтесь с полным кодом этой окончательной интерактивной диаграммы с областями JavaScript ниже, а также на Игровой площадке AnyChart. Не стесняйтесь экспериментировать с ним.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Area Chart</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-cartesian.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 () {
// add the data as an array
var dataSet = [
["2000", 320.09, 9.23],
["2001", 331.81, 11.68],
["2002", 378.46, 13.94],
["2003", 440.53, 16.97],
["2004", 493, 20.96],
["2005", 533.2, 27.34],
["2006", 558.34, 34.52],
["2007", 589.59, 43.53],
["2008", 656.76, 56.18],
["2009", 705.92, 51.53],
["2010", 738.01, 58.72],
["2011", 752.29, 70.24],
["2012", 725.21, 81.47],
["2013", 679.23, 88.35],
["2014", 647.79, 84.7],
["2015", 633.83, 66.42],
["2016", 639.86, 69.25],
["2017", 646.75, 66.53],
["2018", 682.49, 61.39],
["2019", 731.75, 65.1],
["2020", 766.58, 61.71]
];
// create an area chart
var chart= anychart.area();
// create a dataset for mapping
var budgetData = anychart.data.set(dataSet);
// map the data
var seriesData_1 = budgetData.mapAs({ x: 0, value: 1 });
var seriesData_2 = budgetData.mapAs({ x: 0, value: 2 });
// create the first series, set the data and name
var series1= chart.area(seriesData_1);
series1.name("USA");
// create the second series, set the data and name
var series2= chart.area(seriesData_2);
series2.name("Russia");
// set the chart title
chart.title("Military Budget of the USA and Russia");
// add and configure the crosshair
// var crosshair = chart.crosshair();
// crosshair.enabled(true)
// .yStroke(null)
// .xStroke('#fff');
// crosshair.yLabel().enabled(false);
// configure the visual settings of the first series
series1.fill("#AC2132", 0.7);
.stroke("#AC2132", 1);
// configure the visual settings of the second series
series2.fill("#DEC081", 0.7)
.stroke("#DEC081", 1);
// add the legend
chart.legend(true);
// set the titles of the axes
chart.xAxis().title("Year");
chart.yAxis().title("Billions of US $");
// set the hover mode as single
chart.interactivity().hoverMode("single");
// set the container id for the chart
chart.container("container");
// initiate drawing the chart
chart.draw();
});
</script>
</body>
</html>
Заключение
Потрясающий! Мы построили нашу диаграмму с областями JavaScript. И процесс был простым, не так ли? Идите вперед и создайте собственную визуализацию диаграммы с областями на основе JS.
Пожалуйста, не стесняйтесь просматривать документацию по диаграммам с областями, и есть множество других типов диаграмм, которые вы, возможно, захотите проверить.
Наконец, не стесняйтесь задавать мне любые вопросы или оставлять предложения. Не терпится увидеть диаграмму с областями JavaScript, которую вы построите.
Публикуется с разрешения Авана Шресты. Первоначально появился на Level Up Coding под заголовком Построение площадных диаграмм с помощью JavaScript 10 мая 2022 г.
Вы также можете ознакомиться с нашим собственным базовым курсом JavaScript Учебное пособие по диаграммам с областями.
Подробнее см. Руководство по построению диаграмм JavaScript.
Дайте нам знать, если вы хотите написать отличный гостевой пост.
Первоначально опубликовано на https://www.anychart.com 12 мая 2022 г.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
