Круговая и кольцевая svg диаграммы на HTML5 с нуля. Построение анимированной круговой диаграммы на jQuery

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

На первый взгляд задача кажется простой: делаем круг, вращаем его и скрываем часть за маской. Но на деле все оказывается несколько сложнее. CSS не подготовлен для решения таких задач, даже при использовании препроцессоров наподобие SASS & Compass. Мы всегда боремся, когда приходится делать различные формы, а особенно при определении стилей и анимации для них. Большая часть рабочего времени уходит на то. чтобы получить что-то работающее, а в жертву приносится семантичность кода и его поддержка.

Зачем делаем?

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

Хотя есть несколько изумительных инструментов для управления круговыми диаграммами (в основном, на JavaScript), мы тем не менее сделаем такой элемент только на CSS и даже анимируем его с помощью нескольких трюков.

Семантичность кода будет так себе! Но сопровождение можно сделать достаточно удобным.

HTML

Нам нужно 3 разных элемента:

• spinner: половинка круга, которая будет вращаться;
• mask: данный элемент скрывает вращающийся круг в ходе первых 50% анимации;
• filler: данный элемент заполняет круг в ходе последних 50% анимации.

И все три элемента должны иметь одного родителя для абсолютного позиционирования:

Так как spinner и filler являются двумя половинками одного круга, то мы будем использовать для них класс.pie .

CSS

Родительский элемент получает размеры и абсолютное позиционирование контекста для таймера:

Wrapper { width: 250px; height: 250px; position: relative; background: white; }

Важно, чтобы ширина и высота были равны, чтобы получить круг и все работало.

Элементы "spinner " и "filler " используют данный код CSS:

