Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Как рисовать гистограммы используя JavaScript и HTML5

by
Difficulty:BeginnerLength:MediumLanguages:

Russian (Pусский) translation by Andy Yur (you can also view the original English article)

Final product image
What You'll Be Creating

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

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

Infographic charts and graphics HTML tags library
Инфографика библиотеки графиков из CodeCanyon

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

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

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

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

Существует много типов линейных графиков:

  • горизонтальный и вертикальный графики, в зависимости от ориентации
  • сложенные гистограммы или классические графики для представления многократной серии данных
  • гистограммы 2В или 3D
  • прочие

Какие компоненты у гистограмм?

Давайте посмотрим на компоненты, которые составляют гистограмму независимо от ее типа:

Components of a bar chart
  • Данные диаграммы: это наборы чисел и связанных категорий, которые представлены диаграммой.
  • Название серии данных (1)
  • Диаграмма графика (2): справочная система представлена так, чтобы визуальное восприятие могло быть понятным.
  • Гистограмма (3): цветные прямоугольники с размерами, соответствующие данным.
  • Описание диаграммы (4): Показывает описание каждого цвета прямоугольника и соответствующему ему значение.

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

Рисуем диаграмму используя JavaScript

Настраиваем проект JavaScript

Для старта прорисовки с использованием JavaScript и HTML5 мы нужно настроить проект вот так:

  • Создать папку для файлов проекта и назовём её bar-chart-tutorial.
  • В папке проекта создайте файл и назовите его index.html. Он будет содержать наш HTML-код
  • Также в папку проекта добавим ещё одни файл с названием script.js. В нём будет содержаться код JavaScript для прорисовки диаграммы.

Мы будем выполнять всё очень просто и добавим следующий код во внутрь index.html:

У нас есть элемент <canvas> с id myCanvas, поэтому мы можем ссылаться на него в нашем коде JavaScript. Тогда мы загрузим наш скрипт с помощью тега <script>.

Добавьте следующий код в файл script.js:

Это даёт ссылку на элемент и тогда определим ширину и высоту в 300 пикселей. Для прорисовки на странице, нам нужно только сослаться на 2D контекст, который содержит все методы прорисовки.

Добавляем несколько вспомогательных функций

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

  • рисование линии: для рисования линий в сетке
  • рисование цветного прямоугольника: для рисования гистограммы

Создадим вспомогательную функцию для этих двух элементов. Мы добавим функцию в наш файл script.js.

Функция drawLine предлагает шесть параметров:

  1. ctx: ссылается на нарисованный контекст
  2. startX: координата X стартовой точки линии
  3. startY: координата Y стартовой точки линии
  4. endX: координата X конечной точки линии
  5. endY: координата Y конечной точки линии
  6. color: цвет линии

Мы модифицируем настройки цвета для strokeStyle. Это определит цвета, которые будут использоваться в прорисовке линии. Мы используем ctx.save() и ctx.restore(), поэтому мы не затронем цвета, использующиеся за пределами этой функции.

Мы нарисуем линию с названием beginPath(). Это проинформирует нарисованному контексту, что мы начали рисовать что-то новое на странице. Мы используем moveTo() для выбора стартовой точки, с названием lineTo() для указания конечной точки и тогда сделать актуальную прорисовку под названием stroke().

Другая дополнительная функция нужна нам для прорисовки диаграммы, которая является цветным прямоугольником. Добавим его в script.js:

Функция drawBar предлагает шесть параметров:

  1. ctx: ссылается на нарисованный контекст
  2. upperLeftCornerX: координата X диаграммы верхнего левого угла
  3. upperLeftCornerY: координата X диаграммы верхнего левого угла
  4. width: ширина диаграммы
  5. height: высота диаграммы
  6. color: цвет диаграммы

Информационная модель гистограммы

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

  • Классическая музыка: 10
  • Альтернативный рок: 14
  • Поп: 2
  • Джаз: 12

Мы можем изобразить это в JavaScript в форме объекта. Давайте добавим это в файл script.js:

Реализуем компонент гистограммы

Давайте реализуем компонент, который делает актуальную прорисовку нашей гистограммы. Мы сделаем это через добавление объекта JavaScript в наш script.js:

Классы начала были сохранены в настройках как параметры. Это сохраняет canvas и создаёт рисованный контекст и сохраняет как класс участника. Тогда это хранит цвета массива как варианты.

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

Смотря на функцию draw(), мы можем видеть, что сначала мы вычисляем максимальное значение для всей числовой модели. Нам требуется данное число для того, что бы определить размер диаграммы и уже от этого числа будет отталкиваться размер canvas. Иначе наша диаграмма могла бы выйти за пределы области дисплея, а мы не хотим этого.

Переменные canvasActualHeight и canvasActualWidth хранят значения высоты и ширины используя значения отступов переданные в настройки. Переменная padding указывает число пикселей между страницей и границей графика внутри.

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

Для расивания линии сетки, мы используем вспомогательную функцию drawLine(); что касается цвета линий сетки, мы берем его из переменной options.gridColor. Обратите внимание на то, что холст берёт начало координат из 0,0 в верхнем левом углу и уходит вправо и вниз, в то время как значение нашей сетки увеличивается снизу вверх. Вот почему мы использовали 1 - gridValue/maxValue в расчётах формулы значения gridY.

Для каждой линии сетки мы также прорисовали значение линии 2 пикселя выше линии (вот почему у нас gridY - 2 для координаты Y в тексте).

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

Используем компонент гистограммы

Давайте теперь посмотрим как реализовано использование класса Barchart ниже. Нам нужно идентифицировать класс и вызвать функцию draw(). добавьте следующий код в script.js.

Код создаёт экземпляр класса Barchart с нужными опциями. Загружаем index.html в браузер чтобы получить результат вроде этого:

Simple bar chart using html5 canvas

Добавляем серийное название данных и описание диаграммы

Что бы добавить серийное название данных нам надо добавить следующий код в файл script.js после for-loop, который рисует диаграмму:

Также нам надо изменить путь вызова компонента Barchart как описано ниже:

Теперь наш результат выглядит так:

Bar chart with data series title

Для добавления описания, нам надо модифицировать index.html, чтобы он выглядел так:

Тег legend может быть использован как заполнитель для описания диаграммы. Атрибут for ссылается на canvas в диаграмме. Теперь нам надо добавить код, что создаёт описание. Мы будет делать это в файле script.js после кода, что прорисовывает серийное название данных. Ко идентифицирует тег legend передавая в диаграмму и это добавит список категорий из модели данных диаграммы вместе с передаваемым цветом. В конце концов наш script.js будет выглядеть так:

Финальный результат в браузере:

HTML5 canvas bar chart final result

Мои поздравления

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

Если вы хотите быстрое и просто е решение для создания не только гистограмм, но и загрузки прочих видов диагорамм, вы можете загрузить библиотеку Диаграмм и Инфографик (Infographic Charts and Graphics HTML Tags Library) или плагин для Wordpress Charts and Graphs WordPress Visual Designer.

Infographic charts and graphics HTML tags library
Infographic Charts Library из CodeCanyon
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.