Запазете или споделете
Въпреки че е задачата и не толкова невъзможното, както беше доскоро, до този момент не е просто едно единствено решение. Въпреки това, днес има много от най-добрите (в сравнение с методите, описани по-горе), поддържан начин за осъществяване на кръгови диаграми.
Решение въз основа трансформира
Това решение е най-доброто по отношение на оформлението, и то изисква само един елемент, а всичко останало ще бъде направено с помощта на псевдо-реформи и CSS градиенти. Да започнем с един прост елемент:
Сега нека да приемем, че имаме нужда от кръгова диаграма, която показва твърдо кодирана 20%. През така че да е гъвкав, ние ще работим по-късно. Стайлинг първи елемент като кръг, който е нашата фон (Фигура 1):
Фигура 1 - Нашата отправна точка (кръгова диаграма показва 0%)
Нашата кръгова диаграма е зелен (и по-специално, yellowgreen) с кафява сектор (# 655), показваща процента. Ние може да се изкуши да използва склонен да преобрази интерес страна, но както се вижда от малки експерименти, той ще бъде доста помия решение. Вместо това, ние боя на левия и десния части на нашата гама в два цвята и използва псевдо-ротация, за да разкрие само онази част от кръга, които се нуждаем.
За да се боя от дясната страна на нашия кръг, в кафяв цвят, ние използваме просто линеен градиент:
Фигура 2 - Оцветяване дясната страна на нашия кръг кафяво прост линеен градиент
Както можете да видите на фигура 2, която е всичко, което е необходимо. Сега можем да се пристъпи към псевдо на стайлинг, който ще действа като маска:
Фигура 3 - псевдо действа като маска, подчерта тук с пунктирана граница
На Фигура 3 можете да видите как в момента е нашата псевдо-елемент по отношение на кръгова диаграма. Сега тя все още не е стилизиран и не изпълнява никакви функции. Това е само един невидим правоъгълник. Преди да продължите и стайлинг му, нека да направи няколко забележки:
- защото искаме да се скрие кафявата част от нашия кръг. ние трябва да се прилага за псевдо-елемент зелен фон с помощта на фон-цвят: наследи. да се избегне дублирането на назначаването му на същия фон цвят като майка елемент;
- искаме да се върти около центъра на кръга. който се намира на средната лявата страна на псевдо-така че трябва да настроите стойността на трансформиране-произход на 0 50%, или просто остави;
- ние не искаме тя да бъде правоъгълник, тъй като в този случай тя е отвъд ръба на кръговата диаграма, така че ние трябва или преливане употреба: скрит за .pie. или да го зададете граничен радиус. да го направи в полукръг.
Аз всичко сгънати заедно, получаваме следния стил за нашите псевдо;
Фигура 4 - псевдо Srs (показана с пунктирана граница) след оформяне
Забележка: Не използвайте фон: наследи; вместо фон-цвят: наследи;, като в този случай ще бъде наследен и наклона!
Сега нашата кръгова диаграма изглежда като фигура 4. Ето и веселбата започва! Можем да започнем да се превърне псевдо. прилагане на завъртане () трансформация. За 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 код, който е отговорен за определяне на процента е настроен на псевдо. Както знаете, не можем да зададем вградените стилове на псевдо. така че трябва да бъдат по-изобретателни.
Забележка. За използване на стойностите на цветовия спектър без повторения и сложни изчисления може да използва следния метод. Същият метод може да се използва и в други случаи. По-долу е прост, изолиран пример за този метод.
Решението идва от един от най-неочаквани места. Ние ще използваме анимация, които вече са показали, но което ще бъде поставено на пауза. Вместо да го стартирате като конвенционален анимация, ние използваме отрицателен закъснение анимация, за да зададете позиция във всяка точка на анимацията и ще остане там. Изненадани ли сте? Да, анимация забавяне отрицателни стойности са разрешени само в спецификацията, но и много полезни в такива случаи.
Тъй като нашата подтискането на жизнените процеси ще бъдат показани само първата от рамката (определено от нашата отрицателна стойност анимация-закъснение). Процентът е показано на кръговата диаграма е равна на определен процент, който е нашата анимация-забавяне на общата продължителност. Например, продължителността на сегашната 6s. имаме нужда от стойността на анимация забавяне. равни -1.2s. да покаже на дела от 20%. За да се опрости изчисленията, ние ще определи продължителността на 100т. Имайте предвид, че, тъй като анимацията е спрян за добро, стойността на неговата продължителност, която създадохме, не играе никаква друга роля.
И последният въпрос: анимацията се прилага към псевдо-елемент, но ние искаме да зададете стил инлайн до .pie елемент. Все пак, въпреки че
И CSS кода за тази анимация ще бъде следващият (правила не са показани за .pie, тъй като той е останал същият):
В момента можем да конвертирате оформлението да се използва интереса както на съдържанието, тъй като ние първоначално ще правят и добавяне на вградения в стила на анимация забавяне чрез един прост скрипт:
Имайте предвид, че ние сме останало недокоснато текста така, както е необходимо за нас да достъпност и използваемост. Сега нашите кръгови диаграми изглеждат като фигура 8. Трябва да се скрие текста, които могат да бъдат предоставени под формата на цвят: прозрачен, така че той остава избран и отпечатва. За допълнително блясък ние поставяме на процентите в центъра на тортата. че те не са били в случаен място, когато потребителят се опитва да ги раздели. За да направите това, ние трябва да:
Фигура 8 - Нашият текст преди да го скрие- конвертирате таблицата стойност на височина линия височина (или да добавят стойност линия височина, равна на височината, но това би било безсмислено дублиране на код, тъй като линията височината е настроен на изчислената стойност на височина е добре ...);
- задаване на размера и позицията на псевдо използвайки абсолютно позициониране. че той не настоява текста надолу;
- добавяне на текст-приравни: център;. за да центрирате текста хоризонтално.
Крайният код изглежда така:
Решението се основава на SVG
SVG го решаването на много графични задачи по-лесно прави, и кръгови диаграми не са изключение. Въпреки това, вместо да създаде кръгова диаграма, използвайки пътеки, които изискват сложна математика, ние използваме един малък трик.
Сега ние се отнасят за нея няколко основни стилове:
Забележка. Както знаете, CSS свойства също са на разположение като елемент приписва SVG, които биха могли да бъдат удобно, ако пренасяне даде загриженост.
Фигура 9 - Нашата отправна точка: зелен SVG кръг с дебелина инсулт # 655
Нашата кръга кръг можете да видите на фигура 9. Ход в SVG не са само свойствата на удар и инсулт ширина. Има много други, по-малко популярни свойства, свързани с движения, които позволяват да се прецизира външния им вид. Един от тях е инсулт-dasharray. предназначен за създаване прекъснати инсулти. Например, ние може да го използва за тази цел:
Фигура 10 - Simple пунктирана инсулт създаден с инсулт-dasharray
Това означава, че ние искаме да се получи пробив с дължина 20 с интервали от дължина 10 като тези, показан на фигура 10. В този момент може да се чудите какво е това SVG например има нещо общо с кръгови диаграми. Въпреки това, всичко става по-ясно, когато се прилага инсулт дължина от 0 и тире интервали по-дълги от или равни на обиколката на нашия кръг (C = 2πr, или в този случай C = 2π × 30 ≈ 189):
Фигура 11 - множество стойности инсулт-dasharray и техните резултати; От ляво на дясно: 0189; 40189; 95189; 150189
Както можете да видите, в първия кръг цифрата е 11 напълно премахнато ход и ни остава само със зелен кръг. Въпреки това забавно започва, когато започнем да се увеличи първата стойност (фигура 11) заради такава дълга почивка получаваме вече хвърли удар и инсулт, която покрива процент от окръжност, която ние определяме.
Може би вече знае в каква посока се движим: ако се намали радиуса на нашия кръг е достатъчно, за да покрие напълно инсулт си, ние в крайна сметка се получи нещо, то е много напомня на кръгова диаграма. Например, на фигура 12 може да видите как ще изглежда, когато се прилагат в кръг с радиус от 25 и ширина на инсулт (мозъчен инсулт ширина) 50:
Фигура 12 - Нашата SVG изображение започва да прилича на кръгова диаграма
Запомнете: SVG инсулт е винаги наполовина вътре, така и извън половина на елемента, към които те се прилагат. В бъдеще ние ще бъде на разположение за контрол на това поведение.
Сега, за да се превърне този образ в кръгова диаграма, подобна на това, което сме създали в предишната решение, то е много лесно: просто трябва да добавите повече зелен кръг при удара и го завъртете на 90 ° обратно на часовниковата стрелка, така че да се стартира в средата. като
Фигура 13 - Последната кръгова диаграма с SVG
Можете да видите крайния резултат на фигура 13. Този метод го прави още по-лесно да анимирате пай от 0% до 100%. Ние просто трябва да се създаде CSS анимация, която променя хода-dasharray 0158-158 158:
Като по-нататъшно подобрение, можем да посочи конкретен радиус на окръжността, така че дължината на периферията си е (безкрайно близо до) 100, и затова могат да определят продължителността на инсулт-dasharray. като проценти. без изчисления. Тъй като окръжност е равен на 2πr, ние се нуждаем от обхват 100 ÷ 2π ≈ 15,915494309, което за нашите нужди може да бъде закръглена до 16. Ние също зададете размера на SVG в viewBox атрибут. вместо ширината и височината атрибути. да го направи, за да регулирате размера на неговата опаковка.
След тези модификации, кръгла оформление диаграмата, показана на фигура 13, ще бъде както следва:
А CSS ще бъде:
и добавяне на вградения в SVG вътре всеки елемент .pie с всички необходими елементи и атрибути. Той също така добави артикул