[Перевод] Создание столбчатых диаграмм с помощью JavaScript20.01.2023 16:46

8kkjodtcu_h2mg3crzy6xfrqpim.png


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

Гистограмма является очень простым, но мощным способом представления данных в случаях, когда нужно сравнить значения. В этом руководстве вы научитесь создавать разные их виды — простые, групповые, стековые и 100% стековые гистограммы, а также эффективно кастомизировать их с помощью всего нескольких строк JS-кода.

Будучи любителем крикета, я внимательно следила за чемпионатом мира ICC T20 2022 среди мужчин, проходившим осенью в Австралии, и в итоге решила взять данные для иллюстраций именно с него. Гистограммы, которые мы построим в ходе этого урока, позволят оценить статистику отбиваний мяча, а конкретно количество очков, заработанных десятью ведущими отбивающими в рамках турнира. Начнём!

1. Базовая гистограмма в JS


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

  1. Создание контейнера.
  2. Внесение файлов скриптов.
  3. Подготовка данных.
  4. Написание кода для визуализации.


▍ 1.1 Создание контейнера


Первым делом нужно настроить место для гистограммы.

Если у вас уже есть веб-страница, куда вы хотите её поместить, то просто откройте свой HTML-файл. Если же таковой нет, создайте. После этого добавьте в неё блочный HTML-элемент и присвойте ему ID. Также установите его ширину, высоту и прочие параметры стилизации, согласно вашим нуждам.

Я создала простейшую HTML-страницу, добавила элемент

с ID «контейнера» и установила его ширину/высоту равными 100%, чтобы итоговая гистограмма заполнила всю страницу: 


  
    JavaScript Column Chart


▍ 1.2 Внесение файлов скриптов


Самый простой способ быстро создать интерактивную гистограмму для веба — это использовать одну из существующих библиотек JavaScript (англ.). Эти библиотеки представляют наборы готового кода для генерации диаграмм, что позволяет визуализировать данные (англ.) путём минимальных усилий.

Этапы создания гистограммы во всех библиотеках, по сути, остаются одинаковыми. Какую бы вы ни выбрали, добавьте её к веб-странице, указав соответствующие JS-файлы в теге


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

// Создание гистограммы
var chart = anychart.column();

// Создание набора данных
var series = chart.column([
  ["Virat Kohli", "296", "India"],
  ["Max O'Dowd", "242", "Netherlands"],
  ["Suryakumar Yadav", "239", "India"],
  ["JD Butler", "225", "England"],
  ["Kusal Mendis", "223", "Sri Lanka"],
  ["Sikandar Raza", "219", "Zimbabwe"],
  ["Pathum Nissanka", "214", "Sri Lanka"],
  ["AD Hales", "212", "England"],
  ["Lorkan Tucker", "204", "Ireland"],
  ["Glenn Phillips", "201", "New Zealand"]
]);


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

// Добавление подписей к осям
chart.xAxis().title("Batsman");
chart.yAxis().title("Number of runs");

// Добавление подписи к графику
chart.title("Top 10 Run Scorers at ICC Men's T20 World Cup 2022");


В последнюю очередь я настраиваю элемент контейнера — здесь потребуется его ID — и отображаю итоговую гистограмму.

// Настройка элемента контейнера
chart.container("container");

// Отображение гистограммы
chart.draw();


Вот как выглядит весь код JS в теге