Построение графика на JavaScript. #2
SVG - формат для отрисовки графики, которая не будет портиться при изменении разрешения. В этом видео мы, используя JavaScript, научимся рисовать линейный график на основе произвольных данных.
Код для подключения шрифтов и библиотеки (перейдите по ссылке и у вас появится необходимый код): gist.github.com/Ortyommm/815d...
Туториал по SVG - • Введение в SVG. #1 - ...
График на github - github.com/Ortyommm/line-char...
Таймкоды:
00:00 - Вступление
00:15 - Подготовка
03:20 - Первоначальные данные
03:58 - Создание класса LineChart
06:20 - createElementNS или createElement ?
08:19 - Создание класса Chart
12:45 - Добавление SVG в контейнер
13:44 - Отрисовка линии графика
22:35 - Zoom графика
26:50 - Сдвиг графика
29:30 - Отступы у графика
35:44 - Построение отметок по оси X
42:16 - Построение отметок по оси Y
50:50 - Отрисовка точек
55:00 - Подсказка при наведении на точку
01:00:18 - Финальные штрихи
01:03:48 - Что можно улучшить
01:05:02 - Заключение
Пікірлер: 22
Что-то мне подсказывает, что получилось весьма сложно... Напишите, как вам. И может лучше было бы разбить на несколько частей, а не в одной большой всё уместить?
@tuku_mann
2 жыл бұрын
супер! как раз то, что нужно при разработке на Ангуляре 😊
@user-zw8uw1wd4z
2 жыл бұрын
Привет, получилось очень классно. Извини за глупый вопрос, но как подключить библиотеку поппер через html, я скопировал скрипт в html(как ты), но js его не видит.
@user-hj2jk2qz1d
2 жыл бұрын
@@user-zw8uw1wd4z проверь в панели Network консоли разработчика, идёт ли запрос для поппера. Нажми в браузере F12, потом выбери среди панелей Network, потом можешь выбрать JS. Я правильно понял, что объект Popper у тебя undefined?
@user-zw8uw1wd4z
2 жыл бұрын
@@user-hj2jk2qz1d Спасибо, всё заработало. Ты зайка.
У меня нет подходящих матов, чтобы выразить эмоции на сколько восхитительна подача материала!!!
Привет, отличные видосы, вот бы побольше подобного. Полезно, легко слушать, понятно. Спасибо :)
Давненько ждал продолжения. Спасибо
Было бы интересно увидеть подобный урок с графиком на canvas
хорошее видео, очень подробно всё. но без типизации уже глаза режет
Круто
Доброго времечка! А можно урок построения графика в реальном времени. Например данные берутся от 2-х акселерометров(подключенных к ардуино) и строятся 2 графика на одной сетке... ?
Прекрасный урок. Но он был бы прекраснее если бы мы работали с импортами из разных файлов (не фронтендер поэтому не знаю как правильно это у вас называется) Просто потому что так было бы понятней Но все равно спасибо!
Большое спасибо, прям то что нужно! А как называется тема подсветки кода?)
@user-hj2jk2qz1d
Жыл бұрын
One dark pro
А можно ли как-то на SVG сделать редактируемый график? При перемещении мышью за круглые точки чтоб колено ломаной двигалось в след за мышью?
@user-hj2jk2qz1d
2 жыл бұрын
Да, можно такое сделать. Поставить слушатель событий на точку, менять координаты у линии (path).
Качество видео 360р - ужас, ничего не видно ...
@user-hj2jk2qz1d
2 жыл бұрын
видео не обработалось на ютубе, думал, что оно успеет. Через несколько часов будет норм
@user-hj2jk2qz1d
2 жыл бұрын
всё, уже стало хорошо
@NoName-pb8cv
2 жыл бұрын
@@user-hj2jk2qz1d А извиняться не нужно - Вы сделали шикарный БЕСПЛАТНЫЙ урок и этого уже достаточно: всем кого не устраивает - welcome на платные курсы (извинения уберите).
@NoName-pb8cv
2 жыл бұрын
@@user-hj2jk2qz1d Да, действительно, теперь можно видеть код.