Написать в telegram

Как реализовать динамическую диаграмму для Vue на основе SVG

Скрипты и советы | 21 октября 2020 954

Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании SimbirSoft, CSS, JavaScript, Работа с векторной графикой, VueJS, Vue, JS, диаграмма, динамический график,

Бывает, что на сайте, в корпоративной IT-системе или другом ПО нужно отображать круговые диаграммы с какими-либо данными. Например, это может быть таймер для отсчета времени или индикатор, сколько товаров продано в той или иной категории. Если это статическое изображение, конечно, можно обойтись форматом svg, png или gif. Однако, зачастую нужно показать данные в динамике – например, для мониторинга или просто для привлечения внимания пользователей, для создания красивой анимации при загрузке сайта. Делимся примером, как можно построить диаграмму из элементов SVG с помощью JS и CSS.

Читать дальше →

Источник: Уроки CSS на Хабрахабре

Всё о веб-анимациях в 2022

Анимация — это переход элемента от одного состояния к другому. Пользователям нравится, когда на сайте что-то вращается,...

Подробнее
Анимации на GPU: делаем это правильно

Думаю, все уже знают, что современные браузеры умеют рисовать некоторые части страницы на GPU. Особенно это заметно на...

Подробнее
SEO в разработке eCommerce проектов (20 правил для разработчика)

В последний год мы написали много статей по UX / UI проектированию eCommerce проектов и не только. Концепция проекта и...

Подробнее
[Перевод] Выделение и CSS

Навык выделения текста и других объектов сформировался у пользователей компьютеров много лет назад. Мы выделяем...

Подробнее
[Перевод] Развлекаемся с z-index

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

Подробнее
[Перевод] Веб-технологии, которые могут работать не так, как ожидается

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

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms/

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями