График на JavaScript и canvas

canvas javascript график
Метки: /

В этой статье вы прочитает о том, как сделать график диаграмму на чистом JavaScript и canvas, но должен сказать, что код по сути был скопирован с сайта WebReference.

JS рисование графиков:

Суть работы программы, что она будет создавать столбы диаграммы, их высота будет равна, единице размера умноженное на их значение, но сначала надо сделать HTML.

HTML:

В HTML нам надо только создать <canvas> элемент и задать ему размер, айдишник.

На этом с HTML мы закончили.

CSS:

В CSS просто сделаем рамку, что бы разграничить страницу и график.

Вот результат.

Canvas для графиков

То есть просто квадрат.

JavaScript:

Тут уже всё сложнее, но всё равно будет достаточно легко, сначала получим «canvas» элемент и сделаем так, что бы на нём рисовать 2D рисунки.

С помощью document.getElementById('canvas') получаем элемент, а благодаря  canvas.getContext('2d') настраиваем на то, что бы рисовать 2D объекты.

Теперь надо нарисовать линии и метки, но тут уже не буду так подробно описывать, что к чему, так как, если это будет, статья будет не реально большая, поэтому если что то не понятно, то переходите по этой ссылки.

Здесь мы сделали линии, теперь надо добавить текст и цифры что бы понимать js графики и диаграммы.

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

 js работа с графикой пример

Как видите добавились линии и различные метки для понимания графика.

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

В целом тут всё просто, вот результат.

js рисование графиков

Как видите всё работает, тут больше особо не чего написать.

Вывод:

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

Также смотрите статью: Создание графиков на JavaScript с помощью Chart.js.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Количество оценивших: 2
Средняя оценка: 3,00
Загрузка...

Поделится:

Также рекомендую: