Как построить графики/диаграммы из таблицы используя готовые JS-решения?

Очень интересуют похожие решения для веба. Чтобы какой-либо JS библиотеке можно было «скормить» какую-либо HTML таблицу, а дальше она позволит строить графики различных типов, используя данные этой таблицы.

В гугле готовых решений найти не удалось, обычно находились просто JS библиотеки которым уже нужно предоставлять готовые данные по двум осям. А чтобы она сама могли «читать» таблицу и предоставлять выбор что с чем хотим сравнить и как визуализировать — такого не нашлось(

• Вопрос задан более трёх лет назад
• 1122 просмотра

Комментировать
Решения вопроса 0
Ответы на вопрос 1
Берём какую-либо HTML таблицу:

 
 
имя
 
возраст
 
 
 
Петя
 
13
 
 
 
Саша
 
48
 
 
 
Миша
 
62
 
 
 
 

и скармливаем JS

function BuildChart(labels, values, chartTitle) < var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, < type: 'bar', data: < labels: labels, // Наши метки datasets: [< label: "тест", // Название рядов data: values, // Значения backgroundColor: [ // Задаем произвольные цвета (0.2 - прозрачность) 'rgba(255, 99, 132, 0.7)', 'rgba(54, 162, 235, 0.7)', 'rgba(255, 206, 86, 0.7)', 'rgba(75, 192, 192, 0.7)' ], borderColor: [ // Добавляем произвольный цвет обводки 'rgba(255,99,132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)' ], borderWidth: 1 // Задаем ширину обводки секций >] >, options: < responsive: true, // Даем Chart.js указание реагировать правильно. maintainAspectRatio: false, // Добавляем эту строку, чтобы избежать переключения на полноразмерный вид (высоту/ширину) scales: < yAxes: [< ticks: < beginAtZero: true, >>] >, plugins: < datalabels: < anchor: 'end', /* Возможные варианты: 'center' (по умолчанию): центр элемента 'start': нижняя граница элемента 'end': верхняя граница элемента */ align: 'top', formatter: Math.round, font: < weight: 'bold', // Жирность size: '20' // Размер >> > > >); return myChart; > var table = document.getElementById('dataTable'); var json = []; // Первая строка – это заголовки var headers =[]; for (var i = 0; i < table.rows[0].cells.length; i++) < headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, ''); >// Перебор ячеек for (var i = 1; i < table.rows.length; i++) < var tableRow = table.rows[i]; var rowData = <>; for (var j = 0; j < tableRow.cells.length; j++) < rowData[headers[j]] = tableRow.cells[j].innerHTML; >json.push(rowData); > console.log(json); // Добавляем JSON-значения в массив меток var labels = json.map(function (e) < return e.имя; // Обязательно маленькими буквами >); console.log(labels); // Добавляем JSON-значения в массив значений var values = json.map(function (e) < return e.возраст; // Обязательно маленькими буквами >); console.log(values); var chart = BuildChart(labels, values);

В head подключаем библиотеку и в моём примере плагин, для красивого вывода цифр:

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• JavaScript
• +1 ещё

Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?

• 1 подписчик
• 4 часа назад
• 33 просмотра

Как сделать график на Canvas

Canvas API— это интерфейс для отрисовки графики в браузере. С помощью HTML-элемента можно создавать холст (именно так canvas переводится с английского) и рисовать графику внутри него с помощью JavaScript-кода.

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

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

�� Научитесь создавать анимации

Приходите на наши курсы — изучите самые популярные и интересные техники для создания эффектов на CSS и JavaScript.

Шаг 1. Напишем разметку

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

 
Популярность языков программирования
  
JavaScript % 
  
 Браузер не поддерживает Canvas 
 
 

На что здесь стоит обратить внимание:

• Вместо пути в атрибуте action мы оставили заглушку # . В теории нам может понадобится отправить на сервер данные, введённые пользователем, но пока такая задача не стоит.
• Для каждого поля ввода прописали атрибут name , в котором отражено его назначение. Например, в нашем случае значение javascript поможет нам использовать полученные данные при отрисовке графика.
• Так как значения в полях ввода должны задаваться в процентах, мы установили диапазон допустимых значений с помощью min и max .
• Элементу прописали размер 500×250 пикселей. По умолчанию он равен 300×150 пикселей.
• Внутри оставили информационное сообщение на случай, если браузер пользователя не поддерживает технологию.

Стилизация элементов будет максимально простой, поэтому не будем её разбирать в рамках туториала. Стили можно посмотреть в файле style.css в интерактивной демонстрации.

Шаг 2. Соберём данные для графика

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

const COLORS = [ `#b3d5fc`, `#98d9d9`, `#ede493` ]; const inputElements = document.querySelectorAll(`.chart__input`); const getData = (inputElements) => < return Array.from(inputElements).map((input, index) =>(< name: input.name, value: input.value, color: COLORS[index] >)); >; const items = getData(inputElements); 

Функция getData() получает на вход коллекцию элементов, преобразует её в массив, а затем на основе каждого элемента создаёт объект с нужными для нашего графика данными: названием (язык программирования), значением (популярность в процентах) и цветом (его будем использовать для рисования столбца на графике).

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

Шаг 3. Подготовим холст

Начнём работу над созданием графика. Из элемента можно получить объект, который называется контекстом отрисовки. Объект содержит свойства и методы для рисования, именно с помощью него можно создавать весь контент внутри Canvas, а также манипулировать им. Для получения объекта контекста нужно воспользоваться методом getContext() :

const canvas = document.querySelector(`#canvas`); const ctx = canvas.getContext(`2d`); 

В качестве параметра в метод getContext() мы передали значение 2d — это контекст отрисовки для работы с двумерной графикой. Именно его мы будем использовать, но есть и другие — например, webgl для трёхмерной графики.

Шаг 4. Нарисуем график

Свойства и методы контекста отрисовки

Для отрисовки чего-либо на Canvas нужно вызывать соответствующие методы контекста, а для управления параметрами отрисовки — задавать свойства. Мы рассмотрим те из них, которые понадобятся в туториале. Описание остальных можно найти на MDN.

• fillStyle — свойство определяет цвет заливки элементов. Например, текста или геометрической фигуры.
• font — свойство задаёт параметры шрифта. Синтаксис такой же, как у CSS-свойства font .
• fillText( text , x, y) — отрисовывает строку text , начиная с указанных координат. Координата x определяет расстояние от точки отсчёта по горизонтальной оси, а y — по вертикальной. Начало отсчёта холста расположено в левом верхнем углу.
• fillRect(x, y, width, height) — рисует прямоугольник с заливкой с указанными шириной и высотой, начиная с координат x и y .
• clearRect(x, y, width, height) — очищает прямоугольник, описанный параметрами. Можно использовать для очистки холста при перерисовке.
• translate(x, y) — перемещает начало координат холста на x по горизонтали и y по вертикали относительно начального положения.
• rotate(angle) — поворачивает систему координат по часовой стрелке на указанный угол. Значение задаётся в радианах.
• save() — сохраняет текущее состояние холста, в том числе заданные свойства (например, fillStyle и font ).
• restore() — применяет сохранённое ранее состояние холста.

Константы и перечисления

Этот пункт можно было бы пропустить и, если нам в коде понадобилось бы значение, например, ширины столбца графика, написать просто 50 . Такие числа в программировании называются «магическими» и считаются плохой практикой в реальной разработке. И для этого есть несколько веских причин. Например, если число нужно будет изменить, то это придётся делать в каждом фрагменте программы, где оно используется. А ещё часто из контекста может быть неясно, что это вообще за число. Эту проблему как раз решают константы с понятным названием. Мы будем привыкать сразу писать хороший код, поэтому вынесем все значения в константы. А если несколько констант относятся к одной сущности, объединим их в перечисления.

const MAX_PERCENTAGE = 100; const Gap = < HORIZONTAL: 100, VERTICAL: 30 >const BarCoordinate = < INITIAL_X: 80, INITIAL_Y: 220 >const BarSize = < MAX_HEIGHT: 190, WIDTH: 50 >; const LabelCoordinate = < INITIAL_X: 30, INITIAL_Y: 70 >const Font = < SIZE: `18px`, FAMILY: `Tahoma` >; 

Здесь всё, что нам понадобится для рисования графика — начальные координаты элементов, размеры, отступы, параметры шрифта.

Сдвиг системы координат

При отрисовке графика мы будем использовать сочетание методов translate() и rotate() :

ctx.translate(0, canvas.height); ctx.rotate(-Math.PI/2); 

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

График

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

// Получаем на вход items — массив объектов с данными const renderChart = (items) => < // Очищаем всю область холста ctx.clearRect(0, 0, canvas.width, canvas.height); // Задаём координаты для первого столбца и подписи let currentBarX = BarCoordinate.INITIAL_X; let currentLabelY = LabelCoordinate.INITIAL_Y; // Определяем горизонтальный отступ между соседними столбцами const gapBetweenBars = BarSize.WIDTH + Gap.HORIZONTAL; // Проходим в цикле по каждому объекту в массиве с данными // Для каждого будет нарисован отдельный столбец for (const item of items) < // Вычисляем высоту столбца с учётом процентов из данных const barHeight = (item.value * BarSize.MAX_HEIGHT) / MAX_PERCENTAGE; // Задаём цвет заливки любых элементов, которые будут создаваться дальше ctx.fillStyle = item.color; // Задаём параметры шрифта ctx.font = `$$`; // Запоминаем текущие параметры холста ctx.save(); // Сдвигаем начало коодинат вниз по оси y на величину canvas.height ctx.translate(0, canvas.height); // Поворачиваем систему координат на 90 градусов против часовой стрелки // Math.PI/2 — перевод 90 градусов в радианы ctx.rotate(-Math.PI/2); // В изменённой системе координат рисуем текст снизу вверх ctx.fillText(item.name.toUpperCase(), LabelCoordinate.INITIAL_X, currentLabelY); // Возвращаемся к изначальной системе координат ctx.restore(); // Рисуем столбец // Отрицательное значение — отрисовка снизу вверх ctx.fillRect(currentBarX, BarCoordinate.INITIAL_Y, BarSize.WIDTH, -barHeight); // Для следующего столбца обновляем координаты с учётом отступа currentBarX += gapBetweenBars; currentLabelY += gapBetweenBars; > >; 

Вы заметили, что в самом начале мы очистили весь холст? Если этого не сделать, изображения будут накладываться друг на друга. В данном случае такой вариант не подходит, потому что мы хотим, чтобы при каждом клике на кнопку «Показать график» происходила перерисовка с учётом новых данных. Именно эту функциональность нам осталось запрограммировать.

Шаг 5. Реализуем отрисовку графика при отправке формы

У нас уже есть функция getData() , которая возвращает данные, и renderChart() , способная отрисовать график. Осталось только связать их вместе при клике на кнопку «Показать график».

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

const formElement = document.querySelector(`.chart__data`); formElement.addEventListener(`submit`, (evt) => < // Отменяем действие по умолчанию — отправку формы на сервер (которого нет) evt.preventDefault(); // Отрисовываем график renderChart(getData(inputElements)); // Сбрасываем значения полей ввода formElement.reset(); >); 

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

Полезности

• Canvas tutorial на MDN.
• HTML5 Canvas cheat sheet. Шпаргалка с основными свойствами и методами 2d контекста, разбитыми на категории.
• The HTML5 Canvas Handbook. Справочник по Canvas с примерами.
• 10 крутых примеров работы HTML5 Canvas. Не самые практичные, но иногда это и не главное.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Программируемая графика

Обратим внимание на заголовок нашего Web-сайта. Как-то неказисто он выглядит – обычный текст без всяких изысков. И это в то время, когда большинство Web-сайтов щеголяют шикарными графическими логотипами. Почему у нас такого нет?

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

Существует и другой путь – задействовать возможности программируемой графики, предлагаемые HTML 5. Они позволяют нарисовать любую, даже весьма сложную фигуру программно, из Web-сценария. Причем пользоваться этими возможностями не так и сложно — достаточно уяснить пару концепций и выучить несколько десятков методов.

Канва

Начнем сразу с первой концепции, на основе которой работает программируемая графика HTML 5 и которую нам нужно уяснить. Все рисование выполняется в особом элементе Web-страницы, еще нам не встречавшемся, – в канве (ее еще называют холстом). В других элементах (абзацах, заголовках, таблицах, графических изображениях и пр.) программное рисование не работает.

Канву создают с помощью парного тега :

имя >» [WIDTH color: #008000;»>ширина >»] [HEIGHT color: #008000;»>высота >»]>

Мы уже знаем, что рисование в канве выполняется программно, в Web-сценарии. А перед тем как что-то нарисовать, нам придется получить доступ к канве. Сделать это проще всего через имя, заданное атрибутом тега ID . Именно поэтому данный атрибут тега помечен здесь как обязательный.

Необязательные атрибуты тега WIDTH и HEIGHT задают, соответственно, ширину и высоту канвы в пикселах (по умолчанию 300×150 пикселов).

ВНИМАНИЕ!
Задавать размеры канвы с помощью стилей CSS не рекомендуется.

Вот HTML-код, создающий на странице канву cnv размером 400×300 пикселов:

Канва представляется как экземпляр объекта Web-обозревателя HTMLCanvasElement , производный от объекта HTMLElement . Для нас будет полезен только единственный метод этого объекта, который мы скоро рассмотрим.

Контекст рисования

Рисование на канве выполняется с помощью особых свойств и методов объекта. нет, не HTMLCanvasElement , а CanvasRenderingContext2D . Этот объект представляет так называемый контекст рисования, который можно рассматривать как набор инструментов, используемый для рисования на данной канве.

Значит, перед тем как начать рисование, нам придется как-то получить экземпляр объекта Web-обозревателя CanvasRenderingContext2D для данной канвы. Это выполняется вызовом единственного метода getContext объекта HTMLCanvasElement :

Мы видим, что метод getContext принимает единственный параметр — строку «2d» . Возвращает он то, что нам нужно, – экземпляр объекта CanvasRenderingContext2D , представляющий контекст рисования данной канвы.

Напишем небольшой Web-сценарий, который помещает в переменную ctxCanvas контекст рисования для ранее созданной канвы cnv :

var htelCanvas = Ext.getDom(«cnv»);

var ctxCanvas = htelCanvas.getContext(«2d»);

Впоследствии мы будем пользоваться этим контекстом рисования для наших примеров.

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

ВНИМАНИЕ!
Все свойства и методы, рассматриваемые далее, принадлежат объекту CanvasRenderingContext2D , если об этом не сказано специально.

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

Рисование простейших фигур

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

Для рисования прямоугольника без заливки (т. е. одного лишь контура прямоугольника) предназначен метод strokeRect объекта CanvasRenderingContext2D :

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

ctxCanvas.strokeRect(20, 20, 360, 260);

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

Как видим, формат его вызова такой же, как у метода strokeRect :

ctxCanvas.fillRect(40, 40, 320, 220);

Весьма полезный для создания сложных фигур метод clearRect очищает заданную прямоугольную область от любой присутствовавшей там графики:

И его формат вызова схож с форматом вызова метода strokeRect .

Вот выражения, которые рисуют большой прямоугольник с заливкой, занимающий всю канву cnv , после чего создают в его середине прямоугольную «прореху»:

ctxCanvas.fillRect(0, 0, 400, 300);

ctxCanvas.clearRect(100, 100, 200, 100);

А это выражение очищает канву от всей присутствующей на ней графики:

ctxCanvas.clearRect(0, 0, 400, 300);

Задание цвета, уровня прозрачности и толщины линий

Во время работы с канвой нам придется задавать цвета линий и заливок, уровень их прозрачности и толщину линий. Это выполняется с помощью особых свойств объекта CanvasRenderingContext2D .

Свойство strokeStyle задает цвет линий контура. Все фигуры, которые мы впоследствии нарисуем, будут иметь контур данного цвета. Цвет задают в виде строки либо с именем цвета, либо в привычном нам формате #RRGGBB , либо в двух других форматах, которые мы сейчас рассмотрим.

Вот первый формат:

Здесь все три составляющие цвета имеют вид десятичных чисел от 0 до 255.

Второй формат позволяет дополнительно задать уровень прозрачности рисуемых линий:

Три составляющие цвета также представляют собой десятичные числа от 0 до 255. Уровень прозрачности задают в виде числа от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

Все четыре выражения задают непрозрачный красный цвет линий контура:

ctxCanvas.strokeStyle = «rgb(255, 0, 0)»;

ctxCanvas.strokeStyle = «rgb(255, 0, 0, 1)»;

А вот выражение, задающее для линий контура полупрозрачный черный цвет:

ctxCanvas.strokeStyle = «rgb(0, 0, 0, 0.5)»;

Изначально, сразу после загрузки и вывода канвы на Web-страницу, линии контура будут иметь черный цвет.

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

Вот выражение, задающее тускло-зеленый непрозрачный цвет заливки:

ctxCanvas.fillStyle = «rgb(0, 127, 0)»;

Еще один пример иллюстрирует листинг 22.1.

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

ВНИМАНИЕ!
Нельзя присваивать значение свойства strokeStyle свойству fillStyle и наоборот. Это вызовет ошибку в Web-сценарии.

Свойство lineWidth задает толщину линий в пикселах в виде числа.

ctxCanvas.strokeRect(20, 20, 360, 260);

Этот Web-сценарий рисует прямоугольник без заливки линиями толщиной 20 пикселов.

Свойство globalAlpha , возможно, также нам пригодится. Оно позволяет задать уровень прозрачности для любой графики, которую мы впоследствии нарисуем. Уровень прозрачности также задается в виде числа от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

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

Графики и диаграммы

На сайтах иной раз приходится использовать разные диаграммы, что позволяют наглядно и доступно донести данные до пользователя. Раньше подобные графики делали в Excel, а затем вставляли на сайт картинкой. Но мы ведь живём в век информационных технологий, поэтому хочется вставить диаграмму быстро, просто, да ещё чтобы она была при этом интерактивной и красивой. И вот пришёл Гугл и дал нам такой сервис.

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

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

Круговая диаграмма

Такая диаграмма напоминает торт, разрезанный на разного размера куски. Общая сумма всех частей составляет 100%, части делят круг пропорционально своим значениям.

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

Пример 1. Круговая диаграмма

Результат примера показан на рис. 1.

Рис. 1. Вид круговой диаграммы

В том месте документа, куда мы добавляем диаграмму, вставляем следующий код.

Ширину и высоту диаграммы задаём через стили и добавляем идентификатор для работы скрипта. Этот же идентификатор должен быть указан в document.getElementById .

Параметры диаграммы состоят из двух блоков: собственно данные для отображения (переменная data ) и настройки (переменная options ). Первая строка в data задаёт названия последующих колонок и хотя она никак не выводится, без неё отображение происходит некорректно. В options пишется заголовок диаграммы, также можно указать трёхмерность и другие настройки, все они являются необязательными и если не заданы, то принимаются по умолчанию.

Диаграмма получается интерактивной, её части подсвечиваются если навести на них курсор или на легенду.

Примеры, список параметров и описание круговой диаграммы доступны по этому адресу: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

Гистограмма

Гистограмма — это столбчатая диаграмма, которая удобна для сравнения разных значений между собой. В качестве примера возьмём добычу нефти в XIX веке в России и США (рис. 2). На оси абсцисс (горизонтальная ось) нанесены годы, на оси ординат (вертикальная ось) — добыча нефти в тысячах тонн. Высота прямоугольников соответствует указанному значению.

Рис. 2. Гистограмма

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

Пример 2. Гистограмма

Для начала добавляем тег и указываем ему желаемую ширину и высоту с помощью стилей. Также важен идентификатор через который скрипт будет вставлять выбранный график в элемент . Сам скрипт в сравнении с предыдущим примером сохраняет свою структуру и состоит из двух редактируемых частей — собственно данные для отображения на графике и различные его настройки. Через параметры hAxis и vAxis добавим для наглядности заголовки осей.

Резюме

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

Сами графики выводятся достаточно оперативно, к тому же вызываемые файлы при первой загрузке кэшируются, поэтому последующее отображение графиков на сайте происходит быстрее. Поддерживаются все браузеры, включая старые версии Internet Explorer.

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

Графики и диаграммы

На сайтах иной раз приходится использовать разные диаграммы, что позволяют наглядно и доступно донести данные до пользователя. Раньше подобные графики делали в Excel, а затем вставляли на сайт картинкой. Но мы ведь живём в век информационных технологий, поэтому хочется вставить диаграмму быстро, просто, да ещё чтобы она была при этом интерактивной и красивой. И вот пришёл Гугл и дал нам такой сервис.

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

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

Круговая диаграмма

Такая диаграмма напоминает торт, разрезанный на разного размера куски. Общая сумма всех частей составляет 100%, части делят круг пропорционально своим значениям.

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

Пример 1. Круговая диаграмма

Результат примера показан на рис. 1.

Рис. 1. Вид круговой диаграммы

В том месте документа, куда мы добавляем диаграмму, вставляем следующий код.

Ширину и высоту диаграммы задаём через стили и добавляем идентификатор для работы скрипта. Этот же идентификатор должен быть указан в document.getElementById .

Параметры диаграммы состоят из двух блоков: собственно данные для отображения (переменная data ) и настройки (переменная options ). Первая строка в data задаёт названия последующих колонок и хотя она никак не выводится, без неё отображение происходит некорректно. В options пишется заголовок диаграммы, также можно указать трёхмерность и другие настройки, все они являются необязательными и если не заданы, то принимаются по умолчанию.

Диаграмма получается интерактивной, её части подсвечиваются если навести на них курсор или на легенду.

Примеры, список параметров и описание круговой диаграммы доступны по этому адресу: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

Гистограмма

Гистограмма — это столбчатая диаграмма, которая удобна для сравнения разных значений между собой. В качестве примера возьмём добычу нефти в XIX веке в России и США (рис. 2). На оси абсцисс (горизонтальная ось) нанесены годы, на оси ординат (вертикальная ось) — добыча нефти в тысячах тонн. Высота прямоугольников соответствует указанному значению.

Рис. 2. Гистограмма

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

Пример 2. Гистограмма

Для начала добавляем тег и указываем ему желаемую ширину и высоту с помощью стилей. Также важен идентификатор через который скрипт будет вставлять выбранный график в элемент . Сам скрипт в сравнении с предыдущим примером сохраняет свою структуру и состоит из двух редактируемых частей — собственно данные для отображения на графике и различные его настройки. Через параметры hAxis и vAxis добавим для наглядности заголовки осей.

Резюме

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

Сами графики выводятся достаточно оперативно, к тому же вызываемые файлы при первой загрузке кэшируются, поэтому последующее отображение графиков на сайте происходит быстрее. Поддерживаются все браузеры, включая старые версии Internet Explorer.

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

График функции на JavaScript

Необходимо с помощью JavaScript построить график функции y = х^2 + (е^2x)/(х-2) где e — экспонента (в степени 2*x ), x = -5 и с шагом в 0.1 (т.е. -5 + 0.1 ) до 10 (можно и до 1 ). Прошу помощи, или хотя бы ссылку на ресурс где объясняется как это можно сделать. Спасибо за внимание.

Отслеживать
56k 10 10 золотых знаков 83 83 серебряных знака 136 136 бронзовых знаков
задан 6 мая 2019 в 10:32
Danny Ocean Danny Ocean
57 2 2 серебряных знака 8 8 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

вот вам y = x^2 на интервале [-2,2]

let y = x => x*x; // функция let z = 40; // масштаб let c = document.querySelector('canvas'); let ctx = c.getContext('2d'); // центровочка ctx.translate(c.width/2, c.height/2) // сетка ctx.beginPath(); for (let x = -3; x ctx.stroke(); // график функции ctx.strokeStyle = "red"; ctx.lineWidth = 3; ctx.beginPath(); for (var i = -2; i ctx.stroke();

Отслеживать
ответ дан 6 мая 2019 в 10:44
Stranger in the Q Stranger in the Q
56k 10 10 золотых знаков 83 83 серебряных знака 136 136 бронзовых знаков

подсматривая в Ваш код, решил сам нарисовать график этой функции. Но график у меня получился зеркально перевернутый. Обратил внимание, что Ваш график развернут, за счет минуса в этой строке ctx[i?’lineTo’:’moveTo’](i*z, -y(i)*z); . Собственно, вопрос: зачем там минус? Для красоты итогового графика или это необходимость?

28 фев 2020 в 15:46
@Дмытрык в математике принято, что ось y смотрит вверх, так вот у канвы y — вниз, отсюда и минус
28 фев 2020 в 15:49
Понял — для необходимой красоты)
28 фев 2020 в 15:49
@Дмытрык просто чтобы верх юыл где принято
28 фев 2020 в 15:50

Вот вариант при помощи svg , рисуем суперформулу.

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

, где

function superformula(phi, r, m1, m2, n1, a, b, n2, n3) < with (Math) < // считаем значение значение суперформулы для угла phi let d = pow( pow(abs(cos(m1*phi/4))/a, n2) + pow(abs(sin(m2*phi/4))/b, n3), -1/n1) * r; // переводим в декартову систему координат return `$,$`; > > // считаем n значений для углов в диапазоне [0, 2*PI] через равные промежутки // и собираем все значение в команды пути для svg path function pathD(n, params) < return `M$superformula(i/n*Math.PI*2, . params))>Z`; > document.querySelectorAll('path[superformula]').forEach(path => < path.setAttribute('d', pathD(200, path.getAttribute('superformula').split(','))) >)

body < margin:0; overflow: hidden; >svg < display: inline-block; height: 90vh; margin-left: -25px; >path

Графика для Web

Современным веб-сайтам и веб-приложениям часто требуется отображать графику. Статические изображения легко отобразить с помощью элемента , или с помощью CSS-свойства background-image . Часто требуется создавать графику на лету, или модифицировать её каким-либо образом после. Как это проделать можно узнать в следующих статьях.

2D графика

Масштабируемая Векторная Графика (Scalable Vector Graphics) позволяет рисовать линии, кривые, и другие геометрические фигуры. С их помощью можно создавать масштабируемые изображения, которые не теряют в качестве при изменении размера в отличии от растровой графики.

3D графика

Руководство по быстрому старту с WebGL. WebGL предоставляет API для работы с 3D графиками в веб. Эта технология позволяет вам использовать стандартный OpenGL ES в веб контексте.

Видео

Встраивание видео и аудио в HTML документ и управление проигрыванием.

RTC в WebRTC означает Real-Time Communications, технология которая позволяет стримить аудио/видео и данные между клиентами браузера (пирами).

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как сделать график на Canvas

Canvas API— это интерфейс для отрисовки графики в браузере. С помощью HTML-элемента можно создавать холст (именно так canvas переводится с английского) и рисовать графику внутри него с помощью JavaScript-кода.

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

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

�� Научитесь создавать анимации

Приходите на наши курсы — изучите самые популярные и интересные техники для создания эффектов на CSS и JavaScript.

Шаг 1. Напишем разметку

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

 
Популярность языков программирования
  
JavaScript % 
  
 Браузер не поддерживает Canvas 
 
 

На что здесь стоит обратить внимание:

• Вместо пути в атрибуте action мы оставили заглушку # . В теории нам может понадобится отправить на сервер данные, введённые пользователем, но пока такая задача не стоит.
• Для каждого поля ввода прописали атрибут name , в котором отражено его назначение. Например, в нашем случае значение javascript поможет нам использовать полученные данные при отрисовке графика.
• Так как значения в полях ввода должны задаваться в процентах, мы установили диапазон допустимых значений с помощью min и max .
• Элементу прописали размер 500×250 пикселей. По умолчанию он равен 300×150 пикселей.
• Внутри оставили информационное сообщение на случай, если браузер пользователя не поддерживает технологию.

Стилизация элементов будет максимально простой, поэтому не будем её разбирать в рамках туториала. Стили можно посмотреть в файле style.css в интерактивной демонстрации.

Шаг 2. Соберём данные для графика

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

const COLORS = [ `#b3d5fc`, `#98d9d9`, `#ede493` ]; const inputElements = document.querySelectorAll(`.chart__input`); const getData = (inputElements) => < return Array.from(inputElements).map((input, index) =>(< name: input.name, value: input.value, color: COLORS[index] >)); >; const items = getData(inputElements); 

Функция getData() получает на вход коллекцию элементов, преобразует её в массив, а затем на основе каждого элемента создаёт объект с нужными для нашего графика данными: названием (язык программирования), значением (популярность в процентах) и цветом (его будем использовать для рисования столбца на графике).

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

Шаг 3. Подготовим холст

Начнём работу над созданием графика. Из элемента можно получить объект, который называется контекстом отрисовки. Объект содержит свойства и методы для рисования, именно с помощью него можно создавать весь контент внутри Canvas, а также манипулировать им. Для получения объекта контекста нужно воспользоваться методом getContext() :

const canvas = document.querySelector(`#canvas`); const ctx = canvas.getContext(`2d`); 

В качестве параметра в метод getContext() мы передали значение 2d — это контекст отрисовки для работы с двумерной графикой. Именно его мы будем использовать, но есть и другие — например, webgl для трёхмерной графики.

Шаг 4. Нарисуем график

Свойства и методы контекста отрисовки

Для отрисовки чего-либо на Canvas нужно вызывать соответствующие методы контекста, а для управления параметрами отрисовки — задавать свойства. Мы рассмотрим те из них, которые понадобятся в туториале. Описание остальных можно найти на MDN.

• fillStyle — свойство определяет цвет заливки элементов. Например, текста или геометрической фигуры.
• font — свойство задаёт параметры шрифта. Синтаксис такой же, как у CSS-свойства font .
• fillText( text , x, y) — отрисовывает строку text , начиная с указанных координат. Координата x определяет расстояние от точки отсчёта по горизонтальной оси, а y — по вертикальной. Начало отсчёта холста расположено в левом верхнем углу.
• fillRect(x, y, width, height) — рисует прямоугольник с заливкой с указанными шириной и высотой, начиная с координат x и y .
• clearRect(x, y, width, height) — очищает прямоугольник, описанный параметрами. Можно использовать для очистки холста при перерисовке.
• translate(x, y) — перемещает начало координат холста на x по горизонтали и y по вертикали относительно начального положения.
• rotate(angle) — поворачивает систему координат по часовой стрелке на указанный угол. Значение задаётся в радианах.
• save() — сохраняет текущее состояние холста, в том числе заданные свойства (например, fillStyle и font ).
• restore() — применяет сохранённое ранее состояние холста.

Константы и перечисления

Этот пункт можно было бы пропустить и, если нам в коде понадобилось бы значение, например, ширины столбца графика, написать просто 50 . Такие числа в программировании называются «магическими» и считаются плохой практикой в реальной разработке. И для этого есть несколько веских причин. Например, если число нужно будет изменить, то это придётся делать в каждом фрагменте программы, где оно используется. А ещё часто из контекста может быть неясно, что это вообще за число. Эту проблему как раз решают константы с понятным названием. Мы будем привыкать сразу писать хороший код, поэтому вынесем все значения в константы. А если несколько констант относятся к одной сущности, объединим их в перечисления.

const MAX_PERCENTAGE = 100; const Gap = < HORIZONTAL: 100, VERTICAL: 30 >const BarCoordinate = < INITIAL_X: 80, INITIAL_Y: 220 >const BarSize = < MAX_HEIGHT: 190, WIDTH: 50 >; const LabelCoordinate = < INITIAL_X: 30, INITIAL_Y: 70 >const Font = < SIZE: `18px`, FAMILY: `Tahoma` >; 

Здесь всё, что нам понадобится для рисования графика — начальные координаты элементов, размеры, отступы, параметры шрифта.

Сдвиг системы координат

При отрисовке графика мы будем использовать сочетание методов translate() и rotate() :

ctx.translate(0, canvas.height); ctx.rotate(-Math.PI/2); 

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

График

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

// Получаем на вход items — массив объектов с данными const renderChart = (items) => < // Очищаем всю область холста ctx.clearRect(0, 0, canvas.width, canvas.height); // Задаём координаты для первого столбца и подписи let currentBarX = BarCoordinate.INITIAL_X; let currentLabelY = LabelCoordinate.INITIAL_Y; // Определяем горизонтальный отступ между соседними столбцами const gapBetweenBars = BarSize.WIDTH + Gap.HORIZONTAL; // Проходим в цикле по каждому объекту в массиве с данными // Для каждого будет нарисован отдельный столбец for (const item of items) < // Вычисляем высоту столбца с учётом процентов из данных const barHeight = (item.value * BarSize.MAX_HEIGHT) / MAX_PERCENTAGE; // Задаём цвет заливки любых элементов, которые будут создаваться дальше ctx.fillStyle = item.color; // Задаём параметры шрифта ctx.font = `$$`; // Запоминаем текущие параметры холста ctx.save(); // Сдвигаем начало коодинат вниз по оси y на величину canvas.height ctx.translate(0, canvas.height); // Поворачиваем систему координат на 90 градусов против часовой стрелки // Math.PI/2 — перевод 90 градусов в радианы ctx.rotate(-Math.PI/2); // В изменённой системе координат рисуем текст снизу вверх ctx.fillText(item.name.toUpperCase(), LabelCoordinate.INITIAL_X, currentLabelY); // Возвращаемся к изначальной системе координат ctx.restore(); // Рисуем столбец // Отрицательное значение — отрисовка снизу вверх ctx.fillRect(currentBarX, BarCoordinate.INITIAL_Y, BarSize.WIDTH, -barHeight); // Для следующего столбца обновляем координаты с учётом отступа currentBarX += gapBetweenBars; currentLabelY += gapBetweenBars; > >; 

Вы заметили, что в самом начале мы очистили весь холст? Если этого не сделать, изображения будут накладываться друг на друга. В данном случае такой вариант не подходит, потому что мы хотим, чтобы при каждом клике на кнопку «Показать график» происходила перерисовка с учётом новых данных. Именно эту функциональность нам осталось запрограммировать.

Шаг 5. Реализуем отрисовку графика при отправке формы

У нас уже есть функция getData() , которая возвращает данные, и renderChart() , способная отрисовать график. Осталось только связать их вместе при клике на кнопку «Показать график».

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

const formElement = document.querySelector(`.chart__data`); formElement.addEventListener(`submit`, (evt) => < // Отменяем действие по умолчанию — отправку формы на сервер (которого нет) evt.preventDefault(); // Отрисовываем график renderChart(getData(inputElements)); // Сбрасываем значения полей ввода formElement.reset(); >); 

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

Полезности

• Canvas tutorial на MDN.
• HTML5 Canvas cheat sheet. Шпаргалка с основными свойствами и методами 2d контекста, разбитыми на категории.
• The HTML5 Canvas Handbook. Справочник по Canvas с примерами.
• 10 крутых примеров работы HTML5 Canvas. Не самые практичные, но иногда это и не главное.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.