Создание столбцов и гистограмм JavaScript для данных о COVID-19

Нужны привлекательные JS-диаграммы для вашего веб-сайта или приложения? Начни с основ! Изучите это краткое руководство по визуализации данных, и вы узнаете, как легко создавать столбцы и гистограммы JavaScript, которые будут отлично смотреться в любом проекте на основе HTML5, позволяя легко сравнивать.

Примеры диаграмм, которые будут построены и продемонстрированы в этом руководстве, будут визуализировать последние данные о случаях нового коронавируса из JHU CSSE, поскольку COVID-19 является наиболее актуальной проблемой в настоящее время.

Продолжайте читать, и вы увидите, что создание диаграмм JS на самом деле очень просто. Особенно, если у вас есть хотя бы очень базовое понимание программирования (более того, замечательно, но далеко не обязательно).

Как построить простую столбчатую диаграмму JavaScript

Как правило, для создания диаграммы JS практически любого базового типа требуется четыре простых шага, и столбчатая диаграмма не является исключением:

1. Создайте веб-страницу.
2. Ссылка на необходимые файлы.
3. Установите данные.
4. Закодируйте диаграмму.

Давайте рассмотрим их сейчас один за другим, а затем перейдем к более сложной настройке для лучшей иллюстрации.

1. Создайте веб-страницу.

Сначала создайте HTML-страницу, на которой вы хотите построить диаграмму.

Добавьте HTML-элемент блочного уровня, который будет контейнером для диаграммы, и укажите его идентификатор.

Чтобы диаграмма заполняла всю страницу, установите параметры width и height на 100%.

Таким образом, вся HTML-страница может выглядеть так:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Chart on COVID-19 Data</title>
  </head>
  <body>
    <div id="container" style="width: 100%; height: 100%;"></div>
  </body>
</html>

2. Ссылка на необходимые файлы

Во-вторых, включите все необходимые скрипты для построения диаграммы - в тег <script> внутри раздела <head>.

Диаграмма, создаваемая в рамках этого руководства, будет основана на библиотеке диаграмм AnyChart JavaScript, которая проста в использовании и гибка и имеет подробную документацию с множеством примеров. Итак, включите его базовый модуль из CDN прямо здесь.

Сам код диаграммы перейдет к тегу <script> внутри раздела <body>.

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Chart on COVID-19 Data</title>
    <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-base.min.js"></script>
  </head>
  <body>
    <div id="container" style="width: 100%; height: 100%;"></div>
    <script>
      // The chart code will be written here.
    </script>
  </body>
</html>

3. Установите данные

В-третьих, вы должны добавить данные, которые хотите визуализировать.

По сути, существует много способов загружать данные в диаграммы. В этом руководстве описывается, как создать простую диаграмму, поэтому давайте рассмотрим простые данные.

В настоящее время пандемия нового коронавируса является темой номер один во всем мире. Давайте создадим столбчатую диаграмму JavaScript, отображающую 10 стран с наибольшим числом подтвержденных случаев COVID-19 на вчерашний день, 5 апреля 2020 г.. Данные будут взяты из репозитория данных Центра системных наук и инженерии Университета Джона Хопкинса (JHU CSSE), который, как известно, содержит достоверную статистику. Согласно ему, список 10 стран с наибольшим числом подтвержденных случаев COVID-19 на 5 апреля выглядит следующим образом:

Страна - количество обращений

США - 337 072
Испания - 131 646
Италия - 128 948
Германия - 100 123
Франция - 93 773
Китай - 82 602
Иран - 58 226
Великобритания - 48 436
Турция - 27 069
Швейцария - 21 100

Давайте преобразуем эти данные в объект JavaScript с массивом данных и настройками заголовка:

var data = {
  header: ["Country", "Number of cases"],
  rows: [
    ["United States", 337072],
    ["Spain", 131646],
    ["Italy", 128948],
    ["Germany", 100123],
    ["France", 93773],
    ["China", 82602],
    ["Iran", 58226],
    ["United Kingdom", 48436],
    ["Turkey", 27069],
    ["Switzerland", 21100]
]};

