Зберегти або поділитися
Хоча зараз завдання і не представляється такою неможливою, як це було раніше, до цих пір не існує простого однозначного рішення. Проте, сьогодні існує багато кращих (в порівнянні з методами, наведеними вище), більш підтримуваних способів реалізації кругових діаграм.
Рішення на основі transform
Це рішення є найкращим в плані розмітки: для нього необхідний тільки один елемент, а все інше буде виконано за допомогою псевдоелементів, перетворень і CSS градієнтів. Давайте почнемо з простого елемента:
Тепер давайте припустимо, що нам потрібна кругова діаграма, яка відображає жорстко задані 20%. Над тим, щоб вона була гнучкою, ми попрацюємо пізніше. Спочатку стилізуємо елемент як коло, який буде нашим фоном (рисунок 1):
Малюнок 1 - Наша відправна точка (кругова діаграма, що відображає 0%)
Наша кругова діаграма буде зеленою (а конкретніше, yellowgreen) з коричневим сектором (# 655), що показує частку у відсотках. У нас міг би виникнути спокуса використовувати похилі перетворення для відсоткової частини, але як показують невеликі експерименти, це буде досить неохайним рішенням. Замість цього, ми розфарбуємо ліву і праву частини нашого кола в два кольори і використовуємо обертання псевдоелемента, щоб розкрити тільки ту частку кола, яка нам потрібна.
Щоб розфарбувати праву частину нашого кола в коричневий колір, ми скористаємося простим лінійним градієнтом:
Малюнок 2 - Розфарбовування правій частині нашого кола в коричневий колір простим лінійним градієнтом
Як ви можете побачити на малюнку 2, це все, що нам було потрібно. Тепер ми можемо приступити до стилізації псевдоелемента, який буде виступати в якості маски:
Малюнок 3 - Псевдоелемент, що діє як маска, виділений тут за допомогою пунктирною кордону
На малюнку 3 ви можете побачити, як на даний момент розташований наш псевдоелемент щодо елемента кругової діаграми. Зараз він поки не стилізований і не виконує ніяких функцій. Це всього лише невидимий прямокутник. Перед тим, як приступити до його стилізації, давайте зробимо кілька зауважень:
- так як ми хочемо приховати коричневу частину нашого кола. то ми повинні застосувати до псевдоелементу зелений фон, використовуючи background-color: inherit. щоб уникнути дублювання при призначенні йому такого ж кольору фону, як у батьківського елементу;
- ми хочемо, щоб він обертався навколо центру кола. який знаходиться на середині лівого боку псевдоелемента, тому ми повинні задати transform-origin значення 0 50% або просто left;
- ми не хочемо, щоб він був прямокутником, так як при цьому він виходить за краї кругової діаграми, тому ми повинні або застосувати overflow: hidden до .pie. або задати йому border-radius. щоб зробити його півколом.
Склавши все це разом, ми отримаємо наступний стиль для нашого псевдоелемента;
Малюнок 4 - Наш псевдоелемент (показаний з пунктирною кордоном) після закінчення стилізації
Примітка: Не використовуйте background: inherit ;, замість backround-color: inherit ;, так як в цьому випадку буде успадкований і градієнт!
Тепер наша кругова діаграма виглядає, як на малюнку 4. Тут і починається найцікавіше! Ми можемо почати обертати псевдоелемент. застосовуючи перетворення rotate (). Для 20%. які ми намагаємося реалізувати, ми можемо використовувати значення 72deg (0.2 × 360 = 72), або .2turn. що більш читаемо. На малюнку 5 ви можете побачити, як це виглядає і для декількох інших значень.
Малюнок 5 - Наша проста кругова діаграма, що показує різні процентні частки, зліва направо: 10% (36deg або .1turn), 20% (72deg або .2turn), 40% (144deg або .4turn)
Можна подумати, що справа зроблена, але, на жаль, не все так просто. Наша кругова діаграма відмінно підходить для відображення процентних часток від 0 до 50%, але якщо ми спробуємо відобразити 60-відсотковий поворот (застосувавши .6turn), вийде те, що зображено на малюнку 6. Але все ж не втрачайте надію, ми можемо це виправити і зробимо це!
Малюнок 6 - Наша кругова діаграма ламається для часткою більше 50% (тут показано для 60%)
Якщо розглядати відображення часткою 50% -100%, як окрему проблему, то можна помітити, що для них ми можемо використовувати перевернуту версію попереднього рішення. коричневий псевдоелемент, що обертається, відповідно, від 0 до .5turn. Таким чином, для частки 60% код псевдоелемента буде виглядати наступним чином:
Малюнок 7 - Наша, тепер правильна, кругова діаграма зі значенням 60%
На малюнку 7 ви можете побачити код в дії. Так як тепер ми розробили спосіб для відображення будь-відсоткової частки, то можемо і анімувати кругову діаграму від 0% до 100% за допомогою CSS анімації. створивши своєрідний індикатор прогресу:
Все добре, але як нам стилізувати кілька статичних кругових діаграм з різними процентними долями, що і є найбільш загальним випадком використання діаграм? В ідеалі, ми хочемо, щоб була можливість надрукувати щось на зразок цього:
і отримати дві кругові діаграми, одна з яких показує 20%, а інша - 60%. По-перше, ми розглянемо, як можна це зробити за допомогою вбудованих стилів, а потім ми завжди можемо написати короткий скрипт для розбору текстового контенту і додати зазначені вбудовані стилі для елегантності коду, інкапсуляції, підтримувані і, можливо, найголовніше, доступності.
Складність в управлінні відсотковою часткою кругової діаграми з вбудованими стилями полягає в тому, що CSS код, який відповідає за установку процентної частки, встановлюється на псевдоелемент. Як ви вже знаєте, ми не можемо встановлювати вбудовані стилі на псевдоелементи. тому нам доведеться бути більш винахідливими.
Примітка. Щоб скористатися стандартними налаштуваннями з колірного спектра без повторів і складних розрахунків можна скористатися наведеними нижче способом. Цей же спосіб ви можете використовувати і в інших випадках. Нижче наведено простий, ізольований приклад використання цього способу.
Рішення приходить з одного з найнесподіваніших місць. Ми збираємося використовувати анімацію, яку вже показали, але яка буде поставлена на паузу. Замість того, щоб запускати її, як звичайну анімацію, ми будемо використовувати негативні затримки анімації, щоб задати положення в будь-якій точці анімації і залишитися там. Здивовані? Так, негативні значення animation-delay не тільки дозволені в специфікації, а й дуже корисні в подібних випадках.
Так як наша анімація припинена, буде показаний тільки перший її кадр (визначається нашим негативним значенням animation-delay). Відсоткова частка, показана на круговій діаграмі, буде дорівнює відсотковій частці, яку становить наш animation-delay в загальній тривалості. Наприклад, з поточної тривалістю 6s. нам необхідно значення animation-delay. рівне -1.2s. щоб показати частку 20%. Для спрощення обчислень ми будемо встановлювати тривалість в 100s. Майте на увазі, що, так як анімація зупинена назавжди, значення її тривалості, яке ми встановлюємо, не грає ніякої іншої ролі.
І останнє запитання: анімація застосовується до псевдоелементу, але ми хочемо встановити вбудований стиль на елемент .pie. Проте, хоча на
І CSS код для цієї анімації стане наступним (правила для .pie не показані, так як залишилися тими ж):
На даний момент ми можемо перетворити розмітку для використання відсотків в якості контенту, як ми спочатку і збиралися зробити, і додати вбудовані стилі animation-delay через простий скрипт:
Зверніть увагу, що ми залишили недоторканим текст, так як він необхідний нам для доступності та зручності використання. Зараз наші кругові діаграми виглядають, як на малюнку 8. Ми повинні приховати текст, який можна зробити доступним через color: transparent так, щоб він залишався обирається і друкувати. Для додаткового глянцю ми можемо помістити значення відсотків в центр кругової діаграми. щоб вони не знаходилися у випадковому місці, коли користувач спробує виділити їх. Щоб зробити це, нам необхідно:
Малюнок 8 - Наш текст перед тим, як ми сховаємо його- конвертувати height діаграми в line-height (або додати значення line-height. рівне height. але це буде безглуздим дублюванням коду, так як line-height буде встановлено в обчислене значення height. що добре);
- задати розмір і положення псевдоелемента за допомогою абсолютного позиціонування. щоб він не штовхав текст вниз;
- додати text-align: center ;. щоб відцентрувати текст по горизонталі.
Остаточний код виглядає так:
Рішення на основі SVG
SVG робить рішення багатьох графічних завдань простіше, і кругові діаграми не є винятком. Проте, замість створення кругової діаграми за допомогою шляхів, що вимагало б складною математики, ми скористаємося невеликою хитрістю.
Тепер застосуємо до нього кілька базових стилів:
Примітка. Як ви знаєте, ці CSS властивості також доступні в якості атрибутів SVG елементу, які могли б бути зручні, якби портирование доставляло занепокоєння.
Малюнок 9 - Наша початкова точка: зелений SVG коло з товстої # 655 обведенням
Наш обведений коло ви можете побачити на малюнку 9. Обведення в SVG складаються не тільки з властивостей stroke і stroke-width. Є багато інших, менш популярних властивостей, пов'язаних з обведення, які дозволяють точно налаштувати їх зовнішній вигляд. Одним з них є stroke-dasharray. призначене для створення пунктирних обводок. Наприклад, ми могли б використовувати його для цього:
Малюнок 10 - Проста пунктирна обведення, створена за допомогою stroke-dasharray
Це означає, що ми хочемо отримати тире довжиною 20 з проміжками довжиною 10. як ті, що зображені на малюнку 10. У цей момент ви можете бути здивовані, що цей SVG приклад має щось спільне з круговими діаграмами. Але все стає ясніше, коли ми застосуємо обведення з довжиною тире 0 і проміжками довжиною більше або дорівнює довжині окружності нашого кола (C = 2πr, або в нашому випадку C = 2π × 30 ≈ 189):
Малюнок 11 - Кілька значень stroke-dasharray і їх результат; зліва направо 0 189; 40 189; 95 189; 150 189
Як ви можете бачити, в першому колі на малюнку 11 це повністю видаляє обведення, і ми залишаємося тільки з зеленим колом. Однак веселість починається, коли ми починаємо збільшувати перше значення (рисунок 11): через такого довгого розриву ми отримаємо вже не пунктирную обведення, а обведення, яка покриває таку процентну частку окружності кола, яку ми вкажемо.
Можливо, ви вже зрозуміли, в яку сторону ми рухаємося: якщо зменшити радіус нашого кола досить, щоб він повністю закривався своєї обведенням, ми, в кінцевому підсумку, отримаємо щось, дуже нагадує кругову діаграму. Наприклад, на малюнку 12 ви можете побачити, як це буде виглядати при застосуванні до кола з радіусом 25 і шириною обведення (stroke-width) 50:
Малюнок 12 - Наше SVG зображення починає нагадувати кругову діаграму
Пам'ятайте: SVG обведення завжди наполовину всередині і наполовину зовні елемента, до якого вони застосовуються. В майбутньому нам буде доступно управління цим поведінкою.
Тепер перетворити це зображення в кругову діаграму, подібну до тих, що ми створили в попередньому рішенні, досить легко: потрібно просто додавати новий зелений круг під обведення і повернути його на 90 ° проти годинникової стрілки так, щоб він починався вгорі в середині. оскільки
Малюнок 13 - Кінцева кругова діаграма з SVG
Ви можете побачити остаточний результат на малюнку 13. Цей метод робить ще простіше анімацію кругової діаграми від 0% до 100%. Нам просто потрібно створити CSS анімацію, яка змінює stroke-dasharray від 0 158 до 158 158:
В якості додаткового удосконалення ми можемо задати певний радіус кола так, щоб довжина його окружності становила (нескінченно близько до) 100, і тому ми зможемо вказувати довжини stroke-dasharray. як відсотки. без будь-яких розрахунків. Оскільки довжина кола дорівнює 2πr, нам необхідний радіус 100 ÷ 2π ≈ 15.915494309, який для наших потреб може бути заокруглений до 16. Також ми задамо розміри SVG в атрибуті viewBox. замість атрибутів width і height. щоб зробити його підстроюваним під розміри його контейнера.
Після цих модифікацій розмітка кругової діаграми, зображеної на малюнку 13, стане наступною:
А CSS стане таким:
і додати вбудований SVG всередину кожного елемента .pie з усіма необхідними елементами і атрибутами. Він також додасть елемент