Pie { width: 50%; height: 100%; position: absolute; background: #08C; border: 10px solid rgba(0,0,0,0.4); }

Они имеют ширину равную 50% родительского элемента, так они являются двумя частями одного круга, а их высота равна высоте родительского элемента. Также мы определяем для них одинаковый цвет и рамку.

Элемент "spinner"

Spinner { border-radius: 125px 0 0 125px; z-index: 200; border-right: none; animation: rota 10s linear infinite; }

Делаем его полукругом с помощью свойства border-radius на верхнем левом и нижнем левом углах. Также определяем положительное значение для z-index , чтобы разместить его поверх заполняющего элемента, но ниже маски.

Затем добавляем animation длительностью 10 секунд. Об анимации мы поговорим позже.

Элемент "filler"

Filler { border-radius: 0 125px 125px 0; z-index: 100; border-left: none; animation: fill 10s steps(1, end) infinite; left: 50%; opacity: 0; }

Для данного элемента устанавливаем border-radius и z-index , удаляем border-left , и делаем анимацию длительностью 10секунд. Для данного элемента animation-timing-function не получает значения linear , но будет steps(1, end) . Это значит, что animation будет выполняться мгновенно.

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

Элемент "mask"

Mask { width: 50%; height: 100%; position: absolute; z-index: 300; opacity: 1; background: inherit; animation: mask 10s steps(1, end) infinite; }

Маска присутствует с начала анимации, поэтому ее непрозрачность имеет значение 1, а фон наследуется от родительского элемента (чтобы она была невидима). Чтобы закрывать вращающийся элемент, она будет иметь те же размеры, а свойство z-index устанавливается в значение 300.

Кадры анимации

@keyframes rota { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes fill { 0% { opacity: 0; } 50%, 100% { opacity: 1; } } @keyframes mask { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }

Первая анимация (rota) используется для элемента spinner . Он постепенно вращается от 0 до 360 градусов за 10 секунд.

Вторая анимация (fill) используется для элемента filler . Он немедленно изменяет непрозрачность с 0 до 1 по истечении 5 секунд.

Последняя анимация (mask) используется для элемента mask . Он немедленно изменяет непрозрачность с 1 до 0 по истечении 5 секунд.

Анимация имеет следующий вид:

• T0 - элемент spinner слева, скрыт маской. Элемент filler скрыт.
• T1 - элемент spinner начинает вращаться по часовой стрелке и медленно появляется из-за маски.
• T2 - элемент spinner r повернут на угол 360/10*2 = 72° продолжает вращаться.
• T3 - элемент spinner повернут на угол 360/10*3 = 108° продолжает вращаться.
• T4 - элемент spinner повернут на угол 360/10*4 = 144° продолжает вращаться.
• T5 - элемент spinner повернут на угол 360/10*5 = 180° продолжает вращаться. В данный момент элемент filler мгновенно становится видимым, а маска скрывается.
• T6 - элемент spinner повернут на угол 360/10*6 = 216° продолжает вращаться.
• T7 - элемент spinner повернут на угол 360/10*7 = 252° продолжает вращаться.
• T8 -элемент spinner повернут на угол 360/10*8 = 288° продолжает вращаться.
• T9 - элемент spinner повернут на угол 360/10*9 = 324° продолжает вращаться.
• T10 - элемент spinner повернут на угол 360°. Вернулись к точке старта. Сбрасываем анимацию. Маска появляется, а заполняющий элемент скрывается.

Бонус

Несколько дополнительных трюков.

Пауза при наведении курсора

Wrapper:hover .filler, .wrapper:hover .spinner, .wrapper:hover .mask { animation-play-state: paused; }

С помощью данного кода вы можете остановить всю анимацию при наведении курсора на родительский элемент.

Вставляем содержание

Благодаря свойству z-index мы можем легко добавить какое-нибудь содержание в элемент spinner и заставить его вращаться. Попробуйте следующий код:

Spinner:after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; top: 10px; right: 10px; background: #fff; border: 1px solid rgba(0,0,0,0.4); box-shadow: inset 0 0 3px rgba(0,0,0,0.2); }

Препроцессор или переменные CSS

В текущий момент код очень не просто поддерживать. Но если мы используем переменные (в препроцессоре или ожидаемые внутренние переменные CSS), все может стать существенно проще. Например, можно добавить переменные для управления длительностью вместо того, чтобы исправлять код в 3 определениях анимаций.

Если хочется улучшить сопровождаемость кода без использования препроцессоров, можно создать класс с одним управлением длительностью анимаций и добавлять его к 3 дочерним элементам. Например так:

Animation-duration { animation-duration: 10s; }

Недостатки

Данная техника имеет ряд недостатков:

• Не поддерживаются градиенты.
• Не поддерживаются тени.
• Нет адаптивности. Если изменяется размер родительского элемента, то все будет нормально, кроме радиуса закругления рамки. Его придется менять вручную.
• Нет семантичности (4 элемента для одной анимации).

Поддержка браузеров

Так как мы используем анимации CSS, то поддержка в браузерах достаточно скудная:

• Internet Explorer 10
• Firefox 12+
• Chrome
• Safari 5+
• Opera 12+
• iOS Safari 3+
• Android 2+

"Кухня" веб-разработчика отчасти похожа на домашнюю кухню. Разработчик имеет доступ к разнообразию библиотек из готового кода, которые помогут ему сделать веб-приложение практически так же, как повар дома может использовать полуфабрикаты, чтобы приготовить свое блюдо более эффективно. В обоих случаях качество предварительно подготовленных вещей должно быть очень важно. Однако, иногда качество приносится в жертву удобству. Не поймите меня неправильно, удобство - не всегда плохо. Оно может быть полезно, когда плюсы и минусы известны и хорошо проанализированы. Анализируя варианты для круговых и кольцевых диаграмм в HTML, мы можем выделить лишь несколько:

Диаграмма, основанная на элементе Canvas, сгенерированная на клиенте (т.е. JavaScript)

Диаграмма, основанная на SVG и сгенерированная на клиенте (т.е. JavaScript)

Диаграмма, основанная на SVG и сгенерированная на сервере

Готовые библиотеки с использованием Canvas и SVG JavaScript

JavaScript-библиотеки для отрисовки диаграмм часто более удобные и загруженные кучей классных опций типа интерактивности. Вот несколько библиотек:

D3.js

Chartist.js

Google Charts

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

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

Большинство JavaScript-библиотек являются труднодоступными, особенно те, что основаны на элементе Canvas (за исключением Google Charts)

Если информация в диаграмме очень важна (как это было в моей ситуации), должны ли мы рассчитывать на скрипт, выполняющийся на клиенте, чтобы генерировать информацию? Я так не думаю.

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

Моя ситуация

Моей команде нужен был простой компонент, который мог быть собран на сервере и отображать простую информацию об использовании аккаунтов. Кроме того, нашим предпочтением была легкость этого компонента (избежание JavaScript, если возможно); он не должен был быть чрезмерно мудреным или интерактивным, от него нужно было только отображение важных данных.

Дополнительная заметка о диаграммах, основанных на элементе Canvas

Вы могли заметить (если знакомы с созданием диаграмм для веба), что я не включил Chart.js в список рекомендованных библиотек выше. Хотя вы определенно можете ее использовать, стоит иметь в виду, что Chart.js использует элемент Canvas для отрисовки его диаграмм, и содержание элемента не является частью DOM. Следовательно, они недоступны для программ чтения с экрана. Это значит, что вам придется принять дополнительные меры, чтобы убедиться в доступности ваших данных.

Введение в CSS и SVG диаграммы

CSS- и SVG-диаграммы по своей сути более доступные и семантические, чем остальные технологии. Но они могут быть сложными, и, возможно, занимающими больше времени, если писать их код вручную.

CSS-ниндзя Леа Вероу предлагает несколько вариантов создания круговых диаграмм с нуля в ее статье "Designing Flexible, Maintainable Pie Charts With CSS and SVG" ("Разрабатываем гибкие, поддерживаемые круговые диаграммы с помощью CSS и SVG"). Ее методы могут быть применимы и для кольцевых диаграмм.

Робин Рэндл также написал о создании диаграмм чисто с помощью CSS, где он тоже указывает на свои провалы в подходе.

Необъяснимое

Я немного погуглил про SVG и кольцевые диаграммы и столкнулся со статьями Леа Вероу и Робина Рэндла (они упомянуты выше) в дополнении к еще нескольким. Почти во всех из них обсуждалось использование атрибутов stroke-dasharray и stroke-dashoffset в SVG для расположения частей диаграммы. Эти свойства идентичны " stroke " при создании векторов в программах типа Adobe Illustrator.

В некоторых из этих статьей даже обсуждалась анимация в SVG, что есть круто, но это также не то, что я искал.

После моего исследования я смог понять, что использование из SVG вместе с stroke и stroke-dasharray могло обеспечить мне те сегменты вложенной круговой диаграммы, что были мне нужны. Я также понял, что stroke-dashoffset позволит мне сделать "анимацию", или, другими словами, расположить сегмент в том месте круга, где я хотел.

Однако, кажется, я не нашел никакого четкого объяснения тому, как именно работали stroke dash атрибуты и какое они имели отношение к окружности круга. А что было более недостижимым, так это прикрепление нескольких элементов (один за другим) вокруг круга. Еще лучше, какова же формула получения этих относительных позиций с использованием уникальных/динамических размеров сегментов и stroke-атрибутов SVG?

Итак, я стал полон решимости выяснить это для себя.

Примечание: Если вы нашли какие-либо ресурсы, объясняющие эти концепты, пожалуйста, поделитесь. Как сделать SVG-диаграмму своими руками Объяснение stroke-dasharray и stroke-dashoffset

Давайте начнем с простой SVG-"кольцевой диаграммы".

Вы заметите пару вещей:

Радиус (атрибут "r") выглядит абсурдно! Почему? Я хотел сделать размеры моих сегментов логичными, доступными для понимания и читабельными. Для того, чтобы достичь этого, я решил основать все на 100% (или на окружности, равной 100). SVG-фигуры масштабируемы, так что не очень важно, насколько большими они в конце концов окажутся; по крайней мере, математика здесь будет проста. Заходим дальше в ту область, что я помню из математики старшей школы: я знаю, что радиус окружности равен r = C/(2π) или r = 100/(2π). Результат равен 15.91549430918952. Безумное число с кучей цифр, да, знаю, но позже оно облегчит нам всем жизни.

Для viewBox заданы значения " 0 0 42 42 ". Они должны быть удвоенными cx & cy (center x и center y) значениями и быть чуть больше, чем диаметр кругов (включая ширину контура).

Там есть с классом " donut-hole ". Вот что гарантированно делает центр белым. Если вам это не важно (в случае с простой круговой диаграммой), тогда этот пункт можно убрать.

Также там есть с классом " donut-ring ". Он служит в качестве светло-серого фона в случае, если секторы не заполняют 100% окружности.

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

Сектора созданы с помощью использования SVG stroke -атрибута, называемого stroke-dasharray . Значение, которое мы задали в примере выше, равняется " 85 15 ".

Если мы будем думать о диаграмме, как о круговой, то из наличия 85%-го сектора можно судить об остатке в 15%. Эти два значения - это массив, разграниченный пробелом. Вот что происходит: создаётся черта в 85 единиц, затем пробел в 15 единиц, затем черта в 85, пробел в 15 и так далее и тому подобное. Но поскольку мы используем круг, и общее значение равняется 100, все повторяется снова. Если мы не сделали второе значение в массиве таким, что оно дополняет первое число до ста, то мы получим третью черту (или часть) или больше. Например, вот stroke-dasharray от " 10 10 ":

Так, на фигуре 2 и фигуре 3 вы можете заметить, что stroke-dasharray не начинается на самом верху (на 12:00). Вместо этого, на самом деле оно начинается на правой стороне (3:00), и движется по часовой стрелке по кругу.

Если мы хотим расположиться (или начать) сверху, то мы должны использовать stroke-dashoffset . Однако в отличие от stroke-dasharray , stroke-dashoffset двигается против часовой стрелки. Итак, нам необходимо будет задать значение " 25 " (на 25% в другую сторону от 3:00, назад к 12:00). Помните, что это - не отрицательное число, потому что offset движется против стрелки.

Как расположить сектора кольцевой диаграммы вокруг SVG

Теперь нам нужно добавить дополнительные сектора вокруг круга. Давайте используем сектор, занимающий 15% от окружности. Оставшийся процент для stroke-dasharray будет равен 85%, независимо от любых других секторов. Следовательно, код будет выглядеть так:

Мы оставили stroke-dashoffset на значении 25 , поэтому зеленый сектор начинается сверху и идет по часовой стрелке, перекрывая первый сектор (розовый).

Очевидно, это не совсем то, чего мы хотели. Мы хотим, чтобы пятнадцатый процент (зеленый цвет) впритык вписывался в пространство, оставленное восемьдесят пятым процентом (розовый). Мы можем корректировать stroke-dashoffset , пока не повезет, но это было бы не так просто, имей мы еще два сектора. Вместо этого нам нужна формула:

Окружность - общая длина всех предыдущих секторов + смещение первого сектора = смещение текущего сектора

Подключая наши числа, мы получаем:

Добавляем больше секторов нашей диаграмме!

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

Результат:

Добавляем текст внутрь диаграммы

Это не была бы кольцевая диаграмма без текста внутри и посередине; для этого и предназначена дыра, правильно? Что ж, добавить текст просто. Мы просто используем элемент , который нативен для SVG-фигур.

10 Beers

Вы заметите, что я разделил текст диаграммы на 2 элемента и сгруппировал их (). Это было сделано затем, чтобы мы могли легче наложить заголовок и число друг на друга, а также расположить их, как одну единицу. Я настроил атрибуты X и Y так, чтобы начать с центра фигуры на линии основания и выровнить их по левому краю.

Как вы можете увидеть, позиционирование не совсем верно, так что нам надо будет украсить его капелькой CSS:

@import url(https://fonts.googleapis.com/css?family=Montserrat:400); .chart-text { font: 16px/1.4em "Montserrat", Arial, sans-serif; fill: #000; -moz-transform: translateY(0.25em); -ms-transform: translateY(0.25em); -webkit-transform: translateY(0.25em); transform: translateY(0.25em); } .chart-number { font-size: 0.6em; line-height: 1; text-anchor: middle; -moz-transform: translateY(-0.25em); -ms-transform: translateY(-0.25em); -webkit-transform: translateY(-0.25em); transform: translateY(-0.25em); } .chart-label { font-size: 0.2em; text-transform: uppercase; text-anchor: middle; -moz-transform: translateY(0.7em); -ms-transform: translateY(0.7em); -webkit-transform: translateY(0.7em); transform: translateY(0.7em); }

Для начала, давайте добавим шрифт Montserrat (просто потому, что он мне нравится). Затем нам надо скорректировать font-size ("размер шрифта") и line-height ("высота строки"). После добавления " translateY " в 0.25em текст немного выравнивается по вертикали, но на этом мы еще не закончили.

Нам надо сделать оба текстовых блока меньше и выровнять их до центра, корректируя font-size дотуда, докуда нам нравится (0.6em для более крупного числа и 0.2em для названия выглядят, что надо) и используя свойство " text-anchor " со значением " middle ".

Теперь текст находится в центре. Все, что осталось, это сделать его в верхнем регистре (это легко) и расположить его индивидуальные элементы, используя " translateY ", чтобы они сложились должным образом. И вот что мы имеем сейчас:

Проблемы с доступностью

Как я уже упомянул ранее, контент SVG является частью DOM, так что он по своей сути более доступный. Это позволяет невероятно легко предоставлять дополнительный контекст для программ, читающих с экрана, через атрибуты и элементы типа заголовков.

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

Помимо этого, мы можем добавить контент-теги и (которые нативны для SVG) и связать их с заголовками ARIA, ID и ролью "предоставления большего количества контекста для программ чтения с экрана".

@import url(https://fonts.googleapis.com/css?family=Montserrat:400); body { font: 16px/1.4em "Montserrat", Arial, sans-serif; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .chart-text { /*font: 16px/1.4em "Montserrat", Arial, sans-serif;*/ fill: #000; -moz-transform: translateY(0.25em); -ms-transform: translateY(0.25em); -webkit-transform: translateY(0.25em); transform: translateY(0.25em); } .chart-number { font-size: 0.6em; line-height: 1; text-anchor: middle; -moz-transform: translateY(-0.25em); -ms-transform: translateY(-0.25em); -webkit-transform: translateY(-0.25em); transform: translateY(-0.25em); } .chart-label { font-size: 0.2em; text-transform: uppercase; text-anchor: middle; -moz-transform: translateY(0.7em); -ms-transform: translateY(0.7em); -webkit-transform: translateY(0.7em); transform: translateY(0.7em); } figure { display: flex; justify-content: space-around; flex-direction: column; margin-left: -15px; margin-right: -15px; } @media (min-width: 768px) { figure { flex-direction: row; } } .figure-content, .figure-key { flex: 1; padding-left: 15px; padding-right: 15px; align-self: center; } .figure-content svg { height: auto; } .figure-key { min-width: calc(8 / 12); } .figure-key { margin-right: 6px; } .figure-key-list { margin: 0; padding: 0; list-style: none; } .figure-key-list li { margin: 0 0 8px; padding: 0; } .shape-circle { display: inline-block; vertical-align: middle; width: 32px; height: 32px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .shape-fuschia { background-color: #ce4b99; } .shape-lemon-lime { background-color: #b1c94e; } .shape-blue { background-color: #377bbc; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; } Beers in My Cellar Belgian Quadrupels Pink chart segment spanning 40% of the whole, which is 4 Belgian Quadrupels out of 10 total. Imperial India Pale Ales Green chart segment spanning 20% of the whole, which is 2 Imperial India Pale Ales out of 10 total. Russian Imperial Stouts Blue chart segment spanning 3% of the whole, which is 3 Russian Imperial Stouts out of 10 total. 10 Beers

Donut chart showing 10 total beers. Two beers are Imperial India Pale Ales, four beers are Belgian Quadrupels, and three are Russian Imperial Stouts. The last remaining beer is unlabeled.

• Belgian Quadrupels (4)
• Imperial India Pale Ales (2)
• Russian Imperial Stouts (3)

Мы также можем добавить ключ легенды для диаграммы в качестве части , отмечая его ролью "представления" и атрибутом aria-hidden , поскольку он и вправду нужен для наглядности.

С щепоткой магии CSS Flexbox мы можем расположить ключ справа и выровнять его по вертикали с диаграммой. Что даст нам финальный продукт:

Поскольку CSS-дизайн с ключом, к которому применяется свойство border-radius и Flexbox могли бы быть отдельными статьями (второе требует гораздо более долгого объяснения), я оставлю эти темы на потом.

Конечные результаты

Как я упоминал ранее, написание кода для объектов SVG вручную может занимать много времени, особенно если принять во внимание тот факт, что существует множество прекрасных JavaScript библиотек, которые построят эти объекты за вас. Но могут быть случаи (как моя ситуация), где вам или вашей команде нужен метод, который не затрагивает JavaScript, тот, что будет собран на стороне сервера.

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

Мои результаты:

• Применять математику к чему-то вроде этого гораздо более интересно, чем в старшей школе.
• Оглядываясь назад, я понимаю, что логика, стоящая за stroke-dasharray и stroke-dashoffset не такая сложная, как я думал изначально.
• Не забудьте добавить сюда дополнительные уровни доступности. В конце концов, доступность нужна не только в угоду программам чтения с экрана. Она также нужна, чтобы сделать ваш контент более доступным и потребляемым всеми людьми и всеми устройствами (включая поисковые системы). Если ваша JavaScript-библиотека не имеет функций доступности, подумайте над ее изменением.

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

На Mac OS X это будет так:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files --disable-web-security

Chromium-browser --disable-web-security

Chrome.exe --disable-web-security

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

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

Создание новой страницы

Начните с создания нового текстового файла с именем barchart.html и наберите в нём:

var data = [ 16, 68, 20, 30, 54 ];

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

Переменная data в скрипте хранит набор точек данных, которые мы отобразим в гистограмме.

Теперь получим указатель на холст и зальём фон серым цветом. Добавьте это в скрипт после переменной data .

// получаем указатель на холст var canvas = document.getElementById("canvas"); // получаем указатель на контекст рисования var c = canvas.getContext("2d"); // рисуем c.fillStyle = "gray"; c.fillRect(0,0,500,500);

Добавляем данные

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