Как создавать потрясающие интерактивные гистограммы с помощью JavaScript

Веб-разработчик Альфрик Опиди показывает, как создавать красивые интерактивные гистограммы с помощью JavaScript (HTML5), взяв в качестве примера библиотеку диаграмм AnyChart JS.

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

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

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

Некоторые из лучших библиотек диаграмм JavaScript включают Google Charts, AnyChart, D3 и Highcharts. По сути, процесс создания интерактивных диаграмм с любым из них, как правило, очень похож. Итак, как только вы научитесь использовать одну из них, вы сможете легко экстраполировать процесс на другие библиотеки, особенно если вам нужна уникальная функция, присутствующая в любой из них.

В этом уроке по диаграммам JS мы будем использовать примеры из AnyChart. Это гибкая и простая в использовании библиотека диаграмм HTML5 JavaScript, которая поставляется с исчерпывающей документацией, большим разнообразием поддерживаемых типов диаграмм, площадкой для тестирования кода и множеством других интересных функций.

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

Как создать простую гистограмму JS за 3 шага

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

Подготовьте данные.
Подключитесь к библиотеке графиков JS.
Напишите код.

Теперь давайте поговорим о каждом из шагов.

1. Подготовка данных

Если у вас есть неструктурированные данные, вам нужно подготовить их для более удобной загрузки в библиотеку диаграмм. В зависимости от выбранной вами библиотеки вам потребуется подготовить данные в том формате, который она принимает. AnyChart поддерживает широкий спектр форматов данных, включая Google Spreadsheet, XML, CSV, HTML и JSON.

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

Например, если мы подготовим данные в формате массива, X будет номером элемента, а Y будет значением данных.

var data = [120, 60, 30, 80, 50];
   // X is item numbers [0,1,2,3,4,5]
   // Y is the data values

Кроме того, если данные доступны в формате JSON, они могут выглядеть следующим образом.

[{
        'x': Item One',
        'value': 120
    },{
        'x': 'Item Two',
        'value': 60
    }...]

2. Подключение к библиотеке графиков

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

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

Например, если мы хотим создать гистограмму с помощью AnyChart JS, нам нужно добавить следующие основные и базовые декартовы модули:

<script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-cartesian.min.js"></script>

3. Написание кода

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

а. Мы начнем с создания контейнера на HTML-странице, который будет ссылаться на гистограмму.

<div id="container"></div>

б. Затем давайте включим подготовленные нами данные (обратите внимание, что данные состоят из произвольных значений веб-трафика, который некоторые веб-сайты получают в минуту).

var data = [
        {x: 'Amazon', y: 120},
        {x: 'DZone', y: 60},
        {x: 'Gizmodo', y: 30},
        {x: 'StackOverFlow', y: 80},
        {x: 'CNET', y: 50}
    ];

в. Далее давайте определим тип диаграммы, которую мы хотим создать, вызвав соответствующую функцию конструктора диаграммы.

var chart = anychart.bar();

д. Давайте установим заголовок для диаграммы и осей.

chart.title('Website Traffic Stats');
chart.xAxis().title("Website");
chart.yAxis().title("Traffic Per Minute");

е. Давайте создадим серию баров и передадим данные.

var series = chart.bar(data);

ф. Укажем диаграмму на созданный нами идентификатор container.

chart.container("container");

г. Приступим к рисованию гистограммы.

chart.draw();

Вот как диаграмма выглядит в браузере:

Вот весь код для создания базовой гистограммы с использованием библиотеки JavaScript AnyChart:

<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-cartesian.min.js"></script>
</head>
<body>
<div id="container">
<script>
anychart.onDocumentLoad(function() {
// create the data
var data = [
        {x: 'Amazon', y: 120},
        {x: 'DZone', y: 60},
        {x: 'Gizmodo', y: 30},
        {x: 'StackOverFlow', y: 80},
        {x: 'CNET', y: 50}
    ];
var chart = anychart.bar(); // create a chart
chart.title('Website Traffic Stats'); // create title for the chart
chart.xAxis().title("Website"); // create name for X axis
chart.yAxis().title("Traffic Per Minute"); // create name for Y axis
var series = chart.bar(data); // create bar series and pass data
chart.container("container"); // reference the container Id
chart.draw(); // initiate drawing the bar chart
  });
</script>
</div>
</body>
</html>

Вот и все!

Как видите, использовать библиотеку AnyChart для создания красивых диаграмм легко и просто.

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

Как создавать продвинутые гистограммы JavaScript

Поскольку мы уже знаем, как создать гистограмму с помощью AnyChart, давайте посмотрим, что еще можно сделать, если нам нужно выполнить более сложные задачи визуализации данных. Вы увидите, что построение графиков в JavaScript не является сложной задачей для веб-разработчиков.

Например, вот некоторые расширенные готовые возможности, которые вы можете использовать в той же библиотеке.

1. Создание мультисерийных гистограмм

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

Например, предположим, что данные представлены в таблице HTML (см. ниже код таблицы).

Вот как таблица выглядит в браузере:

Чтобы использовать JS-библиотеку AnyChart для построения гистограммы с несколькими рядами данных, нам сначала нужно включить модуль адаптера данных, который помогает загружать данные HTML в нашу рабочую среду.

<script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>

Далее нам нужно проанализировать данные из HTML-таблицы.

var dataTable = anychart.data.parseHtmlTable('#dataTable');

