CSS для анимированных графиков и диаграмм

Почему CSS — это мощный инструмент для графиков? 🎨

Вы когда-нибудь задумывались, как оживить сухие цифры и превратить их в захватывающий визуальный рассказ? CSS — это не только про кнопки и сетки. С его помощью можно создавать плавные, интерактивные графики и диаграммы, которые удивят даже опытных разработчиков.

Главные преимущества:

Лёгкость анимации (без JavaScript!).
Гибкость — адаптируемость под любой экран.
Производительность — браузер оптимизирует CSS-анимации лучше, чем JS.

💡 Совет: CSS-графики идеальны для статичных данных (отчёты, презентации), а для динамических (живые датчики) лучше комбинировать с JS.

Основы: Строим столбчатую диаграмму 📊

Начнём с простого примера — анимированной столбчатой диаграммы. Всё, что нужно, — это <div>-элементы и CSS-свойства height + transition.

<div class="chart">
  <div class="bar" style="--height: 30%;"></div>
  <div class="bar" style="--height: 70%;"></div>
  <div class="bar" style="--height: 45%;"></div>
</div>

.chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 200px;
}

.bar {
  width: 40px;
  height: 0; /* Начальное состояние для анимации */
  background: linear-gradient(to top, #4facfe, #00f2fe);
  transition: height 1s ease-out;
}

/* Активируем анимацию при загрузке */
.bar {
  height: var(--height);
}

🔥 Магия в var(--height)! Кастомные свойства CSS позволяют управлять высотой из HTML.

Круговые диаграммы с `conic-gradient` 🍩

Для круговых диаграмм используем conic-gradient и анимируем его через @keyframes. Вот как отобразить долю в 65%:

.pie-chart {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(#ff9a9e 0% 65%, #fad0c4 65% 100%);
  animation: rotate 2s ease-in-out;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

🌟 Хитрость: Добавьте transform-origin: center;, чтобы анимация вращалась вокруг центра.

Интерактивность: График, который реагирует на наведение 🖱️

Сделаем столбцы диаграммы «подпрыгивающими» при наведении:

.bar:hover {
  transform: translateY(-10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

Добавим плавности:

.bar {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

📌 cubic-bezier — ваш лучший друг для кастомных переходов. Экспериментируйте на cubic-bezier.com.

SVG + CSS: Комбо-удар для сложных графиков 🚀

SVG отлично работает с CSS. Например, анимируем линию на графике:

<svg viewBox="0 0 200 100" class="line-chart">
  <path d="M 0,90 C 50,90 50,10 100,10 S 150,90 200,90" class="line" />
</svg>

.line {
  fill: none;
  stroke: #6a11cb;
  stroke-width: 3;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 3s forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

💡 stroke-dasharray и stroke-dashoffset создают эффект «прорисовки» линии.

Итог: Что запомнить?

CSS-графики — это быстро, гибко и стильно.
Используйте кастомные свойства (--var) для динамических значений.
conic-gradient — простой способ создать круговую диаграмму.
Анимации через @keyframes оживят любой график.
Комбинируйте SVG и CSS для сложных визуализаций.

Попробуйте эти приёмы в своём следующем проекте — и данные заиграют новыми красками!