Спарклайны — это элегантные микродиаграммы, представленные Эдвардом Тафте, известным статистиком и пионером в области визуализации данных. Нарисованные без какой-либо оси и занимающие минимум места, эти крошечные графики предназначены для представления общей картины, отображающей тенденции в строке с текстом и в ячейках таблицы.

Если вы хотите узнать о простом способе построения спарклайновой диаграммы, это правильное место!

В этой статье я покажу вам, как быстро создавать крутые спарклайны с помощью JavaScript. В наши дни OTT-контент правит миром развлечений, давайте повеселимся и посмотрим на рейтинги IMDb одного из самых популярных шоу современности — Money Heist (La Casa de Papel на испанском языке).

Без лишних слов, отправляйтесь в это путешествие за знаниями!

Графики JS Sparkline будут построены

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

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

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

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

Кто-то может подумать, что где-то есть хитрость, и вам нужно много знать о кодировании, но на самом деле это относительно просто, и окончательный код JavaScript будет состоять из 40+ строк Vanilla JS.

Создание диаграммы JavaScript Sparkline

Прекрасную спарклайн-диаграмму JS можно создать всего за четыре простых шага. Разве это не перфекто?

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

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

Для начала нам нужна базовая HTML-страница с элементом <table>, который будет содержать все значения данных вместе со спарклайн-диаграммами. Чтобы ссылаться на таблицу позже в коде, мы предоставим ей параметр ID. Например, «tb-сезоны».

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

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

<html>
<head>
  <title>JavaScript Sparkline Chart</title>
  <style type="text/css">      
    html,
    body {
      width: 100%;
      margin:0;
      padding: 0;
    }
    tr { 
      overflow: hidden;
      height: 14px;
      white-space: nowrap;
    }
    td {
      text-align: center; 
      vertical-align: middle;
    }
    .chart {
      height: 20px;
      width: 80px;
    }
  </style>
</head>
  <body>
    <table id="tb-seasons">
      <thead>
        <tr>
          <th id="tg-head" colspan="4">Money Heist IMDb Ratings</th>
        </tr>  
        <tr>
          <th id="tg-head">Season</th>
          <th id="tg-head">Average rating</th>
          <th id="tg-head">Rating<br>by episode</th>
          <th id="tg-head">% of average<br>by episode</th>
        </tr>    
      </thead>
      <tbody>
      </tbody>
    </table>
  </body>
</html>

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

2. Добавьте файлы сценариев, которые будут использоваться.

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

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

Добавим необходимые файлы скриптов из AnyChart CDN. Для построения спарклайн-диаграмм с помощью этой библиотеки JS для визуализации данных нам понадобятся три конкретных скрипта: модуль ядра, модуль спарклайна и модуль адаптер данных. Итак, мы включим их все в раздел <head> HTML-страницы, созданной на первом этапе.

<html>
  <head>
    <title>JavaScript Sparkline 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-sparkline.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-data-adapter.min.js"></script>
    <style type="text/css">
      // The HTML body and table styles.
    </style>
  </head>
  <body>  
    // The table to hold the data values and the charts.
    <script>
      // All the code for the JS sparkline chart will come here.
    </script>
  </body>
</html>

3. Подключить данные

Я уже взял данные рейтинга Money Heist с веб-сайта IMDb и создал файл JSON в формате, необходимом для наших спарклайнов. Затем мы подключим этот набор данных с помощью функции data.loadJsonFile.

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

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

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

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

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

function (data) {
  // go through the data
  // and add each season's info and charts to the table
  Object.entries(data).forEach(([key, value]) => createSeason(key, data)); 
}

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

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

function createSeason(season, data){
  // get a table link
  var tbodyRef = document.getElementById('tb-seasons').getElementsByTagName('tbody')[0];
  
  // insert a row at the end of the table
  var newRow = tbodyRef.insertRow();
  newRow.setAttribute('height', '30px');
  
  // append a season name text node to a cell
  newRow.insertCell().appendChild(document.createTextNode(season));
  
  // append a season rating cell
  newRow.insertCell().appendChild(
    document.createTextNode(data[season].avg)
  );
  
  // create a line sparkline chart showing ratings
  var lineDiv = createSparkline(data[season], 'episodeRatings', 'line');
  
  // append it
  newRow.insertCell().appendChild(lineDiv); 
  
  // create a column sparkline chart showing percentages
  var columnDiv = createSparkline(data[season], 'percentOfAvg', 'column');
  
  // append it
  newRow.insertCell().appendChild(columnDiv);
}

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

// create sparkline of a given type, color, and from a given field
function createSparkline(data, field, type){
  var sparkline = anychart.sparkline(data[field]);
  sparkline.seriesType(type);
  
  // create a div for the sparklines and assign a css class name
  var chartDiv = document.createElement('div');
  chartDiv.setAttribute('class', 'chart');  
  
  sparkline.container(chartDiv);
  sparkline.draw();
  
  return chartDiv;
}

Тада — красивые и функциональные интерактивные JS спарклайны сделаны! Разве это не было даже проще, чем ожидалось?

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

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

Настройка спарклайнов

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

Изменение цветовой палитры

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

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

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

