Как создать линейную диаграмму на JavaScript?

В этой статье представлено простое руководство по созданию интерактивной линейной диаграммы на JavaScript.

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

Содержание

Что такое линейная диаграмма?
Типы линейных датчиков
Визуализация линейного датчика, которую мы будем строить
Четыре шага к созданию линейного датчика на JavaScript
1. Создайте базовую HTML-страницу
2. Включите необходимые файлы JavaScript.
3. Добавьте значения данных
4. Напишите код JavaScript для диаграммы.
Определение линейного масштаба и оси для калибровочной диаграммы
Установка указателя панели и метки
Создание светодиодной указки и установка атрибута цвета
Объявление датчиков с целевым значением каждой точки данных
Настройка расположения линейных манометров
Рисование диаграммы
Делаем диаграмму доступной
Настройка линейного датчика
Модификация цвета
Добавление легенды к нашей линейной диаграмме
Форматирование всплывающей подсказки
Форматирование осей и меток
Заключение

Что такое линейная диаграмма?

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

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

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

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

Типы линейных датчиков

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

Визуализация линейного датчика, которую мы будем строить

Вот краткий обзор окончательной линейной диаграммы. Следуйте этому руководству, чтобы узнать, как мы создаем эту интересную и информативную линейную диаграмму с помощью JavaScript.

Четыре шага к созданию линейного датчика на JavaScript

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

Шаги по созданию линейного датчика на JavaScript

Вот основные шаги для создания линейной диаграммы:

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

Давайте подробно рассмотрим каждый из этих шагов ниже.

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

Первое, что нам нужно сделать, это создать HTML-страницу, которая будет содержать нашу визуализацию. Мы добавляем

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

<html lang="en">
  <head>
    <title>JavaScript Linear 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.

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

<html lang="en">
  <head>
    <title>JavaScript Linear Gauge</title>
    <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 JS linear gauge will come here
    </script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-linear-gauge.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-table.min.js"></script>
  </body>
</html>

3. Добавьте значения данных

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

Поскольку (на момент написания) ни одно из чисел не превышает 50%, мы сохранили максимальный предел оси всех линейных датчиков равным 50%, и мы сравниваем, насколько далеко от этой отметки находится каждый континент, а также мировая цифра. Мы указываем, по крайней мере, частично вакцинированные числа с помощью светодиодного изображения, а полностью вакцинированные числа — с помощью полосовой стрелки. Посмотрим, как добавляются данные на последнем шаге.

Итак, наши начальные шаги сделаны, и теперь давайте добавим код для создания линейной диаграммы с помощью JavaScript!

4. Напишите код JavaScript для диаграммы.

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

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

Определение линейного масштаба и оси для калибровочной диаграммы

У нас есть несколько указателей на нашей диаграмме. Итак, давайте начнем с создания функции, которая принимает два значения: одно для указателя полосы, а другое для светодиодного индикатора. Затем мы создадим датчик, установим данные и укажем горизонтальный макет. Далее мы установим диапазон шкал и осей. Сделаем линейную шкалу с минимальным и максимальным диапазонами. Для оси мы определим атрибуты и установим ориентацию:

function drawGauge(value, settings) {
  // Create gauge with settings
  const gauge = anychart.gauges.linear();
  gauge.data([value, settings.value]);
  gauge.layout('horizontal');

  // Set scale for gauge
  const scale = anychart.scales.linear();
  scale.minimum(0).maximum(settings.maximum).ticks({ interval: 2 });

  // Set axis for gauge
  const axis = gauge.axis(0);
  axis.width('1%').offset('43%').scale(scale).orientation('bottom');
}

Установка указателя панели и метки

Теперь мы создадим указатель полосы и метку для серии столбцов. Метке дано смещение, чтобы избежать перекрытия с указателем:

// Create and set bar point
const barSeries = gauge.bar(0);

barSeries
  .scale(scale)
  .width('4%');

// Create and set label with actual data
const labelBar = barSeries.labels();
labelBar
  .enabled(true)
  .offsetY('-15px');

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

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

// Create and set LED point
const ledPointer = gauge.led(1);

ledPointer
  .offset('10%')
  .width('30%')
  .count(settings.maximum)
  .scale(scale)
  .gap(0.55)
  .dimmer(function () {
    return '#eee';
  });

