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

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
прочие

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

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

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

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

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

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

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

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

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

<html>
<body>
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

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

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

var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 300;
myCanvas.height = 300;
 
var ctx = myCanvas.getContext("2d");

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

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

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

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

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

function drawLine(ctx, startX, startY, endX, endY,color){
    ctx.save();
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.lineTo(endX,endY);
    ctx.stroke();
    ctx.restore();
}

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

ctx: ссылается на нарисованный контекст
startX: координата X стартовой точки линии
startY: координата Y стартовой точки линии
endX: координата X конечной точки линии
endY: координата Y конечной точки линии
color: цвет линии

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

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

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

function drawBar(ctx, upperLeftCornerX, upperLeftCornerY, width, height,color){
    ctx.save();
    ctx.fillStyle=color;
    ctx.fillRect(upperLeftCornerX,upperLeftCornerY,width,height);
    ctx.restore();
}

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

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

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

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

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

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

var myVinyls = {
    "Classical music": 10,
    "Alternative rock": 14,
    "Pop": 2,
    "Jazz": 12
};

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

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

var Barchart = function(options){
    this.options = options;
    this.canvas = options.canvas;
    this.ctx = this.canvas.getContext("2d");
    this.colors = options.colors;
 
    this.draw = function(){
        var maxValue = 0;
        for (var categ in this.options.data){
            maxValue = Math.max(maxValue,this.options.data[categ]);
        }
        var canvasActualHeight = this.canvas.height - this.options.padding * 2;
        var canvasActualWidth = this.canvas.width - this.options.padding * 2;

        //drawing the grid lines
        var gridValue = 0;
        while (gridValue <= maxValue){
            var gridY = canvasActualHeight * (1 - gridValue/maxValue) + this.options.padding;
            drawLine(
                this.ctx,
                0,
                gridY,
                this.canvas.width,
                gridY,
                this.options.gridColor
            );
            
            //writing grid markers
            this.ctx.save();
            this.ctx.fillStyle = this.options.gridColor;
            this.ctx.font = "bold 10px Arial";
            this.ctx.fillText(gridValue, 10,gridY - 2);
            this.ctx.restore();

            gridValue+=this.options.gridScale;
        }
 
        //drawing the bars
        var barIndex = 0;
        var numberOfBars = Object.keys(this.options.data).length;
        var barSize = (canvasActualWidth)/numberOfBars;

        for (categ in this.options.data){
            var val = this.options.data[categ];
            var barHeight = Math.round( canvasActualHeight * val/maxValue) ;
            drawBar(
                this.ctx,
                this.options.padding + barIndex * barSize,
                this.canvas.height - barHeight - this.options.padding,
                barSize,
                barHeight,
                this.colors[barIndex%this.colors.length]
            );

            barIndex++;
        }
 
    }
}

Классы начала были сохранены в настройках как параметры. Это сохраняет 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.

var myBarchart = new Barchart(
    {
        canvas:myCanvas,
        padding:10,
        gridScale:5,
        gridColor:"#eeeeee",
        data:myVinyls,
        colors:["#a55ca5","#67b6c7", "#bccd7a","#eb9743"]
    }
);
myBarchart.draw();

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

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

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

        ...
        //drawing series name
        this.ctx.save();
        this.ctx.textBaseline="bottom";
        this.ctx.textAlign="center";
        this.ctx.fillStyle = "#000000";
        this.ctx.font = "bold 14px Arial";
        this.ctx.fillText(this.options.seriesName, this.canvas.width/2,this.canvas.height);
        this.ctx.restore();  
        ...

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

var myBarchart = new Barchart(
    {
        canvas:myCanvas,
        seriesName:"Vinyl records",
        padding:20,
        gridScale:5,
        gridColor:"#eeeeee",
        data:myVinyls,
        colors:["#a55ca5","#67b6c7", "#bccd7a","#eb9743"]
    }
);
myBarchart.draw();

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

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

<html>
<body>
    <canvas id="myCanvas" style="background: white;"></canvas>
    <legend for="myCanvas"></legend>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

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

var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 300;
myCanvas.height = 300;
  
var ctx = myCanvas.getContext("2d");

function drawLine(ctx, startX, startY, endX, endY,color){
    ctx.save();
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.lineTo(endX,endY);
    ctx.stroke();
    ctx.restore();
}

function drawBar(ctx, upperLeftCornerX, upperLeftCornerY, width, height,color){
    ctx.save();
    ctx.fillStyle=color;
    ctx.fillRect(upperLeftCornerX,upperLeftCornerY,width,height);
    ctx.restore();
}

var myVinyls = {
    "Classical music": 10,
    "Alternative rock": 14,
    "Pop": 2,
    "Jazz": 12
};

var Barchart = function(options){
    this.options = options;
    this.canvas = options.canvas;
    this.ctx = this.canvas.getContext("2d");
    this.colors = options.colors;
 
    this.draw = function(){
        var maxValue = 0;
        for (var categ in this.options.data){
            maxValue = Math.max(maxValue,this.options.data[categ]);
        }
        var canvasActualHeight = this.canvas.height - this.options.padding * 2;
        var canvasActualWidth = this.canvas.width - this.options.padding * 2;

        //drawing the grid lines
        var gridValue = 0;
        while (gridValue <= maxValue){
            var gridY = canvasActualHeight * (1 - gridValue/maxValue) + this.options.padding;
            drawLine(
                this.ctx,
                0,
                gridY,
                this.canvas.width,
                gridY,
                this.options.gridColor
            );
            
            //writing grid markers
            this.ctx.save();
            this.ctx.fillStyle = this.options.gridColor;
            this.ctx.textBaseline="bottom"; 
            this.ctx.font = "bold 10px Arial";
            this.ctx.fillText(gridValue, 10,gridY - 2);
            this.ctx.restore();

            gridValue+=this.options.gridScale;
        }      
 
        //drawing the bars
        var barIndex = 0;
        var numberOfBars = Object.keys(this.options.data).length;
        var barSize = (canvasActualWidth)/numberOfBars;

        for (categ in this.options.data){
            var val = this.options.data[categ];
            var barHeight = Math.round( canvasActualHeight * val/maxValue) ;
            drawBar(
                this.ctx,
                this.options.padding + barIndex * barSize,
                this.canvas.height - barHeight - this.options.padding,
                barSize,
                barHeight,
                this.colors[barIndex%this.colors.length]
            );

            barIndex++;
        }

        //drawing series name
        this.ctx.save();
        this.ctx.textBaseline="bottom";
        this.ctx.textAlign="center";
        this.ctx.fillStyle = "#000000";
        this.ctx.font = "bold 14px Arial";
        this.ctx.fillText(this.options.seriesName, this.canvas.width/2,this.canvas.height);
        this.ctx.restore();  
        
        //draw legend
        barIndex = 0;
        var legend = document.querySelector("legend[for='myCanvas']");
        var ul = document.createElement("ul");
        legend.append(ul);
        for (categ in this.options.data){
            var li = document.createElement("li");
            li.style.listStyle = "none";
            li.style.borderLeft = "20px solid "+this.colors[barIndex%this.colors.length];
            li.style.padding = "5px";
            li.textContent = categ;
            ul.append(li);
            barIndex++;
        }
    }
}


var myBarchart = new Barchart(
    {
        canvas:myCanvas,
        seriesName:"Vinyl records",
        padding:20,
        gridScale:5,
        gridColor:"#eeeeee",
        data:myVinyls,
        colors:["#a55ca5","#67b6c7", "#bccd7a","#eb9743"]
    }
);

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

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

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

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