// create a line sparkline chart showing ratings
var lineDiv = createSparkline(data[season], 'episodeRatings', 'line', '#040102');
// create a column sparkline chart showing percentages
var columnDiv = createSparkline(data[season], 'percentOfAvg', 'column', '#cf0011');
…
sparkline.fill(color).stroke(color);

Улучшение заголовков

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

<tr class="main-heading">
  <th id="tg-head" colspan="4">Money Heist IMDb Ratings</th>
</tr>
…
.main-heading {
  font-family: sans-serif;
  font-size: 14px;
}

Точно так же давайте добавим несколько пользовательских стилей для заголовков столбцов.

<tr class="col-headings">
  <th id="tg-head">Season</th>
  <th id="tg-head">Average rating</th>
  <th id="tg-head">Rating<br>by episode</th>
  <th id="tg-head">% of average<br>by episode</th>
</tr>
…
.col-headings {
  font-family: sans-serif;
  font-size: 13px;
  color: #7c868e;
  font-weight: 300;
  text-align: left;
}

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

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

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

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

sparkline.tooltip().format(function() {
  var x = (this.x) + 1;
  return "E" + x + "-" + this.value + tooltipPostfix;
});

Вот и все! Визуально привлекательные и информативные спарклайны готовы!

Посмотрите итоговый интерактивный спарклайн JS-график на AnyChart Playground, где вы также можете продолжить его улучшать, добавлять другие данные и так далее. Полный код также ниже на всякий случай.

<html>
<head>
  <title>JavaScript Sparkline 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-sparkline.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-data-adapter.min.js"></script>
  <table id="tb-seasons">
    <thead>
      <tr class="main-heading">
        <th id="tg-head" colspan="4">Money Heist IMDb Ratings</th>
      </tr>
      <tr class="col-headings">
        <th id="tg-head">Season</th>
        <th id="tg-head">Average rating</th>
        <th id="tg-head">Rating<br>by episode</th>
        <th id="tg-head">% of average<br>by episode</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <style type="text/css">
    html,
    body {
      width: 100%;
      margin: 0;
      padding: 0;
    }
    tr {
      overflow: hidden;
      height: 14px;
      white-space: nowrap;
    }
    td {
      text-align: center;
      vertical-align: middle;
    }
    .chart {
      height: 20px;
      width: 80px;
    }
    .main-heading {
      font-family: sans-serif;
      font-size: 14px;
    }
    .col-headings {
      font-family: sans-serif;
      font-size: 13px;
      color: #7c868e;
      font-weight: 300;
      text-align: left;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
    anychart.onDocumentReady(function () {      anychart.data.loadJsonFile('https://gist.githubusercontent.com/shacheeswadia/21ddfa122938e676bf9e7911e1417d9a/raw/d28d7a22b968bb39d755285d28ce949b31276628/sparklineChartData.json',
        function (data) {
        // go through the data
        // and add each season's info and charts to the table
        Object.entries(data).forEach(([key, value]) => createSeason(key, data));
        }
      );
    });
    function createSeason(season, data) {
      // get a table link
      var tbodyRef = document.getElementById('tb-seasons').getElementsByTagName('tbody')[0];
      // insert a row at the end of the table
      var newRow = tbodyRef.insertRow();
      newRow.setAttribute('height', '30px');
      // append a season name text node to a cell
      newRow.insertCell().appendChild(document.createTextNode
(season));
      // append a season rating cell
      newRow.insertCell().appendChild(document.createTextNode
(data[season].avg));
      // create a line sparkline chart showing ratings
      var lineDiv = createSparkline(data[season], 'episodeRatings', 'line', '#040102', 'Rating', '');
      // append it
      newRow.insertCell().appendChild(lineDiv);
      // create a column sparkline chart showing percentages
      var columnDiv = createSparkline(data[season], 'percentOfAvg', 'column', '#cf0011', 'Percent of average', '%');
      // append it
      newRow.insertCell().appendChild(columnDiv);
    }
    // create sparkline of a given type, color,
    // and from a given field
    function createSparkline(data, field, type, color, tooltipText, tooltipPostfix) {
      var sparkline = anychart.sparkline(data[field]);
      sparkline.seriesType(type);
      sparkline.fill(color).stroke(color);
      sparkline.tooltip().format(function () {
        var x = (this.x) + 1;
        return "E" + x + "-" + this.value + tooltipPostfix;
      });
      // create a div for the sparklines and assign a css class name
      var chartDiv = document.createElement('div');
      chartDiv.setAttribute('class', 'chart');
      sparkline.container(chartDiv);
      sparkline.draw();
      return chartDiv;
    }
  </script>
</body>
</html>

Заключение

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

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

Мы хотим поблагодарить внештатного визуализатора данных Шачи Свадиа за создание этого замечательного руководства по JavaScript Sparkline Chart в качестве гостевого поста.

Чтобы узнать больше о спарклайн-диаграммах, посетите Chartopedia.

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

Есть идея не менее крутого гостевого поста? Мы с нетерпением ждем от вас услышать!

Первоначально опубликовано на https://www.anychart.com 13 января 2022 г.

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.