4. Закодируйте диаграмму.

Наконец, теперь, когда у вас есть страница, скрипты и данные, вы готовы к последнему шагу - началу кодирования.

Не забудьте включить код диаграммы внутри тега <script> в разделе <body> страницы HTML.

Для начала добавьте функцию anychart.onDocumentReady(), чтобы диаграмма загружалась, когда страница будет готова:

<script>
  anychart.onDocumentReady(function() {
    // The main chart code goes here.
  });
</script>

Затем добавьте данные:

anychart.onDocumentReady(function() {
var data = {
    header: ["Country", "Number of cases"],
    rows: [
      ["United States", 337072],
      ["Spain", 131646],
      ["Italy", 128948],
      ["Germany", 100123],
      ["France", 93773],
      ["China", 82602],
      ["Iran", 58226],
      ["United Kingdom", 48436],
      ["Turkey", 27069],
      ["Switzerland", 21100]
  ]};
});

Затем определите тип диаграммы. (Вы можете найти полный список типов диаграмм, доступных в AnyChart, вне поля в списке Поддерживаемые диаграммы.) На этой диаграмме необходимо выбрать тип столбчатой ​​диаграммы с данными, указанными в переменной data:

// create the column chart
var chart = anychart.column();
 
// add the data
chart.data(data);

Давайте также добавим заголовок для диаграммы, чтобы сразу показать, о чем она:

chart.title("Top 10 Countries with the Most Cases of COVID-19");

Последнее, что нужно сделать, это установить контейнер и команду для рисования диаграммы:

// set the container
chart.container("container");
// draw the chart
chart.draw();

Готово! Посмотрите на результат ниже:

Для вашего удобства эта столбчатая диаграмма JS / HTML5 доступна на AnyChart Playground, где вы можете увидеть ее интерактивную живую версию (например, навести указатель мыши на столбцы, и появятся всплывающие подсказки с точными числами), поиграть с кодом и визуализировать продолжить осваивать эту технику самостоятельно. На всякий случай полный HTML / JS-код также приведен ниже:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Chart on COVID-19 Data</title>
    <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-base.min.js"></script>
  </head>
  <body>
    <div id="container" style="width: 100%; height: 100%;"></div>
    <script>
anychart.onDocumentReady(function() {
// create the data
  var data = {
    header: ["Country", "Number of cases"],
    rows: [
      ["United States", 337072],
      ["Spain", 131646],
      ["Italy", 128948],
      ["Germany", 100123],
      ["France", 93773],
      ["China", 82602],
      ["Iran", 58226],
      ["United Kingdom", 48436],
      ["Turkey", 27069],
      ["Switzerland", 21100]
  ]};
 
  // create the column chart
  var chart = anychart.column();
 
  // add the data
  chart.data(data);
 
  // set the chart title
  chart.title("Top 10 Countries with the Most Cases of COVID-19");
 
  // set the container
  chart.container("container");
// draw the chart
  chart.draw();
 
});
    </script>
  </body>
</html>

Выглядит довольно просто и аккуратно, не правда ли?

Теперь давайте посмотрим, как изменить такую ​​столбчатую диаграмму JavaScript, если она вам нужна.

Настройка диаграммы

Переключить тип диаграммы (на горизонтальные полосы)

Существует множество типов диаграмм для визуализации данных, и иногда вам может потребоваться изменить тот, который вы выбрали в первую очередь, для лучшего и более глубокого просмотра ваших данных.

Например, вот как вы можете переключить тип столбчатой ​​диаграммы на тип столбчатой ​​диаграммы - преобразовать (вертикальные) столбцы в (горизонтальные) столбцы - просто изменив anychart.column() на anychart.bar():

var chart = anychart.bar();

Вот и все! Теперь эта столбчатая диаграмма JavaScript представляет собой гистограмму JS - проверьте это на игровой площадке:

Установить тему

Вы можете настроить внешний вид ваших диаграмм несколькими способами. Однако, чтобы быстро изменить внешний вид, может быть удобно выбрать одну из предварительно созданных тем оформления диаграмм.

Например, выберем один под названием «Темно-бирюзовый». Это можно сделать в два быстрых шага.

Сначала сделайте ссылку на него в теге <script> внутри раздела <head>:

<script src="https://cdn.anychart.com/releases/8.7.1/themes/dark_turquoise.min.js"></script>

Во-вторых, примените его к диаграмме следующим образом:

anychart.theme(anychart.themes.darkTurquoise);

Вот как это выглядит сейчас:

Включить линии сетки

Не так-то просто интуитивно распознать значения, представленные штриховыми линиями в такой визуализации данных. Так что вы можете добавить линии сетки, чтобы облегчить восприятие.

Прежде чем фактически включить сетку, давайте определим желаемые интервалы тиков - на каждые 50 000 наблюдений и с небольшими отметками каждые 10 000. Затем просто добавьте соответствующие линии сетки.

// add ticks
chart.yScale().ticks().interval(50000);
chart.yScale().minorTicks().interval(10000);
// add grid lines
chart.yGrid().enabled(true);
chart.yMinorGrid().enabled(true);

Обратите внимание, что в AnyChart гистограммы реализованы как вертикальные столбчатые диаграммы JavaScript. В результате горизонтальная ось на гистограммах - это Y, а вертикальная ось в гистограммах - X. Так что не запутайтесь с тем, что вы видите в приведенном выше фрагменте кода - там все абсолютно правильно.

Вот результат этого шага:

Включите анимацию

Наконец, давайте включим анимацию гистограммы при загрузке в качестве простого, но классного визуального эффекта:

chart.animation(true);

Это последняя диаграмма этого урока - результат всех описанных преобразований, реализованных одна за другой! Вы можете легко интегрировать его в свой веб-проект. Удалите все комментарии, и вы увидите, что он создан с помощью менее 30 строк чистого кода JavaScript.

Вот полный код этой последней интерактивной гистограммы JS, к которой мы пришли из базовой столбчатой ​​диаграммы JS:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Chart on COVID-19 Data</title>
    <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-base.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.7.1/themes/dark_turquoise.min.js"></script>
  </head>
  <body>
    <div id="container" style="width: 100%; height: 100%;"></div>
    <script>
anychart.onDocumentReady(function() {
// create the data
  var data = {
    header: ["Country", "Number of cases"],
    rows: [
      ["United States", 337072],
      ["Spain", 131646],
      ["Italy", 128948],
      ["Germany", 100123],
      ["France", 93773],
      ["China", 82602],
      ["Iran", 58226],
      ["United Kingdom", 48436],
      ["Turkey", 27069],
      ["Switzerland", 21100]
  ]};
 
  // create the chart
  var chart = anychart.bar();
// set the theme
  anychart.theme(anychart.themes.darkTurquoise);
 
  // add the data
  chart.data(data);
 
  // set the chart title
  chart.title("Top 10 Countries with the Most Cases of COVID-19");
// add tick intervals
  chart.yScale().ticks().interval(50000);
  chart.yScale().minorTicks().interval(10000);
  // add grid lines
  chart.yGrid().enabled(true);
  chart.yMinorGrid().enabled(true);
// turn on the chart animation
  chart.animation(true);
 
  // set the container
  chart.container("container");
// draw the chart
  chart.draw();
 
});
    </script>
  </body>
</html>

Заключение

Как видите, создание столбчатых и гистограмм в JavaScript совсем не сложно. Если вы хотите узнать, как внести дополнительные изменения в визуализацию данных из этого руководства или создать другие диаграммы, посетите документацию и вдохновитесь демонстрациями в галерее.

Не стесняйтесь задавать вопросы, если они есть.

См. также: Создание гистограммы JavaScript

Примечание от JavaScript In Plain English: Мы всегда заинтересованы в содействии продвижению качественного контента. Если у вас есть статья, которую вы хотели бы отправить в JavaScript In Plain English, отправьте нам электронное письмо по адресу [email protected] с вашим именем пользователя Medium, и мы добавим вас в качестве автора.