В этой статье вы прочитает о том, как сделать график диаграмму на чистом JavaScript и canvas, но должен сказать, что код по сути был скопирован с сайта WebReference.
JS рисование графиков:
Суть работы программы, что она будет создавать столбы диаграммы, их высота будет равна, единице размера умноженное на их значение, но сначала надо сделать HTML.
HTML:
В HTML нам надо только создать <canvas> элемент и задать ему размер, айдишник.
1 | <canvas width="500" height="500" id="canvas"></canvas> |
На этом с HTML мы закончили.
CSS:
В CSS просто сделаем рамку, что бы разграничить страницу и график.
1 2 3 | #canvas { border: 1px solid black; } |
Вот результат.
То есть просто квадрат.
JavaScript:
Тут уже всё сложнее, но всё равно будет достаточно легко, сначала получим «canvas» элемент и сделаем так, что бы на нём рисовать 2D рисунки.
1 2 3 4 5 | // Получаем canvas элемент let canvas = document.getElementById('canvas'); // Указываем элемент для 2D рисования let ctx = canvas.getContext('2d'); |
С помощью document.getElementById('canvas') получаем элемент, а благодаря canvas.getContext('2d') настраиваем на то, что бы рисовать 2D объекты.
Теперь надо нарисовать линии и метки, но тут уже не буду так подробно описывать, что к чему, так как, если это будет, статья будет не реально большая, поэтому если что то не понятно, то переходите по этой ссылки.
1 2 3 4 5 6 7 | ctx.fillStyle = "black"; // Задаём чёрный цвет для линий ctx.lineWidth = 2.0; // Ширина линии ctx.beginPath(); // Запускает путь ctx.moveTo(30, 10); // Указываем начальный путь ctx.lineTo(30, 460); // Перемешаем указатель ctx.lineTo(500, 460); // Ещё раз перемешаем указатель ctx.stroke(); // Делаем контур |
Здесь мы сделали линии, теперь надо добавить текст и цифры что бы понимать js графики и диаграммы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // Цвет для рисования ctx.fillStyle = "black"; // Цикл для отображения значений по Y for(let i = 0; i < 6; i++) { ctx.fillText((5 - i) * 20 + "", 4, i * 80 + 60); ctx.beginPath(); ctx.moveTo(25, i * 80 + 60); ctx.lineTo(30, i * 80 + 60); ctx.stroke(); } // Массив с меткам месяцев let labels = ["JAN", "FEB", "MAR", "APR", "MAY"]; // Выводим меток for(var i=0; i<5; i++) { ctx.fillText(labels[i], 50+ i*100, 475); } |
Тут мы сделали по высоте метки допустимых значениях а по ширине в качестве меток пять месяцев, вот результат.
Как видите добавились линии и различные метки для понимания графика.
Последнее что осталось, это сами столбцы, для этого мы сначала создадим массив, где будут хранится значение каждого столбца, после будим проходится по этому массиву циклам и отрисовывать.
1 2 3 4 5 6 7 8 9 10 | // Объявляем массив данных графика let data = [ 10, 53, 39, 54, 21 ]; // Назначаем зелёный цвет для графика ctx.fillStyle = "green"; // Цикл для от рисовки графиков for(var i=0; i<data.length; i++) { var dp = data[i]; ctx.fillRect(40 + i*100, 460-dp*5 , 50, dp*5); } |
В целом тут всё просто, вот результат.
Как видите всё работает, тут больше особо не чего написать.
Вывод:
В этой статье вы узнали, как сделать график диаграмму на чистом JavaScript и canvas, если вам что то не понятно, то скачайте файлы этой программы и разберите и поэкспериментируйте с ним, тогда точно всё поймёте.
Также смотрите статью: Создание графиков на JavaScript с помощью Chart.js.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 4,00
Загрузка...