Затем мы создадим диаграмму, а также укажем источник данных.

var chart = anychart.bar(); chart.data(dataTable);

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

var legend = chart.legend(); legend.enabled(true); // enable legend

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

Вот весь код для создания гистограммы с несколькими рядами на основе JavaScript:

<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-cartesian.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
</head>
<body>
<div id="container">
<table id="dataTable" border="1">
      <caption>Website Traffic</caption>
      <thead>
        <tr>
          <th>Websites / Traffic Source</th>
          <th>Organic</th>
          <th>Direct</th>
          <th>Referral</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Amazon</td>
          <td>60</td>
          <td>50</td>
          <td>10</td>
        </tr>
        <tr>
          <td>Dzone</td>
          <td>30</td>
          <td>20</td>
          <td>10</td>
        </tr>
        <tr>
          <td>Gizmodo</td>
          <td>20</td>
          <td>5</td>
          <td>5</td>
        </tr>
        <tr>
          <td>StackOverFlow</td>
          <td>40</td>
          <td>30</td>
          <td>10</td>
        </tr>
        <tr>
          <td>CNET</td>
          <td>25</td>
          <td>5</td>
          <td>20</td>
        </tr>
      </tbody>
</table>
</div>
<script>
anychart.onDocumentLoad(function() {
var dataTable = anychart.data.parseHtmlTable('#dataTable'); // parse data from HTML table
var chart = anychart.bar(); // create chart
chart.xAxis().title("Website"); // create name for X axis
chart.yAxis().title("Traffic Per Minute"); // create name for Y axis
chart.data(dataTable); // specify data source
var legend = chart.legend();
legend.enabled(true); // enable legend
chart.container("container"); // reference the container Id
chart.draw(); // initiate drawing the bar chart
});
</script>
</body>
</html>

2. Создание гистограмм с накоплением

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

Вот как установить stackMode для гистограммы с накоплением JS на основе значений:

chart.yScale().stackMode('value');

Вот результат:

Вот как установить режим для гистограммы со 100% накоплением:

chart.yScale().stackMode('percent');

Вот результат:

3. Добавление интерактивности к диаграммам

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

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

chart.tooltip().title("Traffic Data");
chart.tooltip().format("Website: {%categoryName} \n{%seriesName}: {%value}");

Вот результат:

Вот весь код для создания этой диаграммы JS с дополнительной интерактивностью:

<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-cartesian.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
</head>
<body>
<div id="container">
<table id="dataTable" border="1">
      <caption>Website Traffic</caption>
      <thead>
        <tr>
          <th>Websites / Traffic Source</th>
          <th>Organic</th>
          <th>Direct</th>
          <th>Referral</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Amazon</td>
          <td>60</td>
          <td>50</td>
          <td>10</td>
        </tr>
        <tr>
          <td>Dzone</td>
          <td>30</td>
          <td>20</td>
          <td>10</td>
        </tr>
        <tr>
          <td>Gizmodo</td>
          <td>>20</td>
          <td>5</td>
          <td>5</td>
        </tr>
        <tr>
          <td>StackOverFlow</td>
          <td>40</td>
          <td>30</td>
          <td>10</td>
        </tr>
        <tr>
          <td>CNET</td>
          <td>25</td>
          <td>5</td>
          <td>20</td>
        </tr>
      </tbody>
    </table>
<script>
anychart.onDocumentLoad(function() {
var dataTable = anychart.data.parseHtmlTable('#dataTable'); // parse data from HTML table
var chart = anychart.bar(); // create chart
chart.xAxis().title("Website"); // create name for X axis
chart.yAxis().title("Traffic Per Minute"); // create name for Y axis
chart.data(dataTable); // specify data source
chart.yScale().stackMode('percent'); // setting percent stacking
var legend = chart.legend();
legend.enabled(true); // enable legend
chart.tooltip().title("Traffic Data"); // configuring the tooltip
chart.tooltip().format("Website: {%categoryName} \n{%seriesName}: {%value}");
chart.container("container"); // reference the container Id
chart.draw(); // initiate drawing the bar chart
});
</script>
</div>
</body>
</html>

Подведение итогов

Как видите, создавать универсальные и интерактивные диаграммы JavaScript (HTML5) легко с помощью хорошей библиотеки JS. В этом уроке мы только коснулись того, что вы можете сделать.

Вы можете перейти в Документацию AnyChart и узнать, как создавать другие удивительные диаграммы и повышать свой уровень визуализации данных.

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

У вас есть вопросы или комментарии? Пожалуйста, разместите их ниже.

Всего наилучшего.

Статья «Как создавать потрясающие интерактивные гистограммы с помощью JavaScript — учебное пособие» опубликована в блоге AnyChart с разрешения Альфрика Опиди.

Первоначально опубликовано на DZone, Big Data Zone под заголовком Как создавать потрясающие интерактивные гистограммы с помощью JavaScript 22 марта 2019 г.

Первоначально опубликовано на www.anychart.com 3 апреля 2019 г.

Как создавать потрясающие интерактивные гистограммы с помощью JavaScript — Учебное пособие

Как создать простую гистограмму JS за 3 шага

1. Подготовка данных

2. Подключение к библиотеке графиков

3. Написание кода

Как создавать продвинутые гистограммы JavaScript

1. Создание мультисерийных гистограмм

2. Создание гистограмм с накоплением

3. Добавление интерактивности к диаграммам

Подведение итогов

Вопросы по теме