Написать в telegram

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

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

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

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

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

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

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

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

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

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

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

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

Подробнее
Каскадные Таблицы Стилей / Перевод Сброс стилей с помощью CSS Reset

Данная статья — первая из цикла на тему укрощения CSS. Сегодня мы рассмотрим технологию CSS Reset. Зачем это нужно?...

Подробнее
[Из песочницы] Нетривиальная расстановка элементов на flexbox без media-запросов

Казалось бы, какой пост может быть о CSS Flexbox в 2019 году? Верстальщики уже несколько лет активно используют данную...

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

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

Подробнее

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

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

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

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

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

https://t.me/tcsecms/

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