ledPointer.colorScale().colors(['#63b39b', '#63b39b']);

Объявление датчиков с целевым значением каждой точки данных

Чтобы создать линейный датчик для каждого континента, мы вызовем определенную выше функцию для каждого региона с его данными. Первое число указывает на данные целевого значения, а вторая переменная — это объект с данными светодиода. maximumОстается постоянной 50, в то время как valueэто процент стоимость полностью вакцинированных населения для каждой точки данных. Это значение будет отображаться указателем:

// Create gauges
const world = drawGauge(13.68, { maximum: 50, value: 27.13 });
const europe = drawGauge(36.98, { maximum: 50, value: 47.28 });
const nAmerica = drawGauge(36.77, { maximum: 50, value: 46.53 });
const sAmerica = drawGauge(22.8, { maximum: 50, value: 40.54 });
const asia = drawGauge(10.14, { maximum: 50, value: 27.16 });
const oceania = drawGauge(9.75, { maximum: 50, value: 22.12 });
const africa = drawGauge(1.56, { maximum: 50, value: 3.04 });

Настройка расположения линейных манометров

Чтобы отображать каждый из линейных датчиков один под другим, мы определим таблицу и добавим заголовок вместе с каждой точкой данных в виде отдельной строки. Мы добавим различные свойства макета, такие как выравнивание и размер шрифта. Мы также определим параметры для первой строки, поскольку это заголовок, и установим атрибут ширины первого столбца на 100%, поскольку нам больше не нужны столбцы:

// Create table to place gauges
const layoutTable = anychart.standalones.table();
layoutTable
  .hAlign('right')
  .vAlign('middle')
  .fontSize(14)
  .cellBorder(null);

// Put gauges into the layout table
layoutTable.contents([
  [null, 'Covid-19 Vaccination - How far are we from the halfway mark?'],
  ['World', world],
  ['Europe', europe],
  ['North America', nAmerica],
  ['South America', sAmerica],
  ['Asia', asia],
  ['Oceania', oceania],
  ['Africa', africa]
]);

// Set height for first row in layout table
layoutTable
  .getRow(0)
  .height(50)
  .fontSize(22)
  .hAlign('center');

// Set the first column to 100% width
layoutTable.getCol(0).width(100);

Рисование диаграммы

Последним шагом будет ссылка на <div>контейнер, который мы добавили на предыдущем шаге, и построение диаграммы:

// Set container id and initiate drawing
layoutTable.container('container');
layoutTable.draw();

Вот и все. Теперь у нас есть полностью функциональная и красивая линейная диаграмма на JavaScript!

Делаем диаграмму доступной

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

Настройка линейного датчика

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

Модификация цвета

Чтобы линейный датчик выглядел более связным, давайте сделаем цветовой атрибут указателя полосы более темной версией светодиодных точек. Мы сделаем это, указав атрибуты заливки и обводки полосы:

// Create and set bar point
const barSeries = gauge.bar(0);
barSeries
  .scale(scale)
  .width('4%')
  .fill('#296953')
  .stroke('#296953');

Добавление легенды к нашей линейной диаграмме

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

// Create stand alone legend
const legend = anychart.standalones.legend();
legend
.position('center')
.items([
    { text: 'Fully vaccinated', iconFill: '#296953' },
    { text: 'Partially vaccinated', iconFill: '#63b39b' },
    { text: 'Not vaccinated', iconFill: '#eee' }
]);

Форматирование всплывающей подсказки

Чтобы облегчить обмен данными, давайте отформатируем всплывающую подсказку, чтобы сделать ее более информативной, отображая значения в процентной форме и указав, что максимальное значение для датчика составляет 50%:

// Set gauge tooltip
gauge
    .tooltip()
    .useHtml(true)
    .titleFormat('{%Value} %')
        .format(
        'Maximum on scale: ' +
        settings.maximum +
        ' %'
    );

Форматирование осей и меток

Последнее, что мы сделаем, это отобразим все значения данных в виде процентных значений, чтобы избежать путаницы. Мы также добавим подзаголовок в виде строки в таблице под заголовком, чтобы указать, что значения являются процентами. И последнее, что нужно сделать — украсить ярлыки полос более жирным шрифтом.

Заключение

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

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