Дугуй диаграм html css. CSS болон JavaScript ашиглан дугуй диаграмыг хэрхэн хурдан бүтээх вэ. CSS болон SVG графикуудын танилцуулга
18.02.15 21.4КХэрэв та html дээр суурилсан аливаа сайтыг хайчилж авбал тодорхой давхаргат бүтцийг харах болно. Түүнээс гадна гадаад төрхөөрөө энэ нь давхаргын бялуутай төстэй байх болно. Хэрэв та тэгж бодож байгаа бол та удаан хугацаанд идээгүй байх магадлалтай. Тиймээс эхлээд өлсгөлөнгөө ханга, дараа нь бид таны сайт дээрх div давхаргыг хэрхэн голлуулахыг танд үзүүлэх болно:
Шошго ашиглан зохион байгуулалтын ашиг тус
Талбайн барилгын хоёр үндсэн төрөл байдаг:
- хүснэгт;
- Блоклох.
Интернет бий болсон цагаас хойш хүснэгтийн загвар давамгайлж ирсэн. Үүний давуу тал нь өгөгдсөн байршлын нарийвчлалыг агуулдаг. Гэсэн хэдий ч энэ нь тодорхой дутагдалтай талуудтай. Гол нь кодын ихэнх хэсэг, татаж авах хурд бага байдаг.
Хүснэгтийн бүдүүвчийг ашиглах үед вэб хуудсыг бүрэн ачаалах хүртэл харуулахгүй. Харин div блокуудыг ашиглах үед элементүүдийг шууд харуулдаг.
Ачаалах өндөр хурдаас гадна сайтыг блоклох нь html кодын хэмжээг хэд дахин багасгах боломжийг олгодог. Үүнд CSS ангиудыг ашиглах замаар.
Гэсэн хэдий ч, хуудсан дээрх өгөгдлийг харуулах бүтцийг бий болгохын тулд хүснэгтийн байршлыг ашиглах ёстой. Үүнийг ашиглах сонгодог жишээ бол хүснэгтүүдийг харуулах явдал юм.
Шошго дээр үндэслэн барилга байгууламжийг блоклох
мөн давхаргат гэж нэрлэдэг бөгөөд блокууд нь өөрөө давхарга юм. Учир нь тодорхой өмчийн утгыг ашиглах үед тэдгээрийг Photoshop дахь давхаргууд шиг нэг нэгээр нь байрлуулж болно.
Байршлын туслах хэрэгслүүд
Блокийн зохион байгуулалтад давхаргын байрлалыг каскадын загварын хуудас ашиглан хамгийн сайн хийдэг. Албан тушаалыг хариуцах үндсэн CSS өмч
, хөвөгч юм.
Өмчийн синтакс:
хөвөх: зүүн | зөв | байхгүй | өвлөн авах,
Хаана:
- зүүн - элементийг дэлгэцийн зүүн ирмэг рүү зэрэгцүүлнэ. Үлдсэн элементүүд нь баруун тийшээ эргэлддэг;
- баруун талд - баруун талд тэгшлэх, үлдсэн элементүүдийг боох - зүүн талд;
- аль нь ч биш - боохыг зөвшөөрөхгүй;
- inherit - эх элементийн утгыг өвлөн авах.
Энэ өмчийг ашиглан div-г байрлуулах энгийн жишээг авч үзье:
Зүүн блок
баруун блок
Одоо гурав дахь div-г хуудасны төвд байрлуулахын тулд ижил шинж чанарыг ашиглахыг оролдъё. Гэвч харамсалтай нь float нь төвийн утгагүй. Мөн шинэ блокт баруун эсвэл зүүн тийш зэрэгцүүлэх утга өгөхөд энэ нь заасан чиглэлд шилжинэ. Тиймээс бүх гурван блокыг хөвөхөөр тохируулахад л үлддэг: зүүн : 
Гэхдээ энэ нь бас хамгийн сайн сонголт биш юм. Цонхыг багасгахад бүх давхаргууд нь нэг эгнээнд босоо байрлалтай байх бөгөөд хэмжээ нь нэмэгдэхэд цонхны зүүн ирмэг дээр наалддаг. Тиймээс бидэнд div-г голлох илүү сайн арга хэрэгтэй байна. Төвлөрсөн давхаргууд
Дараах жишээнд бид бусад элементүүдийг байрлуулахын тулд савны давхаргыг ашиглана. Энэ нь цонхны хэмжээг өөрчлөх үед блокуудыг өөр хоорондоо харьцангуйгаар солих асуудлыг шийддэг. Савыг голд нь төвлөрүүлэхийн тулд дээд ирмэг ба хажуугийн авто захын захын шинж чанарыг тэг утгаар тохируулна (маржин: 0 auto ):
Зүүн блок
төв блок
баруун блок
Энэ жишээ нь div-г хэвтээ байдлаар хэрхэн голлохыг харуулж байна. Хэрэв та дээрх кодыг бага зэрэг засварлавал блокуудын босоо байрлалд хүрч чадна. Үүнийг хийхийн тулд та зүгээр л савны давхаргын уртыг өөрчлөх хэрэгтэй (багасгах). Өөрөөр хэлбэл, css-ээ засварласны дараа анги дараах байдалтай байх ёстой. Өөрчлөлт хийсний дараа бүх блокууд яг голд нь дараалан эгнэнэ. Мөн хөтчийн цонхны аль ч хэмжээгээр тэдний байрлал өөрчлөгдөхгүй. Босоо төвтэй div нь иймэрхүү харагдаж байна:
Дараах жишээн дээр бид чингэлэг доторх давхаргыг голлуулахын тулд хэд хэдэн шинэ css шинж чанарыг ашигласан:
div доторх div-г голлуулахын тулд энэ жишээнд ашигласан css шинж чанарууд болон тэдгээрийн утгуудын товч тайлбар: - дэлгэц: inline-block - блокийн элементийг нэг мөрөнд байрлуулж, өөр элементээр боох;
- vertical-align: дунд - эцэг эхтэй харьцуулахад дунд хэсэгт байгаа элементийг зэрэгцүүлнэ;
- margin-left - зүүн талын захын зайг тохируулна.
Давхаргаас хэрхэн холбоос хийх вэ
Хачирхалтай сонсогдож байгаа ч боломжтой. Заримдаа өөр өөр төрлийн цэсийг гаргахад холбоос болгон div блок хэрэгтэй байж болно. Холболтын давхаргыг хэрэгжүүлэх практик жишээг авч үзье.
Манай сайт руу холбоно уу
Энэ жишээнд шугамын дэлгэцийг ашиглан: блок , бид блок элементийн утгын холбоосыг тохируулсан. Мөн div-ийн өндрийг бүхэлд нь холбоос болгохын тулд өндөрийг: 100% тохируулна уу. Блокийн элементүүдийг нуух, харуулах
Блок элементүүд нь хуучирсан хүснэгтийн байршлаас илүү интерфэйсийн функцийг өргөжүүлэх илүү олон сонголтыг өгдөг. Сайтын дизайн нь өвөрмөц бөгөөд танигдахуйц байх нь олонтаа тохиолддог. Гэхдээ ийм онцгой сул зай дутагдсаны төлөө та төлөх ёстой.
Энэ нь ялангуяа үндсэн хуудсанд хамаатай бөгөөд зар сурталчилгааны өртөг хамгийн өндөр байдаг. Тиймээс өөр сурталчилгааны баннер хаашаа "түлхэх" асуудал гарч байна. Эндээс та div-г хуудасны голд зэрэгцүүлэхээс зайлсхийж чадахгүй!
Илүү оновчтой шийдэл бол зарим блокыг нуух явдал юм. Ийм хэрэгжилтийн энгийн жишээ энд байна:
Энэ бол шидэт товчлуур юм. Үүн дээр дарснаар далд блокыг нуух эсвэл харуулах болно.
Хэдийгээр дугуй графикуудЭдгээр нь энгийн статистик мэдээллээс эхлээд явцын бар, таймер хүртэлх мэдээллийг харуулах хамгийн түгээмэл арга бөгөөд хамгийн энгийн хоёр өнгийн хэлбэрээр ч гэсэн тэдгээрийг вэбд суурилсан энгийн аргуудаас өөр ямар ч аргаар бүтээдэг уламжлалтай. Ихэвчлэн тэдгээрийг хэрэгжүүлэхийн тулд гадны график засварлагчдыг ашигладаг байсан олон дугуй диаграмын утгын олон зураг, эсвэл JavaScript хүрээнүүд нь илүү төвөгтэй диаграммуудыг үүсгэх зорилготой.
Хэдийгээр одоо даалгавар нь өмнөх шигээ боломжгүй мэт санагдах боловч энгийн, хоёрдмол утгагүй шийдэл байхгүй хэвээр байна. Гэсэн хэдий ч өнөөдөр илүү олон зүйл бий (дээрх аргуудтай харьцуулахад), дугуй диаграмыг хэрэгжүүлэх илүү дэмжигдсэн аргууд.
хувиргахад суурилсан шийдэл
Энэ шийдэл нь зохион байгуулалтын хувьд хамгийн шилдэг нь: түүнд зөвхөн нэг элемент хэрэгтэй бөгөөд бусад бүх зүйлийг псевдо-элементүүд, хувиргалтууд болон CSS градиентууд ашиглан хийх болно. Энгийн элементээс эхэлцгээе:
Одоо бид хатуу кодтой дүрс бүхий дугуй диаграммыг хүсч байна гэж бодъё 20%
. Бид дараа нь уян хатан болгох тал дээр ажиллах болно. Эхлээд элементийг тойрог хэлбэрээр хэлбэржүүлцгээе, энэ нь бидний дэвсгэр байх болно (Зураг 1):
Зураг 1 - Бидний эхлэх цэг (0%-ийг харуулсан дугуй диаграм) .pie ( өргөн: 100px; өндөр: 100px; хүрээ-радиус: 50%; дэвсгэр: шар ногоон; )
Манай дугуй диаграм нь ногоон өнгөтэй (ялангуяа шар ногоон) байх бөгөөд бор сектор (#655) хувийг харуулсан байна. Бид хувь хэмжээний хувьд ташуу хувиргалтуудыг ашиглахыг хүсч магадгүй, гэхдээ бага зэрэг туршилтаас харахад энэ нь нэлээд хайхрамжгүй шийдэл байх болно. Үүний оронд бид тойргийнхоо зүүн ба баруун талыг өнгөөр будна хоёр өнгөмөн ашиглах псевдо элементийг эргүүлж, бидэнд хэрэгтэй тойргийн зөвхөн хэсгийг л харуулах.
Тойргийнхоо баруун талыг хүрэн өнгөтэй болгохын тулд бид энгийн шугаман градиент ашиглана.
Арын дэвсгэр зураг: шугаман-градиент(баруун тийш, ил тод 50%, #655 0); Зураг 2 - Манай тойргийн баруун талыг энгийн шугаман градиентаар бор өнгөтэй болгох
Зураг 2-оос харахад энэ нь бидэнд хэрэгтэй зүйл юм. Одоо бид маскын үүрэг гүйцэтгэх псевдо элементийг загварчилж эхэлж болно.
Pie::prefor (агуулга: ""; дэлгэц: блок; зүүн зах: 50%; өндөр: 100%; ) Зураг 3 - Энд тасархай хүрээтэйгээр тодруулсан маск үүрэг гүйцэтгэдэг псевдо элемент
Зураг 3-аас та манай псевдо-элемент нь дугуй диаграмын элементтэй харьцуулахад одоогийн байдлаар хэрхэн байрлаж байгааг харж болно. Одоо энэ нь загварчлагдаагүй байгаа бөгөөд ямар ч үүрэг гүйцэтгэдэггүй. Энэ бол зүгээр л үл үзэгдэх тэгш өнцөгт юм. Үүнийг загварчилж эхлэхээсээ өмнө хэд хэдэн тайлбар хийцгээе.
- бидний хүссэнээр манай тойргийн хүрэн хэсгийг нуу, дараа нь бид background-color ашиглан псевдо-элемент дээр ногоон дэвсгэр хэрэглэх ёстой: эх элементтэй ижил дэвсгэр өнгийг оноохдоо давхардахаас сэргийлж өвлөх;
- бид түүнийг хүсч байна тойргийн төвийг тойрон эргэлддэг, энэ нь псевдо-элементийн зүүн талын дунд байгаа тул бид transform-origin-ийг 0 50% эсвэл зүгээр л зүүн талд тохируулах ёстой;
- Бид үүнийг тэгш өнцөгт болгохыг хүсэхгүй байна, учир нь энэ нь бялууны ирмэгээс давж гарах тул бид .pie-д халих: hidden буюу хагас тойрог болгохын тулд хилийн радиус өгөх хэрэгтэй.
Энэ бүгдийг нэгтгэж, бид псевдо элементийн дараах хэв маягийг олж авдаг;
Pie::prefor (агуулга: ""; дэлгэц: блок; зүүн захаас: 50%; өндөр: 100%; хүрээ-радиус: 0 100% 100% 0 / 50%; дэвсгэр өнгө: өвлөх; хувиргах-гарал үүсэл: зүүн; ) Зураг 4 - Загвар хийж дууссаны дараа бидний псевдо элемент (цэгтэй хүрээгээр харуулсан)
Тайлбар: backround-color: inherit-ийн оронд background: inherit;-г бүү ашигла, учир нь энэ нь мөн градиентийг өвлөн авах болно!
Одоо бидний дугуй диаграмм зураг 4 шиг харагдаж байна. Эндээс л хөгжилтэй эхэлдэг! Бид эхэлж болно псевдо элементийг эргүүлэх, rotate() хувиргалтыг ашиглаж байна. Учир нь 20%
, бид хэрэгжүүлэх гэж оролдож байгаа бол бид 72deg (0.2 × 360 = 72) эсвэл .2turn утгыг ашиглаж болох бөгөөд энэ нь илүү унших боломжтой. Зураг 5-аас та өөр хэд хэдэн утгын хувьд энэ нь ямар байгааг харж болно.
Зураг 5 - Зүүнээс баруун тийш өөр өөр хувийг харуулсан энгийн дугуй график: 10% (36 градус эсвэл .1 эргэх), 20% (72 градус эсвэл .2 эргэх), 40% (144 градус эсвэл .4 эргэх)
Та ажил дууссан гэж бодож магадгүй, гэхдээ харамсалтай нь бүх зүйл тийм ч хялбар биш юм. Манай дугуй диаграм нь 0-ээс 50% хүртэлх хувийг харуулахад тохиромжтой, гэхдээ бид 60% эргэлтийг харуулахыг оролдвол (.6 эргэлтийг ашигласнаар) бид Зураг 6-д үзүүлсэн зүйлийг олж авна. Гэсэн хэдий ч итгэл найдвараа бүү алдаарай. засаад хийцгээе!
Зураг 6 - Манай дугуй диаграмыг хувьцааны хувьд задалсан 50% -иас дээш(60%-ийг энд харуулав)
Хэрэв бид 50% -100% -ийн хувьцааг харуулах нь тусдаа асуудал гэж үзвэл бид тэдний хувьд ашиглаж болохыг харж болно. өмнөх шийдлийн урвуу хувилбар: хүрэн псевдо-элемент нь 0-ээс .5 эргэлт хүртэл эргэлддэг. Тэгэхээр 60%-ийн хувьцааны хувьд псевдо элементийн код дараах байдалтай байна.
Pie::prefor (агуулга: ""; дэлгэц: блок; зүүн захаас: 50%; өндөр: 100%; хүрээ-радиус: 0 100% 100% 0 / 50%; дэвсгэр: #655; хувиргах эх: зүүн ; transform: rotate(.1turn); ) Зураг 7 - Бидний одоо зөв 60%-ийн утгатай дугуй диаграмм
Зураг 7-д та кодыг хэрхэн ажиллаж байгааг харж болно. Бид одоо ямар ч хувийг харуулах аргыг боловсруулсан тул бид чадна css хөдөлгөөнт дүрс бүхий дугуй диаграмыг 0% -аас 100% хүртэл хөдөлгөөнтэй болгох, нэг төрлийн ахиц дэвшлийн үзүүлэлтийг бий болгох:
@keyframes spin ( to ( transform: rotate(.5turn); ) ) @keyframes bg ( 50% ( дэвсгэр: #655; ) ) .pie::before ( контент: ""; дэлгэц: блок; зүүн талын зай: 50 %; өндөр: 100%; хилийн радиус: 0 100% 100% 0 / 50%; дэвсгэр өнгө: өвлөх; хувиргах-гарал: зүүн; хөдөлгөөнт дүрс: spin 3s шугаман хязгааргүй, bg 6s алхам хязгааргүй; )
За, гэхдээ бид диаграмыг ашиглах хамгийн түгээмэл тохиолдол болох өөр өөр хувьтай олон статик дугуй диаграмыг хэрхэн загварчлах вэ? Хамгийн тохиромжтой нь бид иймэрхүү зүйлийг хэвлэх боломжтой байхыг хүсч байна:
20%
60%
Нэг нь 20%, нөгөө нь 60% гэсэн хоёр дугуй диаграм аваарай. Эхлээд бид үүнийг доторлогооны хэв маягаар хэрхэн хийж болохыг харна, дараа нь текстийн агуулгыг задлан шинжлэхийн тулд үргэлж богино скрипт бичиж, кодын дэгжин байдал, багтаамж, засвар үйлчилгээ, магадгүй хамгийн чухал нь хүртээмжтэй байхын тулд дээрх дотоод хэв маягийг нэмж болно.
Дугуй диаграмын хувь хэмжээг шугамын хэв маягаар удирдахад бэрхшээлтэй байгаа нь хувь хэмжээг тохируулах үүрэгтэй CSS кодыг псевдо элемент дээр тохируулсан байдаг. Та аль хэдийн мэдэж байгаачлан, бид псевдо-элементүүд дээр шугаман хэв маягийг тохируулах боломжгүй, ийм учраас Бид илүү бүтээлч байх ёстой.
Анхаарна уу: Ашиглахад зориулагдсан өнгөний спектрийн утгууддавталт, нарийн төвөгтэй тооцоололгүйгээр та доорх аргыг ашиглаж болно. Та бусад тохиолдолд ижил аргыг ашиглаж болно. Энэ аргыг хэрхэн ашиглах энгийн, тусгаарлагдсан жишээг доор харуулав.
Шийдэл нь хамгийн гэнэтийн газруудын нэгээс ирдэг. Бид аль хэдийн үзүүлсэн хөдөлгөөнт дүрсийг ашиглах боловч түр зогсоох болно. Энгийн хөдөлгөөнт дүрс шиг ажиллуулахын оронд бид сөрөг хөдөлгөөнт саатлыг ашиглах болно хөдөлгөөнт дүрсийн аль ч цэгийн байрлалыг тохируулахтэгээд тэнд үлдэх. Гайхсан уу? Тийм ээ, сөрөг хөдөлгөөнт саатлын утгыг зөвхөн техникийн үзүүлэлтэд зөвшөөрдөг төдийгүй үүнтэй төстэй тохиолдолд маш их хэрэгтэй байдаг.
Манай хөдөлгөөнт дүрсийг түр зогсоосон тул зөвхөн эхний анимейшн фрэймийг харуулах болно (бидний сөрөг хөдөлгөөнт саатлын утгаар тодорхойлогддог). Дугуй диаграммд үзүүлсэн хувь нь бидний хөдөлгөөнт саатлын нийт үргэлжлэх хугацаанд эзлэх хувь байх болно. Жишээлбэл, одоогийн 6 секундын хугацаатай бол 20% -ийг харуулахын тулд бидэнд хөдөлгөөнт саатлын утга -1.2 секунд хэрэгтэй. Тооцооллыг хялбарчлахын тулд бид үргэлжлэх хугацааг 100 секундээр тохируулах болно. Хөдөлгөөнт дүрс бүрмөсөн зогссон тул түүний үргэлжлэх хугацаанд бидний тогтоосон утгад өөр үүрэг байхгүй гэдгийг санаарай.
Тэгээд сүүлчийн асуулт: хөдөлгөөнт дүрсийг псевдо элементэд хэрэглэж байгаа хэдий ч бид .pie элемент дээр мөрийн хэв маягийг тохируулахыг хүсэж байна. Гэсэн хэдий ч асаалттай ч гэсэн
хөдөлгөөнт дүрс байхгүй, бид үүнийг animation-delay-д шугаман хэв маягаар тохируулж, дараа нь хөдөлгөөнт-delay-г ашиглаж болно: inherit; псевдо элементийн хувьд. Энэ бүгдийг нэгтгэж үзвэл 20% ба 60% дугуй диаграмын тэмдэглэгээ дараах байдалтай байна.
Мөн энэхүү хөдөлгөөнт дүрсний CSS код нь дараах байдалтай болно (. Pie-н дүрмүүд хэвээр байгаа тул харагдахгүй байна):
@keyframes spin ( to ( transform: rotate(.5turn); ) ) @keyframes bg ( 50% ( дэвсгэр: #655; ) ) .pie::before ( /* [бусад загвар өөрчлөгдөөгүй] */ хөдөлгөөнт дүрс: 50 секундын шугаман эргүүлэх Infinite, bg 100s step-end infinite; хөдөлгөөнт-тоглуулах-төлөв: түр зогссон; хөдөлгөөнт-хоцролт: өвлөх; )
Энэ үед бид тэмдэглэгээг хувиргаж, анх бодож байсанчлан хувь хэмжээг контент болгон ашиглаж, энгийн скриптээр дамжуулан хөдөлгөөнт саатлын хэв маягийг нэмж болно:
$$(".pie").forEach(function(pie) ( var p = parseFloat(pie.textContent); pie.style.animationDelay = "-" + p + "s"; ));
Хүртээмжтэй, ашиглах боломжтой байх үүднээс бид текстийг хөндөөгүй гэдгийг анхаарна уу. Манай дугуй диаграм одоо Зураг 8 шиг харагдаж байна. Бид өнгө: ил тод байхын тулд ашиглах боломжтой текстийг нуух хэрэгтэй. сонгох, хэвлэх боломжтой. Нэмэлт гялбааны хувьд бид боломжтой дугуй диаграмын төвд хувийн утгыг тавьИнгэснээр хэрэглэгч тэдгээрийг сонгохыг оролдох үед тэдгээр нь санамсаргүй газар байдаггүй. Үүнийг хийхийн тулд бидэнд хэрэгтэй:
Зураг 8 - Бидний текстийг нуухаас өмнө
- диаграмын өндрийн утгыг шугамын өндөрт хөрвүүлэх (эсвэл өндөртэй тэнцүү шугамын өндрийн утгыг нэмэх, гэхдээ энэ нь мөрийн өндрийг тооцоолсон өндөрт тохируулах тул кодыг утгагүй хуулбарлах болно, энэ нь зүгээр);
- псевдо элементийн хэмжээ, байрлалыг тохируулна үнэмлэхүй байрлалингэснээр текстийг доош түлхэхгүй байх;
- text-align нэмэх: төв; Текстийг хэвтээ байдлаар голлуулах.
Эцсийн код дараах байдалтай байна.
Бялуу (байрлал: харьцангуй; өргөн: 100 пиксел; шугамын өндөр: 100 пиксел; хүрээний радиус: 50%; дэвсгэр: шар ногоон; дэвсгэр зураг: шугаман-градиент (баруун тийш, ил тод 50%, #655 0); өнгө: ил тод ; text-aign: center; ) @keyframes spin ( to ( transform: rotate(.5turn); ) ) @keyframes bg ( 50% (фон: #655; ) ) .pie::for ( контент: ""; байрлал : үнэмлэхүй; дээд: 0; зүүн: 50%; өргөн: 50%; өндөр: 100%; хилийн радиус: 0 100% 100% 0 / 50%; дэвсгэр өнгө: өвлөх; хувиргах эх: зүүн; хөдөлгөөнт дүрс: spin 50s linear infinite, bg 100s step-end infinite; хөдөлгөөнт-тоглуулах-төлөв: түр зогссон; хөдөлгөөнт-хоцролт: өвлөх; )
SVG дээр суурилсан шийдэл
SVG нь графикийн олон ажлыг хөнгөвчлөх бөгөөд дугуй диаграм нь үл хамаарах зүйл биш юм. Гэсэн хэдий ч нарийн төвөгтэй математик шаарддаг замуудыг ашиглан дугуй диаграм үүсгэхийн оронд бид бага зэрэг заль мэхийг ашиглах болно.
Тойргоор эхэлцгээе:
Одоо үүнд хэд хэдэн үндсэн хэв маягийг хэрэглэцгээе:
Тойрог (бөглөх: шар ногоон; зураас: №655; зураасны өргөн: 30; )
Анхаарна уу: Та бүхний мэдэж байгаагаар эдгээр CSS шинж чанаруудыг атрибут хэлбэрээр авах боломжтойХэрэв зөөвөрлөх нь санаа зовоосон асуудал байсан бол хэрэг болох SVG элементүүд.
Зураг 9 - Бидний эхлэх цэг: зузаан # 655 цус харвалт бүхий ногоон SVG тойрог
Та бидний тойрсон тойргийг 9-р зурагт харж болно. SVG зураас нь зөвхөн харвалт болон харвалтын өргөн шинж чанаруудаас бүрддэг. Цус харвалттай холбоотой бусад бага алдартай шинж чанарууд байдаг бөгөөд энэ нь гадаад төрхийг нь нарийн тохируулах боломжийг олгодог. Тэдгээрийн нэг нь тасархай цус харвалт үүсгэх зориулалттай stroke-dasharray юм. Жишээлбэл, бид үүнийг үүнд ашиглаж болно:
Цус харвалт-дашаррей: 20 10; Зураг 10 - Stroke-dasharray-ээр үүсгэсэн энгийн тасархай цус харвалт
Энэ нь бид 10-р зурагт үзүүлсэн шиг 20 урттай зураасыг 10 урттай зураас авахыг хүсэж байна гэсэн үг. Энэ үед та энэ SVG жишээ нь дугуй диаграмтай ямар нэгэн холбоотой эсэхийг гайхаж байж магадгүй юм. Гэхдээ бид тойргийнхоо тойргийн хэмжээнээс их буюу тэнцүү (C = 2πr, эсвэл манай тохиолдолд C = 2π × 30 ≈ 189) зураасны урт 0, цоорхойг хэрэглэхэд бүх зүйл илүү тодорхой болно.
Тархины цус харвалт: 0 189; Зураг 11 - Цус харвалтын хэд хэдэн утгууд ба тэдгээрийн үр дүн; зүүнээс баруун тийш: 0 189 ; 40 189; 95189; 150 189
Таны харж байгаагаар 11-р зураг дээрх эхний тойрог дээр энэ нь цус харвалтыг бүрмөсөн арилгаж, зөвхөн ногоон тойрог л үлддэг. Гэсэн хэдий ч, бид эхний утгыг нэмэгдүүлж эхлэхэд хөгжилтэй байдал эхэлдэг (Зураг 11): Ийм урт завсарлагааны улмаас бид тасархай цус харвалт авахаа больсон, харин бидний тодорхойлсон тойргийн тойргийн ийм хувийг хамарсан цус харвалт болно.
Та бид аль замаар явж байгаагаа аль хэдийн ойлгосон байж магадгүй: хэрвээ бид тойргийнхоо радиусыг түүний зураасаар бүрэн бүрхэхүйц хэмжээгээр багасгах юм бол бид дугуй диаграмтай маш төстэй зүйлтэй болно. Жишээлбэл, 25 радиустай, цус харвалтын өргөнтэй (цус харвалтын өргөн) 50 тойрогт хэрэглэвэл хэрхэн харагдахыг Зураг 12-оос харж болно.
Зураг 12 - Манай SVG зураг дугуй диаграм шиг харагдаж байна
Санаж байгаарай: SVG зураас нь үргэлж хэрэглэж буй элементийн тал нь дотор талд, гадна тал нь байдаг. Ирээдүйд бид энэ зан үйлийг хянах боломжтой болно.
тойрог (бөглөх: шар ногоон; харвалт: #655; харвалт-өргөн: 50; харвалт-дашаррей: 60 158; /* 2π × 25 ≈ 158 */ )
Одоо энэ зургийг өмнөх шийдэлд бий болгосон шиг дугуй диаграм болгон хувиргах нь маш амархан: зүгээр л нэмнэ үү цус харвалтын хувьд том ногоон тойрогболон цагийн зүүний эсрэг 90° эргүүлнэтэгснээр энэ нь дундаас дээд хэсгээс эхэлнэ. Учир нь
Svg ( хувиргах: эргүүлэх(-90deg); дэвсгэр: шар ногоон; хилийн радиус: 50%; ) Зураг 13 - SVG-тэй эцсийн дугуй диаграмм
Та эцсийн үр дүнг Зураг 13-аас харж болно. Энэ арга нь дугуй диаграмыг 0% -аас 100% хүртэл хөдөлгөөнт болгоход илүү хялбар болгодог. Бид зүгээр л харвалт-dasharray-г 0 158-аас 158 158 болгон өөрчилдөг CSS хөдөлгөөнт дүрс үүсгэх хэрэгтэй:
@keyframes дүүргэлт ( to ( stroke-dasharray: 158 158; ) ) тойрог ( дүүргэх: шар ногоон; харвалт: #655; зураасны өргөн: 50; stroke-dasharray: 0 158; хөдөлгөөнт дүрс: дүүргэлт 5s шугаман хязгааргүй; )
Цаашид илүү боловсронгуй болгохын тулд бид тойргийн тодорхой радиусыг тохируулах боломжтой бөгөөд ингэснээр тойрог нь 100 (хязгааргүй ойрхон) байх болно. цус харвалтын уртыг хувиар зааж өгнө, ямар ч тооцоололгүйгээр. Тойрог нь 2πr тул бидэнд 100 ÷ 2π ≈ 15.915494309 радиус хэрэгтэй бөгөөд үүнийг бидний хэрэгцээнд зориулан 16 хүртэл бөөрөнхийлж болно. Мөн бид SVG-ийн хэмжээсийг өргөн, өндрийн шинж чанаруудын оронд viewBox шинж чанарт тохируулна. , савныхаа хэмжээсийг тохируулах боломжтой болгох.
Эдгээр өөрчлөлтийн дараа 13-р зурагт үзүүлсэн дугуй диаграмын зураглал дараах байдалтай байна.
Тэгээд CSS дараах байдалтай болно.
Svg (өргөн: 100px; өндөр: 100px; хувиргах: эргүүлэх(-90deg); дэвсгэр: шар ногоон; хүрээ-радиус: 50%; ) тойрог (бөглөх: шар ногоон; харвалт: #655; зураасны өргөн: 32; харвалт-дашаррай : 38 100; /* 38% */ )
Анхаар, хувь хэмжээг өөрчлөх нь одоо хэр амархан вэ. Хэдийгээр ийм хялбаршуулсан ч гэсэн бид дугуй диаграм бүрт SVG тэмдэглэгээг давтахыг хүсэхгүй байна. JavaScript бидэнд бага зэрэг автоматжуулалт хийхэд туслах цаг болжээ. Бид иймэрхүү энгийн HTML тэмдэглэгээг авахын тулд жижиг скрипт бичнэ...
20%
60%
Мөн шаардлагатай бүх элементүүд болон шинж чанаруудтай .pie элемент бүрийн дотор SVG-г нэмнэ үү. Энэ нь мөн элемент нэмэх болно
хүртээмжтэй болгохын тулд Өгүүлэгч хэрэглэгчид хэдэн хувийг харуулахыг мэдэх боломжтой. Эцсийн скрипт дараах байдлаар харагдах болно.</p><p>$$(".pie").forEach(function(pie) ( var p = parseFloat(pie.textContent); var NS = "http://www.w3.org/2000/svg"; var svg = баримт бичиг. createElementNS(NS, "svg"); var тойрог = document.createElementNS(NS, "тойрог"); var title = document.createElementNS(NS, "гарчиг"); circle.setAttribute("r", 16); тойрог. setAttribute("cx", 16); circle.setAttribute("cy", 16); circle.setAttribute("stroke-dasharray", p + " 100"); svg.setAttribute("viewBox", "0 0 32 32 "); title.textContent = pie.textContent; pie.textContent = ""; svg.appendChild(гарчиг); svg.appendChild(дугуй); pie.appendChild(svg); ));</p><p>Энэ байна! Та CSS арга нь илүү энгийн бөгөөд танил болсон тул илүү дээр гэж бодож магадгүй юм. Гэсэн хэдий ч SVG арга нь цэвэр CSS шийдлээс тодорхой давуу талтай:</p><ul><li><b>гурав дахь өнгийг нэмэхэд хялбар байдаг</b>: зүгээр л өөр нэг зураастай тойрог нэмээд түүний зураасыг stroke-dashoffset-ээр хөдөлгөнө үү. Эсвэл өмнөх тойргийн цус харвалтын уртыг түүний өмнөх (доор) тойргийн урттай нэмнэ. Эхний аргаар үүсгэсэн дугуй диаграмд гурав дахь өнгийг яг яаж нэмэх вэ?</li><li>бид <b>хэвлэхийн тулд нэмэлт хүчин чармайлт гаргах ёсгүй</b>, учир нь SVG элементүүдийг контент гэж үзэж, элементүүдтэй адил хэвлэдэг <img>. Эхний шийдэл нь дэвсгэрээс хамаарах тул хэвлэгдэхгүй;</li><li>Бид чадна <b>inline загвараар өнгийг өөрчлөх</b>, энэ нь бид тэдгээрийг хялбархан өөрчлөх боломжтой гэсэн үг юм <b>скриптүүд</b>(өөрөөр хэлбэл хамаарна <b>хэрэглэгчийн оролт</b>). Эхний шийдэл нь удамшлаас бусад тохиолдолд шугаман хэв маягийг хүлээн авах боломжгүй хуурамч элементүүдэд тулгуурладаг бөгөөд энэ нь үргэлж тохиромжтой байдаггүй.</li>дэвсгэр: конус-градиент(#655 attr(өгөгдлийн утга %), шар ногоон 0); <p>Энэ нь мөн гурав дахь өнгийг нэмэхэд маш хялбар болгодог. Жишээлбэл, дээрх шиг дугуй диаграмын хувьд бид зүгээр л хоёр өнгөний цэг нэмнэ:</p><p>Суурь: конус-градиент(гүн ягаан 20%, #fb3 0, #fb3 30%, шар ногоон 0);</p><p>Тэгээд л болоо! Сэтгэгдэл үлдээгээрэй!</p></ul>
<p>Урд талын хөгжүүлэгчийн хувьд дугуй диаграмыг бүтээх асар олон арга байдаг - төрөл бүрийн номын сан, залгаасууд, гайхалтай SVG график чадварууд гэх мэт. Гэсэн хэдий ч, "бялуу" диаграммыг бий болгох хамгийн энгийн аргыг авч үзэх нь зүйтэй бөгөөд энэ нь даалгаврыг аль болох энгийн байдлаар тохируулж, нэмэлт хэрэгсэл ашиглах шаардлагагүй, боломж байхгүй тохиолдолд хэрэг болно. Ийм хэрэгжилтийн жишээг доор харуулав. <br></p>
<p>Ийм массив хэлбэрийн анхны өгөгдөл байна гэж бодъё, үүнийг дугуй диаграм дээр дүрслэх шаардлагатай.</p><p>Var датасет = [ (утга: 5, өнгө: "#dc3912" ), (утга: 40, өнгө: "#ff9900" ), (утга: 30, өнгө: "#109618" ), (утга: 25, өнгө: "#990099" ) ];</p><p>утга - нь хувийн жин, өнгө нь салбарын өнгө юм.</p>
<p>Эхлээд диаграммын тойрог болж, секторуудын элементүүдийг агуулсан савыг бүтээцгээе.</p><p>
<div class="container"></div>
</p><p>Үүнийг бас загварчилъя:</p><p>Контейнер (өргөн: 300px; өндөр: 300px; халих: далд; хилийн радиус: 50%; байрлал: харьцангуй; )</p><p>Үүний үр дүнд бид ийм тойрог авдаг. Түүний хил хязгаараас давсан бүх зүйл (тасархай шугамаар дүрслэгдсэн) нуугдах болно.</p>
<p>Цаашилбал, асуулт гарч ирнэ - бид хэрхэн тэгш өнцөгт div элементүүдийг тойргийн сектор болгон хувиргах, тэдэнд хүссэн өнцгийг хэрхэн өгөх вэ? Үнэн хэрэгтээ, эхний зорилгоор, overflow:hidden шинж чанарыг контейнерт тохируулсан, учир нь Энэ нь элементийн нэг хэсгийг нуух боломжийг олгодог бөгөөд үүнийг ийм байдлаар дугуйруулж, хоёр дахь нь CSS хувиргах нь бидэнд туслах болно. Нэг салбарын жишээг доор харуулав.</p>
<p>Сектор класстай контейнер дотор div нэмье.</p>
<p>CSS:</p><p>Салбар (өргөн: 50%; өндөр: 50%; байрлал: үнэмлэхүй; зүүн: 50%; дээд: 0; хувиргах гарал үүсэл: зүүн доод; дэвсгэр: #000; )</p><p>Ингээд 0 градусаас эхлээд 90 градусын утгатай салбартай боллоо.</p>
<p>Энэ секторт хүссэн өнцгийг тохируулахын тулд бид skewY CSS хувиргалтыг ашигладаг. Энэхүү хувиргалт нь квадратын баруун ирмэгийг y тэнхлэгийн дагуу шилжүүлж, хэвтээ ирмэгүүд нь анхны байрлалаараа заасан өнцгийг үүсгэдэг.</p>
<p>Өгөгдлийн багцын массивын эхний элемент дэх утгын утга нь 5, градус руу хөрвүүлбэл 18 болно. Налууг зөв чиглэлд гаргахын тулд бид бүх өнцөгт 90 градус нэмнэ.</p>
<p>Тиймээс хувиргах өнцөг = 90 + 18 = 108.</p>
<p>хувиргах: хазайсан (108 градус);</p>
<p>Өгөгдсөн өнцгөөр эргүүлэхийн тулд бид эргүүлэх хувиргалтыг ашиглана. Эхлээд эргэлтийн хувиргалтыг хийх нь чухал бөгөөд зөвхөн дараа нь хазайлтын хувиргалтыг хийх нь чухал юм.</p>
<p>Хувиргах: эргүүлэх (45 градус) хазайлт (108 градус);</p>
<p>Энэ арга нь нэг сул талтай - хазайсан хувирлын утгыг харуулсан зурагт үзүүлсэнчлэн, ийм байдлаар 90 градусаас ихгүй утгатай салбаруудыг зөв дүрсэлж болно. Тиймээс 90-ээс дээш утгыг харуулахын тулд та ижил өнгийн хэд хэдэн салбарыг зурах хэрэгтэй болно. Жишээлбэл, хэрэв өнцгийн утга 100 градус байвал бид 90 градус ба 10 гэсэн 2 салбарыг харуулах болно. Хэрэв утга нь 200 градус байвал бид 3 салбарыг авна - 90, 90, 20 градус гэх мэт.</p>
<p>Үүний үр дүнд бид салбаруудыг динамикаар нэмэх дараах кодыг авна.</p><p>Var maxValue = 25; var контейнер = $(".контейнер"); var addSector = функц (өгөгдөл, эхлэх өнцөг, уналт) ( var sektorDeg = 3.6 * өгөгдөл. үнэ цэнэ; var skewDeg = 90 + секторDeg; var rotateDeg = эхлүүлэх өнцөг; if (нуралт) ( skewDeg++; ) var сектор = $(" <div>", ( "анги": "салбар" )).css(( "арын дэвсгэр": data.color, "transform": "rotate(" + rotateDeg + "deg) skewY(" + skewDeg + "deg)" )) ; container.append(sector); return startAngle + sektorDeg; ); dataset.reduce(функц (өмнөх, curr)) ( буцах (функц addPart(өгөгдөл, өнцөг) ( хэрэв (өгөгдлийн утга)<= maxValue) {
return addSector(data, angle, false);
}
return addPart({
value: data.value - maxValue,
color: data.color
}, addSector({
value: maxValue,
color: data.color,
}, angle, true));
})(curr, prev);
}, 0);
</p><p>Үр дүн:</p>
<p>Ийм "бялуу" диаграммыг псевдо-элементийн саванд хэв маяг нэмж оруулснаар амархан "пончик" диаграм болгон хувиргаж болно.</p><p>Контейнер:дараа (агуулга: ""; байрлал: үнэмлэхүй; өргөн: 50%; өндөр: 50%; дэвсгэр: #fff; хилийн радиус: 50%; дээд: 25%; зүүн: 25%; )</p>
<p>Вэб хөгжүүлэгчийн "гал тогоо" нь гэрийн хоол хийхтэй зарим талаараа төстэй юм. Хөгжүүлэгч нь бэлэн кодоор дамжуулан төрөл бүрийн номын сангууд руу нэвтрэх боломжтой бөгөөд энэ нь гэртээ тогооч хоолоо илүү үр дүнтэй болгохын тулд хагас боловсруулсан бүтээгдэхүүн ашигладаг шиг вэб програм хийхэд тусалдаг. Аль ч тохиолдолд урьдчилан бэлтгэсэн зүйлсийн чанар маш чухал байх ёстой. Гэсэн хэдий ч заримдаа ая тухтай байдлыг хангахын тулд чанарыг золиосолдог. Битгий буруугаар ойлгоорой, тав тухтай байдал үргэлж муу байдаггүй. Энэ нь давуу болон сул талуудыг мэддэг, сайн дүн шинжилгээ хийсэн тохиолдолд хэрэг болно. HTML дээрх бялуу болон гурилан графикийн сонголтуудад дүн шинжилгээ хийснээр бид зөвхөн цөөн хэдэн зүйлийг онцолж болно.</p>
<ol><li>Үйлчлүүлэгч дээр үүсгэсэн Canvas элемент дээр суурилсан диаграм (жишээ нь JavaScript)</li><li>SVG-д суурилсан, үйлчлүүлэгч дээр үүсгэсэн график (жишээ нь JavaScript)</li><li>SVG дээр суурилсан диаграммыг сервер дээр үүсгэсэн</li>
</ol><h3>Canvas болон SVG JavaScript ашиглан бэлэн номын сангууд</h3>
<p>График зурахад зориулсан JavaScript сангууд нь ихэвчлэн илүү тохиромжтой бөгөөд интерактив гэх мэт олон сонирхолтой сонголтоор дүүрэн байдаг. Энд зарим номын сангууд байна:</p>
<ol><li>D3.js</li><li>Chartist.js</li><li>Google Charts</li>
</ol><p>Хэд хэдэн мөр JavaScript болон олон тооны өгөгдөл нь танд хэдхэн секундын дотор сайт дээр диаграмм үүсгэх боломжийг олгоно. Олон хүмүүс энэ замыг сонгосон нь гайхах зүйл биш юм.</p>
<p>Тэгвэл яагаад санаа зовоод, тэдэнд зориулж өөрийн гараар код бичих гэж? Энэ бол би бас өөрөөсөө асуусан гайхалтай асуулт юм. Эцэст нь би гурван зүйлд итгэлтэй болсон:</p>
<ol><li>Ихэнх JavaScript сангууд, ялангуяа Canvas элемент дээр суурилсан сангуудыг олоход хэцүү байдаг (Google Charts-аас бусад)</li><li>Хэрэв диаграм дээрх мэдээлэл маш чухал бол (миний нөхцөл байдалд байсан шиг) бид мэдээллийг үүсгэхийн тулд үйлчлүүлэгч дээр ажиллаж байгаа скриптэд найдах ёстой юу? Би тэгэж бодохгүй байна.</li><li>Хэрэв би SVG кодыг илүү гүнзгий судалж, гараа бохирдуулах юм бол би үүний цаана байгаа ид шидийн утгагүй зүйлийн талаар бага зэрэг мэдэж болно. Өөрөөр хэлбэл, суралцах үйл явц нь хөгжилтэй, хүчин чармайлт гаргахад үнэ цэнэтэй байж болно.</li>
</ol><h3>Миний нөхцөл байдал</h3>
<p>Манай багт сервер дээр бүтээгдэж, дансны хэрэглээний энгийн мэдээллийг харуулах энгийн бүрэлдэхүүн хэсэг хэрэгтэй байсан. Мөн бидний давуу тал бол энэ бүрэлдэхүүн хэсгийн хөнгөн байдал (боломжтой бол JavaScript-ээс зайлсхийх); Энэ нь хэт боловсронгуй эсвэл интерактив байх шаардлагагүй, зөвхөн чухал өгөгдлийг харуулах шаардлагатай байв.</p>
<h3>Canvas элемент дээр суурилсан диаграмын талаархи нэмэлт тэмдэглэл</h3>
<p>Та (хэрэв та вэбийн графикийг мэддэг бол) дээрх санал болгосон номын сангийн жагсаалтад Chart.js-ийг оруулаагүйг анзаарсан байх. Та үүнийг ашиглах нь гарцаагүй боловч Chart.js нь өөрийн диаграммыг зурахдаа Canvas элементийг ашигладаг бөгөөд элементийн агуулга нь DOM-ийн хэсэг биш гэдгийг санаарай. Тиймээс тэдгээрийг дэлгэц уншигчдад ашиглах боломжгүй. Энэ нь таны өгөгдөл бэлэн байгаа эсэхийг шалгахын тулд нэмэлт арга хэмжээ авах шаардлагатай болно гэсэн үг юм.</p>
<h3>CSS болон SVG графикуудын танилцуулга</h3>
<p>CSS болон SVG диаграммууд нь бусад технологиудыг бодвол угаасаа илүү хүртээмжтэй, утга учиртай байдаг. Гэхдээ тэдгээр нь гараар кодлогдсон бол нарийн төвөгтэй, магадгүй цаг хугацаа шаардсан байж болно.</p>
<p>CSS нинжа Лиа Вероу "CSS болон SVG ашиглан уян хатан, засвар үйлчилгээ хийх боломжтой дугуй диаграммуудыг зохион бүтээх нь" нийтлэлдээ эхнээс нь дугуй диаграм үүсгэх хэд хэдэн сонголтыг санал болгож байна. Үүний аргуудыг гурилан бүтээгдэхүүний диаграммд ч ашиглаж болно.</p>
<p>Робин Рэндл мөн CSS ашиглан график үүсгэх талаар бичсэн бөгөөд энэ арга барил дахь алдаагаа онцолж байв.</p>
<h3>тайлбарлахын аргагүй</h3>
<p>Би SVG болон пончик графикуудын талаар бага зэрэг хайлт хийж үзээд Лиа Вероу, Робин Рэндл нарын (тэдгээрийг дээр дурдсан) хэд хэдэн нийтлэлийг олж харлаа. Бараг бүгдээрээ диаграмын хэсгүүдийг байрлуулахдаа SVG-д stroke-dasharray болон stroke-dashoffset шинж чанаруудыг ашиглах талаар ярилцсан. Adobe Illustrator зэрэг программ дээр вектор үүсгэх үед эдгээр шинж чанарууд нь "цус харвалт"-тай ижил байна.</p>
<p>Эдгээр нийтлэлүүдийн зарим нь SVG-ийн хөдөлгөөнт дүрсийг ч гэсэн авч үзсэн бөгөөд энэ нь гайхалтай боловч миний хайж байсан зүйл биш юм.</p>
<p>Судалгааны үр дүнд би үүнийг ашиглах боломжтой болсон <circle>SVG-ээс цус харвалт болон stroke-dasharray-ийн хамт надад хэрэгтэй үүрлэсэн бялуу сегментүүдийг өгч чадна. Мөн stroke-dashoffset нь надад "амьдрах" буюу өөрөөр хэлбэл сегментийг тойрог дээр хүссэн газраа байрлуулах боломжийг олгоно гэдгийг би ойлгосон.</p>
<p>Гэсэн хэдий ч би зураасны зураасны шинж чанарууд хэрхэн ажилладаг, тойргийн тойрогтой ямар холбоотой байсан талаар тодорхой тайлбар олсонгүй. Илүү боломжгүй зүйл бол тойргийн эргэн тойронд хэд хэдэн элементүүдийг (нэг нэгээр нь) хавсаргах явдал байв. Илүү сайн, SVG өвөрмөц/динамик сегментийн хэмжээ болон харвалтын шинж чанаруудыг ашиглан эдгээр харьцангуй байрлалыг авах томъёо юу вэ?</p>
<p>Тиймээс би өөрөө олж мэдэхээр шийдсэн.</p>
<blockquote>Жич: Хэрэв та эдгээр ойлголтуудыг тайлбарласан эх сурвалжийг олвол хуваалцана уу.</blockquote>
<h3>Өөрийнхөө SVG диаграмыг хэрхэн хийх вэ</h3>
<h4>Тархины цус харвалт, харвалт-dashoffset-ийн тайлбар</h4>
<p>Энгийн SVG "donut chart" -аас эхэлцгээе.</p>
<p>
<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#ce4b99" stroke-width="3"></circle>
</svg>
</p><p>Та хэд хэдэн зүйлийг анзаарах болно:</p>
<ol><li>Радиус (атрибут "r") утгагүй харагдаж байна! Яагаад? Би сегментийнхээ хэмжээг логик, ойлгомжтой, унших боломжтой болгохыг хүссэн. Үүнд хүрэхийн тулд би бүх зүйлийг 100% (эсвэл 100-ийн тойрог) дээр үндэслэхээр шийдсэн. SVG хэлбэрүүд нь өргөтгөх боломжтой тул хэр том байх нь хамаагүй; наад зах нь энд математик энгийн байх болно. Ахлах сургуулийн математикийн хичээлээс санаж байгаа зүйл рүүгээ орвол: Тойргийн радиус нь r = C/(2π) эсвэл r = 100/(2π) гэдгийг би мэднэ. Үр дүн нь 15.91549430918952. Олон оронтой солиотой тоо, тиймээ би мэднэ, гэхдээ энэ нь хожим бидний амьдралыг хөнгөвчлөх болно.</li><li>Учир нь <b>viewBox</b>"0 0 42 42" утгууд өгөгдсөн. Эдгээр нь cx & cy (төв x ба y төв) утгуудаас хоёр дахин их байх ёстой <circle>мөн тойргийн диаметрээс арай том байх ёстой (тоймны өргөнийг оруулаад).</li><li>Байна <circle>ангийн хамт "пончик-нүх". Энэ нь төвийг цагаан болгох баталгаатай зүйл юм. Хэрэв энэ нь танд чухал биш бол (энгийн дугуй диаграмын хувьд) энэ зүйлийг устгаж болно.</li><li>Бас байдаг <circle>ангийн хамт "пончик-цагираг". Секторууд тойргийн 100% дүүргээгүй тохиолдолд цайвар саарал дэвсгэр болж үйлчилнэ.</li>
</ol><p>Тэгэхээр салбарынхаа хэмжээг хүссэн хувь хэмжээнд нь тааруулах хэрэгтэй. 85%-ийг ашиглая:</p>
<p><img src='https://i2.wp.com/devacademy.ru/uploads/images/65/35/0165134e2b1b9d219d395614daad.png' width="100%" loading=lazy loading=lazy><br></p><p>
<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#ce4b99" stroke-width="3" stroke-dasharray="85 15" stroke-dashoffset="0"></circle>
</svg>
</p><p>Салбаруудыг stroke-dasharray гэж нэрлэгддэг SVG харвалт шинж чанарыг ашиглан үүсгэсэн. Дээрх жишээнд бидний тогтоосон утга нь " 85 15 " байна.</p>
<p>Хэрэв бид диаграмыг дугуй диаграм гэж үзвэл 85% салбар байгаа эсэхээс үлдэгдэл 15% -ийг шүүж болно. Эдгээр хоёр утга нь зайгаар тусгаарлагдсан массив юм. Үүнд: 85 нэгжийн зураас үүсдэг, дараа нь 15 нэгж, дараа нь 85, 15, 15, гэх мэт. Гэхдээ бид тойрог ашиглаж байгаа бөгөөд нийт нь 100 байгаа тул бүх зүйл дахин давтагдана. Хэрэв бид массивын хоёр дахь утгыг эхний тоог зуугаар нөхөхөөр болгоогүй бол бид гурав дахь баар (эсвэл бутархай) буюу түүнээс дээш хэсгийг авна. Жишээлбэл, " 10 10 "-ын харвалт-dasharray энд байна: <br></p>
<p><img src='https://i0.wp.com/devacademy.ru/uploads/images/ca/97/25681615de31e334b1187d3f509d.png' width="100%" loading=lazy loading=lazy><br></p>
<p>Тиймээс, 2, 3-р зурагт цус харвалт хамгийн дээд цэгээс (12:00 цагт) эхлэхгүй байгааг анзаарч болно. Үүний оронд энэ нь баруун гар талаас (3:00) эхэлж, цагийн зүүний дагуу тойргийн дагуу хөдөлдөг. <br></p>
<p>Хэрэв бид дээд талд байрлуулахыг (эсвэл эхлүүлэх) хүсвэл stroke-dashoffset ашиглах ёстой. Гэсэн хэдий ч, stroke-dasharray-ээс ялгаатай нь stroke-dashoffset нь цагийн зүүний эсрэг хөдөлдөг. Тиймээс бид утгыг "25" (3:00-аас 12:00 хүртэл 25%) болгох шаардлагатай болно. Офсет нь сумны эсрэг хөдөлдөг тул энэ нь сөрөг тоо биш гэдгийг санаарай. <br></p>
<p><img src='https://i0.wp.com/devacademy.ru/uploads/images/d5/77/1a5b66bd2e4abeeacac8c88b258a.png' width="100%" loading=lazy loading=lazy><br></p><p>
<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#ce4b99" stroke-width="3" stroke-dasharray="85 15" stroke-dashoffset="25"></circle>
</svg>
</p><h3>SVG-ийн эргэн тойронд гурилан бүтээгдэхүүний зүсмэлүүдийг хэрхэн байрлуулах вэ</h3>
<p>Одоо бид тойргийн эргэн тойронд нэмэлт салбаруудыг нэмэх хэрэгтэй. Тойргийн 15%-ийг эзэлдэг салбарыг ашиглая. Тархины цус харвалт-дашаррагийн үлдсэн хувь нь бусад салбараас үл хамааран 85% байх болно. Тиймээс код дараах байдлаар харагдах болно.</p><p>
<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#ce4b99" stroke-width="3" stroke-dasharray="85 15" stroke-dashoffset="25"></circle>
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#b1c94e" stroke-width="3" stroke-dasharray="15 85" stroke-dashoffset="25"></circle>
</svg>
</p><p>Бид 25-д stroke-dashoffset-ийг орхисон тул ногоон салбар дээд талаас эхэлж, цагийн зүүний дагуу явж, эхний сектор (ягаан) давхцаж байна. <br></p>
<p><img src='https://i1.wp.com/devacademy.ru/uploads/images/aa/3b/93be825cc95a56167a589751492a.png' width="100%" loading=lazy loading=lazy><br></p>
<p>Мэдээжийн хэрэг, энэ нь бидний хүссэн зүйл биш юм. Бид арван тав дахь хувь (ногоон) нь наян тавны (ягаан) үлдсэн орон зайд сайн тохирохыг хүсч байна. Бид аз таарах хүртлээ цус харвалт-даshoffset-ийг тохируулж болно, гэхдээ дахиад хоёр салбартай бол энэ нь тийм ч амар биш байх байсан. Үүний оронд бидэнд томъёо хэрэгтэй:</p>
<blockquote>Тойрог - өмнөх бүх салбарын нийт урт + эхний секторын офсет = одоогийн секторын зөрүү</blockquote>
<p>Тоонуудаа оруулаад бид дараахь зүйлийг авна.</p>
<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#ce4b99" stroke-width="3" stroke-dasharray="85 15" stroke-dashoffset="25"></circle>
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#b1c94e" stroke-width="3" stroke-dasharray="15 85" stroke-dashoffset="40"></circle>
</svg>
<p><img src='https://i0.wp.com/devacademy.ru/uploads/images/3b/eb/64ce88ecd71fb8318dc50d3ef82b.png' width="100%" loading=lazy loading=lazy><br></p>
<h3>Диаграмдаа илүү олон салбар нэмье!</h3>
<p>Үүнтэй ижил томъёо нь нэмэлт салбаруудыг нэмэхэд ажилладаг. Графикийг 40, 30, 20 хувиар дүүргээд үлдсэн 10-ыг нь ашиглахгүй.</p><p>
<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#ce4b99" stroke-width="3" stroke-dasharray="40 60" stroke-dashoffset="25"></circle>
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#b1c94e" stroke-width="3" stroke-dasharray="20 80" stroke-dashoffset="85"></circle>
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#377bbc" stroke-width="3" stroke-dasharray="30 70" stroke-dashoffset="65"></circle>
<!-- unused 10% -->
</svg>
</p><p>Үр дүн: <br></p>
<p><img src='https://i0.wp.com/devacademy.ru/uploads/images/38/a2/76bb4e9ec9834b732ac0ee4dd0c1.png' width="100%" loading=lazy loading=lazy><br></p>
<h3>Диаграм дотор текст нэмэх</h3>
<p>Энэ нь дотор болон дунд текстгүй гурилан бүтээгдэхүүний график биш байх болно; Энэ нүх нь үүнд зориулагдсан юм, тийм үү? За, текст нэмэх нь амархан. Бид зүгээр л элементийг ашигладаг <text>, энэ нь SVG хэлбэрээс гаралтай.</p><p>
<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3"></circle>
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#ce4b99" stroke-width="3" stroke-dasharray="40 60" stroke-dashoffset="25"></circle>
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#b1c94e" stroke-width="3" stroke-dasharray="20 80" stroke-dashoffset="85"></circle>
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#377bbc" stroke-width="3" stroke-dasharray="30 70" stroke-dashoffset="65"></circle>
<!-- unused 10% -->
<g class="chart-text">
<text x="50%" y="50%" class="chart-number">
10
</text>
<text x="50%" y="50%" class="chart-label">шар айраг</text>
</g>
</svg>
</p><p>Би диаграмын текстийг 2 элемент болгон хуваасан болохыг та анзаарах болно <text>мөн тэдгээрийг бүлэглэсэн <g>). Энэ нь гарчиг болон дугаарыг бие биенийхээ дээр байрлуулах, мөн тэдгээрийг нэг нэгж болгон байрлуулахад хялбар болгох үүднээс хийгдсэн. Би X ба Y шинж чанаруудыг доод шугамын дүрсний төвөөс эхэлж зүүн тийш зэрэгцүүлэхээр тохируулсан. <br></p>
<p><img src='https://i2.wp.com/devacademy.ru/uploads/images/9a/c3/b28a86fd0e423f520593c51eeab3.png' width="100%" loading=lazy loading=lazy><br></p>
<p>Таны харж байгаагаар байршил нь тийм ч зөв биш байгаа тул бид үүнийг бага зэрэг CSS-ээр сайжруулах хэрэгтэй болно: <br></p><p>
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400);
.chart-text {
font: 16px/1.4em "Montserrat", Arial, sans-serif;
fill: #000;
-moz-transform: translateY(0.25em);
-ms-transform: translateY(0.25em);
-webkit-transform: translateY(0.25em);
transform: translateY(0.25em);
}
.chart-number {
font-size: 0.6em;
line-height: 1;
text-anchor: middle;
-moz-transform: translateY(-0.25em);
-ms-transform: translateY(-0.25em);
-webkit-transform: translateY(-0.25em);
transform: translateY(-0.25em);
}
.chart-label {
font-size: 0.2em;
text-transform: uppercase;
text-anchor: middle;
-moz-transform: translateY(0.7em);
-ms-transform: translateY(0.7em);
-webkit-transform: translateY(0.7em);
transform: translateY(0.7em);
}
</style>
</p><p>Эхлээд Montserrat фонтыг нэмье (надад таалагдсан учраас). Дараа нь бид үсгийн хэмжээ ("фонтын хэмжээ") болон мөрийн өндөр ("мөрийн өндөр") зэргийг тохируулах хэрэгтэй. 0.25em дээр "translateY"-г нэмсний дараа текст босоо байдлаар бага зэрэг зэрэгцэх боловч бид хараахан дуусаагүй байна.</p>
<p>Бид текстийн хайрцгийг хоёуланг нь жижигрүүлж, фонтын хэмжээг хүссэн хэмжээгээрээ (том тоо бол 0,6 эм, гарчиг бол 0,2 эм зүгээр харагдана) болон " text-anchor " шинж чанарыг ашиглан голд зэрэгцүүлэх хэрэгтэй. "дунд" гэсэн утгатай.</p>
<p>Одоо текст төвд байна. Үлдсэн зүйл бол үүнийг том үсгээр (хийхэд хялбар) болгож, "translateY" ашиглан тус тусын элементүүдийг зөв байрлуулахын тулд байрлуулах явдал юм. Одоо бидэнд байгаа зүйл бол:</p>
<p><img src='https://i1.wp.com/devacademy.ru/uploads/images/48/e9/dd90372f8d13953946f76a3c7e28.png' width="100%" loading=lazy loading=lazy><br></p>
<h3>Хүртээмжтэй холбоотой асуудлууд</h3>
<p>Өмнө дурьдсанчлан SVG контент нь DOM-ийн нэг хэсэг учраас угаасаа илүү хүртээмжтэй байдаг. Энэ нь шинж чанарууд болон гарчгийн төрлийн элементүүдээр дамжуулан дэлгэц уншигчдад нэмэлт контекст өгөхөд маш хялбар болгодог.</p>
<p>Хүртээмжтэй холбоотой асуудлуудын эхний түвшин бол SVG диаграмыг элементэд ороож илүү утга учиртай болгох явдал юм. <figure>(учир нь энэ нь график юм). Зургийн хувьд бид элементийн давуу талыг ашиглаж болно <figcaprion>гурилан бүтээгдэхүүний гарчиг эсвэл тайлбарыг өгөх.</p>
<p>Үүнээс гадна бид агуулгын шошго нэмж болно <title>болон <desc>(SVG-ээс гаралтай) ба тэдгээрийг ARIA толгой, ID-тай холбож, "дэлгэц уншигчдад илүү контекст өгөх" үүрэгтэй.</p><p>
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400);
body {
font: 16px/1.4em "Montserrat", Arial, sans-serif;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.chart-text {
/*font: 16px/1.4em "Montserrat", Arial, sans-serif;*/
fill: #000;
-moz-transform: translateY(0.25em);
-ms-transform: translateY(0.25em);
-webkit-transform: translateY(0.25em);
transform: translateY(0.25em);
}
.chart-number {
font-size: 0.6em;
line-height: 1;
text-anchor: middle;
-moz-transform: translateY(-0.25em);
-ms-transform: translateY(-0.25em);
-webkit-transform: translateY(-0.25em);
transform: translateY(-0.25em);
}
.chart-label {
font-size: 0.2em;
text-transform: uppercase;
text-anchor: middle;
-moz-transform: translateY(0.7em);
-ms-transform: translateY(0.7em);
-webkit-transform: translateY(0.7em);
transform: translateY(0.7em);
}
figure {
display: flex;
justify-content: space-around;
flex-direction: column;
margin-left: -15px;
margin-right: -15px;
}
@media (min-width: 768px) {
figure {
flex-direction: row;
}
}
.figure-content,
.figure-key {
flex: 1;
padding-left: 15px;
padding-right: 15px;
align-self: center;
}
.figure-content svg {
height: auto;
}
.figure-key {
min-width: calc(8 / 12);
}
.figure-key {
margin-right: 6px;
}
.figure-key-list {
margin: 0;
padding: 0;
list-style: none;
}
.figure-key-list li {
margin: 0 0 8px;
padding: 0;
}
.shape-circle {
display: inline-block;
vertical-align: middle;
width: 32px;
height: 32px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.shape-fuschia {
background-color: #ce4b99;
}
.shape-lemon-lime {
background-color: #b1c94e;
}
.shape-blue {
background-color: #377bbc;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
</style>
<figure>
<div class="figure-content">
<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut" aria-labelledby="beers-title beers-desc" role="img">
<title id="beers-title">Миний зооринд шар айраг
Бельгийн дөрвөлжин
Ягаан диаграмын сегмент нь нийт 40%-ийг эзэлдэг бөгөөд энэ нь нийт 10 Бельгийн квадрупелээс 4 нь юм.
Энэтхэгийн эзэн хааны цайвар Алес
Ногоон диаграммын сегмент нь нийт 20% -ийг эзэлдэг бөгөөд энэ нь нийт 10-аас 2 нь Энэтхэгийн эзэн хааны цайвар алес юм.
Оросын эзэн хааны стоутс
Цэнхэр диаграмын сегмент нь нийт 3%-ийг эзэлдэг бөгөөд энэ нь нийт 10-аас 3 Оросын эзэн хааны бат бөх юм.
10
шар айраг
Нийт 10 шар айргийг харуулсан гурилан бүтээгдэхүүний график. Хоёр шар айраг нь Imperial India Pale Ales, дөрвөн шар айраг нь Бельгийн квадрупель, гурав нь Оросын Imperial Stouts юм. Хамгийн сүүлд үлдсэн шар айраг нь шошгогүй байна.
Мөн бид диаграммд домог түлхүүрийг нэг хэсэг болгон нэмж болно , "харагдах" үүрэг болон ариа-нуугдсан шинж чанараар тэмдэглэсэн, учир нь энэ нь харагдах байдалд үнэхээр хэрэгтэй.
CSS Flexbox ид шидийн тусламжтайгаар бид түлхүүрийг баруун тийш байрлуулж, диаграммтай босоо байдлаар зэрэгцүүлж чадна. Эцсийн бүтээгдэхүүнийг бидэнд юу өгөх вэ:
CSS загвар нь хилийн радиусын шинж чанарыг ашигладаг бөгөөд Flexbox нь тусдаа нийтлэл байж болох тул (сүүлийнх нь илүү урт тайлбар шаарддаг) тул би эдгээр сэдвүүдийг дараа нь хадгалах болно.
эцсийн үр дүн
Өмнө дурьдсанчлан, SVG объектуудын кодыг гараар бичих нь цаг хугацаа их шаарддаг, ялангуяа эдгээр объектуудыг бүтээх олон гайхалтай JavaScript сангууд байдаг гэдгийг анхаарч үзвэл. Гэхдээ (миний нөхцөл байдал гэх мэт) танд эсвэл танай багт JavaScript-д нөлөөлөхгүй, серверийн тал дээр эмхэтгэх арга хэрэг болох тохиолдол гарч болно.
Сайн мэдээ гэвэл та үүнийг эзэмшсэний дараа үүнийг өөр газар хамгийн бага хүчин чармайлтаар хэрэглэж болно. Нэмж дурдахад SVG объектуудаар гараа бохирдуулах нь тэдгээр нь хэрхэн ажилладаг талаар илүү ихийг мэдэж, тэдгээрийг ашиглахын ач тусыг олж мэдэх сайн арга юм.
Миний үр дүн:
- Иймэрхүү зүйлд математик ашиглах нь ахлах сургуульд байснаас хамаагүй илүү хөгжилтэй байдаг.
- Эргээд харахад stroke-dasharray болон stroke-dashoffset-ийн цаадах логик нь миний бодож байсан шиг тийм ч төвөгтэй биш гэдгийг би ойлгож байна.
- Энд нэмэлт хүртээмжийн түвшинг нэмэхээ бүү мартаарай. Эцсийн эцэст, хүртээмжтэй байх нь зөвхөн дэлгэц уншигчдын төлөө биш юм. Энэ нь таны агуулгыг илүү хүртээмжтэй болгож, бүх хүмүүс болон бүх төхөөрөмжид (хайлтын системийг оруулаад) ашиглахад шаардлагатай. Хэрэв таны JavaScript номын санд хандах боломж байхгүй бол түүнийг өөрчлөх талаар бодож үзээрэй.
Талбайн барилгын хоёр үндсэн төрөл байдаг:
- хүснэгт;
- Блоклох.
Интернет бий болсон цагаас хойш хүснэгтийн загвар давамгайлж ирсэн. Үүний давуу тал нь өгөгдсөн байршлын нарийвчлалыг агуулдаг. Гэсэн хэдий ч энэ нь тодорхой дутагдалтай талуудтай. Гол нь кодын ихэнх хэсэг, татаж авах хурд бага байдаг.
Хүснэгтийн бүдүүвчийг ашиглах үед вэб хуудсыг бүрэн ачаалах хүртэл харуулахгүй. Харин div блокуудыг ашиглах үед элементүүдийг шууд харуулдаг.
Ачаалах өндөр хурдаас гадна сайтыг блоклох нь html кодын хэмжээг хэд дахин багасгах боломжийг олгодог. Үүнд CSS ангиудыг ашиглах замаар.
Гэсэн хэдий ч, хуудсан дээрх өгөгдлийг харуулах бүтцийг бий болгохын тулд хүснэгтийн байршлыг ашиглах ёстой. Үүнийг ашиглах сонгодог жишээ бол хүснэгтүүдийг харуулах явдал юм.
Шошго дээр үндэслэн барилга байгууламжийг блоклох
Байршлын туслах хэрэгслүүд
Блокийн зохион байгуулалтад давхаргын байрлалыг каскадын загварын хуудас ашиглан хамгийн сайн хийдэг. Албан тушаалыг хариуцах үндсэн CSS өмч
Өмчийн синтакс:
хөвөх: зүүн | зөв | байхгүй | өвлөн авах,
Хаана:
- зүүн - элементийг дэлгэцийн зүүн ирмэг рүү зэрэгцүүлнэ. Үлдсэн элементүүд нь баруун тийшээ эргэлддэг;
- баруун талд - баруун талд тэгшлэх, үлдсэн элементүүдийг боох - зүүн талд;
- аль нь ч биш - боохыг зөвшөөрөхгүй;
- inherit - эх элементийн утгыг өвлөн авах.
Энэ өмчийг ашиглан div-г байрлуулах энгийн жишээг авч үзье:
Зүүн блок
баруун блок
Одоо гурав дахь div-г хуудасны төвд байрлуулахын тулд ижил шинж чанарыг ашиглахыг оролдъё. Гэвч харамсалтай нь float нь төвийн утгагүй. Мөн шинэ блокт баруун эсвэл зүүн тийш зэрэгцүүлэх утга өгөхөд энэ нь заасан чиглэлд шилжинэ. Тиймээс бүх гурван блокыг хөвөхөөр тохируулахад л үлддэг: зүүн :
Гэхдээ энэ нь бас хамгийн сайн сонголт биш юм. Цонхыг багасгахад бүх давхаргууд нь нэг эгнээнд босоо байрлалтай байх бөгөөд хэмжээ нь нэмэгдэхэд цонхны зүүн ирмэг дээр наалддаг. Тиймээс бидэнд div-г голлох илүү сайн арга хэрэгтэй байна.
Төвлөрсөн давхаргууд
Дараах жишээнд бид бусад элементүүдийг байрлуулахын тулд савны давхаргыг ашиглана. Энэ нь цонхны хэмжээг өөрчлөх үед блокуудыг өөр хоорондоо харьцангуйгаар солих асуудлыг шийддэг. Савыг голд нь төвлөрүүлэхийн тулд дээд ирмэг ба хажуугийн авто захын захын шинж чанарыг тэг утгаар тохируулна (маржин: 0 auto ):
Зүүн блок
төв блок
баруун блок
Энэ жишээ нь div-г хэвтээ байдлаар хэрхэн голлохыг харуулж байна. Хэрэв та дээрх кодыг бага зэрэг засварлавал блокуудын босоо байрлалд хүрч чадна. Үүнийг хийхийн тулд та зүгээр л савны давхаргын уртыг өөрчлөх хэрэгтэй (багасгах). Өөрөөр хэлбэл, css-ээ засварласны дараа анги дараах байдалтай байх ёстой.
Өөрчлөлт хийсний дараа бүх блокууд яг голд нь дараалан эгнэнэ. Мөн хөтчийн цонхны аль ч хэмжээгээр тэдний байрлал өөрчлөгдөхгүй. Босоо төвтэй div нь иймэрхүү харагдаж байна:
Дараах жишээн дээр бид чингэлэг доторх давхаргыг голлуулахын тулд хэд хэдэн шинэ css шинж чанарыг ашигласан:
div доторх div-г голлуулахын тулд энэ жишээнд ашигласан css шинж чанарууд болон тэдгээрийн утгуудын товч тайлбар:
- дэлгэц: inline-block - блокийн элементийг нэг мөрөнд байрлуулж, өөр элементээр боох;
- vertical-align: дунд - эцэг эхтэй харьцуулахад дунд хэсэгт байгаа элементийг зэрэгцүүлнэ;
- margin-left - зүүн талын захын зайг тохируулна.
Давхаргаас хэрхэн холбоос хийх вэ
Хачирхалтай сонсогдож байгаа ч боломжтой. Заримдаа өөр өөр төрлийн цэсийг гаргахад холбоос болгон div блок хэрэгтэй байж болно. Холболтын давхаргыг хэрэгжүүлэх практик жишээг авч үзье.
Энэ жишээнд шугамын дэлгэцийг ашиглан: блок , бид блок элементийн утгын холбоосыг тохируулсан. Мөн div-ийн өндрийг бүхэлд нь холбоос болгохын тулд өндөрийг: 100% тохируулна уу.
Блокийн элементүүдийг нуух, харуулах
Блок элементүүд нь хуучирсан хүснэгтийн байршлаас илүү интерфэйсийн функцийг өргөжүүлэх илүү олон сонголтыг өгдөг. Сайтын дизайн нь өвөрмөц бөгөөд танигдахуйц байх нь олонтаа тохиолддог. Гэхдээ ийм онцгой сул зай дутагдсаны төлөө та төлөх ёстой.
Энэ нь ялангуяа үндсэн хуудсанд хамаатай бөгөөд зар сурталчилгааны өртөг хамгийн өндөр байдаг. Тиймээс өөр сурталчилгааны баннер хаашаа "түлхэх" асуудал гарч байна. Эндээс та div-г хуудасны голд зэрэгцүүлэхээс зайлсхийж чадахгүй!
Илүү оновчтой шийдэл бол зарим блокыг нуух явдал юм. Ийм хэрэгжилтийн энгийн жишээ энд байна:
Энэ бол шидэт товчлуур юм. Үүн дээр дарснаар далд блокыг нуух эсвэл харуулах болно.
Хэдийгээр дугуй графикуудЭдгээр нь энгийн статистик мэдээллээс эхлээд явцын бар, таймер хүртэлх мэдээллийг харуулах хамгийн түгээмэл арга бөгөөд хамгийн энгийн хоёр өнгийн хэлбэрээр ч гэсэн тэдгээрийг вэбд суурилсан энгийн аргуудаас өөр ямар ч аргаар бүтээдэг уламжлалтай. Ихэвчлэн тэдгээрийг хэрэгжүүлэхийн тулд гадны график засварлагчдыг ашигладаг байсан олон дугуй диаграмын утгын олон зураг, эсвэл JavaScript хүрээнүүд нь илүү төвөгтэй диаграммуудыг үүсгэх зорилготой.
Хэдийгээр одоо даалгавар нь өмнөх шигээ боломжгүй мэт санагдах боловч энгийн, хоёрдмол утгагүй шийдэл байхгүй хэвээр байна. Гэсэн хэдий ч өнөөдөр илүү олон зүйл бий (дээрх аргуудтай харьцуулахад), дугуй диаграмыг хэрэгжүүлэх илүү дэмжигдсэн аргууд.
хувиргахад суурилсан шийдэл
Энэ шийдэл нь зохион байгуулалтын хувьд хамгийн шилдэг нь: түүнд зөвхөн нэг элемент хэрэгтэй бөгөөд бусад бүх зүйлийг псевдо-элементүүд, хувиргалтууд болон CSS градиентууд ашиглан хийх болно. Энгийн элементээс эхэлцгээе:
Одоо бид хатуу кодтой дүрс бүхий дугуй диаграммыг хүсч байна гэж бодъё 20% . Бид дараа нь уян хатан болгох тал дээр ажиллах болно. Эхлээд элементийг тойрог хэлбэрээр хэлбэржүүлцгээе, энэ нь бидний дэвсгэр байх болно (Зураг 1):
Зураг 1 - Бидний эхлэх цэг (0%-ийг харуулсан дугуй диаграм) .pie ( өргөн: 100px; өндөр: 100px; хүрээ-радиус: 50%; дэвсгэр: шар ногоон; )
Манай дугуй диаграм нь ногоон өнгөтэй (ялангуяа шар ногоон) байх бөгөөд бор сектор (#655) хувийг харуулсан байна. Бид хувь хэмжээний хувьд ташуу хувиргалтуудыг ашиглахыг хүсч магадгүй, гэхдээ бага зэрэг туршилтаас харахад энэ нь нэлээд хайхрамжгүй шийдэл байх болно. Үүний оронд бид тойргийнхоо зүүн ба баруун талыг өнгөөр будна хоёр өнгөмөн ашиглах псевдо элементийг эргүүлж, бидэнд хэрэгтэй тойргийн зөвхөн хэсгийг л харуулах.
Тойргийнхоо баруун талыг хүрэн өнгөтэй болгохын тулд бид энгийн шугаман градиент ашиглана.
Арын дэвсгэр зураг: шугаман-градиент(баруун тийш, ил тод 50%, #655 0); Зураг 2 - Манай тойргийн баруун талыг энгийн шугаман градиентаар бор өнгөтэй болгох
Зураг 2-оос харахад энэ нь бидэнд хэрэгтэй зүйл юм. Одоо бид маскын үүрэг гүйцэтгэх псевдо элементийг загварчилж эхэлж болно.
Pie::prefor (агуулга: ""; дэлгэц: блок; зүүн зах: 50%; өндөр: 100%; ) Зураг 3 - Энд тасархай хүрээтэйгээр тодруулсан маск үүрэг гүйцэтгэдэг псевдо элемент
Зураг 3-аас та манай псевдо-элемент нь дугуй диаграмын элементтэй харьцуулахад одоогийн байдлаар хэрхэн байрлаж байгааг харж болно. Одоо энэ нь загварчлагдаагүй байгаа бөгөөд ямар ч үүрэг гүйцэтгэдэггүй. Энэ бол зүгээр л үл үзэгдэх тэгш өнцөгт юм. Үүнийг загварчилж эхлэхээсээ өмнө хэд хэдэн тайлбар хийцгээе.
- бидний хүссэнээр манай тойргийн хүрэн хэсгийг нуу, дараа нь бид background-color ашиглан псевдо-элемент дээр ногоон дэвсгэр хэрэглэх ёстой: эх элементтэй ижил дэвсгэр өнгийг оноохдоо давхардахаас сэргийлж өвлөх;
- бид түүнийг хүсч байна тойргийн төвийг тойрон эргэлддэг, энэ нь псевдо-элементийн зүүн талын дунд байгаа тул бид transform-origin-ийг 0 50% эсвэл зүгээр л зүүн талд тохируулах ёстой;
- Бид үүнийг тэгш өнцөгт болгохыг хүсэхгүй байна, учир нь энэ нь бялууны ирмэгээс давж гарах тул бид .pie-д халих: hidden буюу хагас тойрог болгохын тулд хилийн радиус өгөх хэрэгтэй.
Энэ бүгдийг нэгтгэж, бид псевдо элементийн дараах хэв маягийг олж авдаг;
Pie::prefor (агуулга: ""; дэлгэц: блок; зүүн захаас: 50%; өндөр: 100%; хүрээ-радиус: 0 100% 100% 0 / 50%; дэвсгэр өнгө: өвлөх; хувиргах-гарал үүсэл: зүүн; ) Зураг 4 - Загвар хийж дууссаны дараа бидний псевдо элемент (цэгтэй хүрээгээр харуулсан)
Тайлбар: backround-color: inherit-ийн оронд background: inherit;-г бүү ашигла, учир нь энэ нь мөн градиентийг өвлөн авах болно!
Одоо бидний дугуй диаграмм зураг 4 шиг харагдаж байна. Эндээс л хөгжилтэй эхэлдэг! Бид эхэлж болно псевдо элементийг эргүүлэх, rotate() хувиргалтыг ашиглаж байна. Учир нь 20% , бид хэрэгжүүлэх гэж оролдож байгаа бол бид 72deg (0.2 × 360 = 72) эсвэл .2turn утгыг ашиглаж болох бөгөөд энэ нь илүү унших боломжтой. Зураг 5-аас та өөр хэд хэдэн утгын хувьд энэ нь ямар байгааг харж болно.
Зураг 5 - Зүүнээс баруун тийш өөр өөр хувийг харуулсан энгийн дугуй график: 10% (36 градус эсвэл .1 эргэх), 20% (72 градус эсвэл .2 эргэх), 40% (144 градус эсвэл .4 эргэх)
Та ажил дууссан гэж бодож магадгүй, гэхдээ харамсалтай нь бүх зүйл тийм ч хялбар биш юм. Манай дугуй диаграм нь 0-ээс 50% хүртэлх хувийг харуулахад тохиромжтой, гэхдээ бид 60% эргэлтийг харуулахыг оролдвол (.6 эргэлтийг ашигласнаар) бид Зураг 6-д үзүүлсэн зүйлийг олж авна. Гэсэн хэдий ч итгэл найдвараа бүү алдаарай. засаад хийцгээе!
Зураг 6 - Манай дугуй диаграмыг хувьцааны хувьд задалсан 50% -иас дээш(60%-ийг энд харуулав)
Хэрэв бид 50% -100% -ийн хувьцааг харуулах нь тусдаа асуудал гэж үзвэл бид тэдний хувьд ашиглаж болохыг харж болно. өмнөх шийдлийн урвуу хувилбар: хүрэн псевдо-элемент нь 0-ээс .5 эргэлт хүртэл эргэлддэг. Тэгэхээр 60%-ийн хувьцааны хувьд псевдо элементийн код дараах байдалтай байна.
Pie::prefor (агуулга: ""; дэлгэц: блок; зүүн захаас: 50%; өндөр: 100%; хүрээ-радиус: 0 100% 100% 0 / 50%; дэвсгэр: #655; хувиргах эх: зүүн ; transform: rotate(.1turn); ) Зураг 7 - Бидний одоо зөв 60%-ийн утгатай дугуй диаграмм
Зураг 7-д та кодыг хэрхэн ажиллаж байгааг харж болно. Бид одоо ямар ч хувийг харуулах аргыг боловсруулсан тул бид чадна css хөдөлгөөнт дүрс бүхий дугуй диаграмыг 0% -аас 100% хүртэл хөдөлгөөнтэй болгох, нэг төрлийн ахиц дэвшлийн үзүүлэлтийг бий болгох:
@keyframes spin ( to ( transform: rotate(.5turn); ) ) @keyframes bg ( 50% ( дэвсгэр: #655; ) ) .pie::before ( контент: ""; дэлгэц: блок; зүүн талын зай: 50 %; өндөр: 100%; хилийн радиус: 0 100% 100% 0 / 50%; дэвсгэр өнгө: өвлөх; хувиргах-гарал: зүүн; хөдөлгөөнт дүрс: spin 3s шугаман хязгааргүй, bg 6s алхам хязгааргүй; )
За, гэхдээ бид диаграмыг ашиглах хамгийн түгээмэл тохиолдол болох өөр өөр хувьтай олон статик дугуй диаграмыг хэрхэн загварчлах вэ? Хамгийн тохиромжтой нь бид иймэрхүү зүйлийг хэвлэх боломжтой байхыг хүсч байна:
Нэг нь 20%, нөгөө нь 60% гэсэн хоёр дугуй диаграм аваарай. Эхлээд бид үүнийг доторлогооны хэв маягаар хэрхэн хийж болохыг харна, дараа нь текстийн агуулгыг задлан шинжлэхийн тулд үргэлж богино скрипт бичиж, кодын дэгжин байдал, багтаамж, засвар үйлчилгээ, магадгүй хамгийн чухал нь хүртээмжтэй байхын тулд дээрх дотоод хэв маягийг нэмж болно.
Дугуй диаграмын хувь хэмжээг шугамын хэв маягаар удирдахад бэрхшээлтэй байгаа нь хувь хэмжээг тохируулах үүрэгтэй CSS кодыг псевдо элемент дээр тохируулсан байдаг. Та аль хэдийн мэдэж байгаачлан, бид псевдо-элементүүд дээр шугаман хэв маягийг тохируулах боломжгүй, ийм учраас Бид илүү бүтээлч байх ёстой.
Анхаарна уу: Ашиглахад зориулагдсан өнгөний спектрийн утгууддавталт, нарийн төвөгтэй тооцоололгүйгээр та доорх аргыг ашиглаж болно. Та бусад тохиолдолд ижил аргыг ашиглаж болно. Энэ аргыг хэрхэн ашиглах энгийн, тусгаарлагдсан жишээг доор харуулав.
Шийдэл нь хамгийн гэнэтийн газруудын нэгээс ирдэг. Бид аль хэдийн үзүүлсэн хөдөлгөөнт дүрсийг ашиглах боловч түр зогсоох болно. Энгийн хөдөлгөөнт дүрс шиг ажиллуулахын оронд бид сөрөг хөдөлгөөнт саатлыг ашиглах болно хөдөлгөөнт дүрсийн аль ч цэгийн байрлалыг тохируулахтэгээд тэнд үлдэх. Гайхсан уу? Тийм ээ, сөрөг хөдөлгөөнт саатлын утгыг зөвхөн техникийн үзүүлэлтэд зөвшөөрдөг төдийгүй үүнтэй төстэй тохиолдолд маш их хэрэгтэй байдаг.
Манай хөдөлгөөнт дүрсийг түр зогсоосон тул зөвхөн эхний анимейшн фрэймийг харуулах болно (бидний сөрөг хөдөлгөөнт саатлын утгаар тодорхойлогддог). Дугуй диаграммд үзүүлсэн хувь нь бидний хөдөлгөөнт саатлын нийт үргэлжлэх хугацаанд эзлэх хувь байх болно. Жишээлбэл, одоогийн 6 секундын хугацаатай бол 20% -ийг харуулахын тулд бидэнд хөдөлгөөнт саатлын утга -1.2 секунд хэрэгтэй. Тооцооллыг хялбарчлахын тулд бид үргэлжлэх хугацааг 100 секундээр тохируулах болно. Хөдөлгөөнт дүрс бүрмөсөн зогссон тул түүний үргэлжлэх хугацаанд бидний тогтоосон утгад өөр үүрэг байхгүй гэдгийг санаарай.
Тэгээд сүүлчийн асуулт: хөдөлгөөнт дүрсийг псевдо элементэд хэрэглэж байгаа хэдий ч бид .pie элемент дээр мөрийн хэв маягийг тохируулахыг хүсэж байна. Гэсэн хэдий ч асаалттай ч гэсэн
Мөн энэхүү хөдөлгөөнт дүрсний CSS код нь дараах байдалтай болно (. Pie-н дүрмүүд хэвээр байгаа тул харагдахгүй байна):
@keyframes spin ( to ( transform: rotate(.5turn); ) ) @keyframes bg ( 50% ( дэвсгэр: #655; ) ) .pie::before ( /* [бусад загвар өөрчлөгдөөгүй] */ хөдөлгөөнт дүрс: 50 секундын шугаман эргүүлэх Infinite, bg 100s step-end infinite; хөдөлгөөнт-тоглуулах-төлөв: түр зогссон; хөдөлгөөнт-хоцролт: өвлөх; )
Энэ үед бид тэмдэглэгээг хувиргаж, анх бодож байсанчлан хувь хэмжээг контент болгон ашиглаж, энгийн скриптээр дамжуулан хөдөлгөөнт саатлын хэв маягийг нэмж болно:
$$(".pie").forEach(function(pie) ( var p = parseFloat(pie.textContent); pie.style.animationDelay = "-" + p + "s"; ));
Хүртээмжтэй, ашиглах боломжтой байх үүднээс бид текстийг хөндөөгүй гэдгийг анхаарна уу. Манай дугуй диаграм одоо Зураг 8 шиг харагдаж байна. Бид өнгө: ил тод байхын тулд ашиглах боломжтой текстийг нуух хэрэгтэй. сонгох, хэвлэх боломжтой. Нэмэлт гялбааны хувьд бид боломжтой дугуй диаграмын төвд хувийн утгыг тавьИнгэснээр хэрэглэгч тэдгээрийг сонгохыг оролдох үед тэдгээр нь санамсаргүй газар байдаггүй. Үүнийг хийхийн тулд бидэнд хэрэгтэй:
Зураг 8 - Бидний текстийг нуухаас өмнө
- диаграмын өндрийн утгыг шугамын өндөрт хөрвүүлэх (эсвэл өндөртэй тэнцүү шугамын өндрийн утгыг нэмэх, гэхдээ энэ нь мөрийн өндрийг тооцоолсон өндөрт тохируулах тул кодыг утгагүй хуулбарлах болно, энэ нь зүгээр);
- псевдо элементийн хэмжээ, байрлалыг тохируулна үнэмлэхүй байрлалингэснээр текстийг доош түлхэхгүй байх;
- text-align нэмэх: төв; Текстийг хэвтээ байдлаар голлуулах.
Эцсийн код дараах байдалтай байна.
Бялуу (байрлал: харьцангуй; өргөн: 100 пиксел; шугамын өндөр: 100 пиксел; хүрээний радиус: 50%; дэвсгэр: шар ногоон; дэвсгэр зураг: шугаман-градиент (баруун тийш, ил тод 50%, #655 0); өнгө: ил тод ; text-aign: center; ) @keyframes spin ( to ( transform: rotate(.5turn); ) ) @keyframes bg ( 50% (фон: #655; ) ) .pie::for ( контент: ""; байрлал : үнэмлэхүй; дээд: 0; зүүн: 50%; өргөн: 50%; өндөр: 100%; хилийн радиус: 0 100% 100% 0 / 50%; дэвсгэр өнгө: өвлөх; хувиргах эх: зүүн; хөдөлгөөнт дүрс: spin 50s linear infinite, bg 100s step-end infinite; хөдөлгөөнт-тоглуулах-төлөв: түр зогссон; хөдөлгөөнт-хоцролт: өвлөх; )
SVG дээр суурилсан шийдэл
SVG нь графикийн олон ажлыг хөнгөвчлөх бөгөөд дугуй диаграм нь үл хамаарах зүйл биш юм. Гэсэн хэдий ч нарийн төвөгтэй математик шаарддаг замуудыг ашиглан дугуй диаграм үүсгэхийн оронд бид бага зэрэг заль мэхийг ашиглах болно.
Тойргоор эхэлцгээе:
Одоо үүнд хэд хэдэн үндсэн хэв маягийг хэрэглэцгээе:
Тойрог (бөглөх: шар ногоон; зураас: №655; зураасны өргөн: 30; )
Анхаарна уу: Та бүхний мэдэж байгаагаар эдгээр CSS шинж чанаруудыг атрибут хэлбэрээр авах боломжтойХэрэв зөөвөрлөх нь санаа зовоосон асуудал байсан бол хэрэг болох SVG элементүүд.
Зураг 9 - Бидний эхлэх цэг: зузаан # 655 цус харвалт бүхий ногоон SVG тойрог
Та бидний тойрсон тойргийг 9-р зурагт харж болно. SVG зураас нь зөвхөн харвалт болон харвалтын өргөн шинж чанаруудаас бүрддэг. Цус харвалттай холбоотой бусад бага алдартай шинж чанарууд байдаг бөгөөд энэ нь гадаад төрхийг нь нарийн тохируулах боломжийг олгодог. Тэдгээрийн нэг нь тасархай цус харвалт үүсгэх зориулалттай stroke-dasharray юм. Жишээлбэл, бид үүнийг үүнд ашиглаж болно:
Цус харвалт-дашаррей: 20 10; Зураг 10 - Stroke-dasharray-ээр үүсгэсэн энгийн тасархай цус харвалт
Энэ нь бид 10-р зурагт үзүүлсэн шиг 20 урттай зураасыг 10 урттай зураас авахыг хүсэж байна гэсэн үг. Энэ үед та энэ SVG жишээ нь дугуй диаграмтай ямар нэгэн холбоотой эсэхийг гайхаж байж магадгүй юм. Гэхдээ бид тойргийнхоо тойргийн хэмжээнээс их буюу тэнцүү (C = 2πr, эсвэл манай тохиолдолд C = 2π × 30 ≈ 189) зураасны урт 0, цоорхойг хэрэглэхэд бүх зүйл илүү тодорхой болно.
Тархины цус харвалт: 0 189; Зураг 11 - Цус харвалтын хэд хэдэн утгууд ба тэдгээрийн үр дүн; зүүнээс баруун тийш: 0 189 ; 40 189; 95189; 150 189
Таны харж байгаагаар 11-р зураг дээрх эхний тойрог дээр энэ нь цус харвалтыг бүрмөсөн арилгаж, зөвхөн ногоон тойрог л үлддэг. Гэсэн хэдий ч, бид эхний утгыг нэмэгдүүлж эхлэхэд хөгжилтэй байдал эхэлдэг (Зураг 11): Ийм урт завсарлагааны улмаас бид тасархай цус харвалт авахаа больсон, харин бидний тодорхойлсон тойргийн тойргийн ийм хувийг хамарсан цус харвалт болно.
Та бид аль замаар явж байгаагаа аль хэдийн ойлгосон байж магадгүй: хэрвээ бид тойргийнхоо радиусыг түүний зураасаар бүрэн бүрхэхүйц хэмжээгээр багасгах юм бол бид дугуй диаграмтай маш төстэй зүйлтэй болно. Жишээлбэл, 25 радиустай, цус харвалтын өргөнтэй (цус харвалтын өргөн) 50 тойрогт хэрэглэвэл хэрхэн харагдахыг Зураг 12-оос харж болно.
Зураг 12 - Манай SVG зураг дугуй диаграм шиг харагдаж байна
Санаж байгаарай: SVG зураас нь үргэлж хэрэглэж буй элементийн тал нь дотор талд, гадна тал нь байдаг. Ирээдүйд бид энэ зан үйлийг хянах боломжтой болно.
тойрог (бөглөх: шар ногоон; харвалт: #655; харвалт-өргөн: 50; харвалт-дашаррей: 60 158; /* 2π × 25 ≈ 158 */ )
Одоо энэ зургийг өмнөх шийдэлд бий болгосон шиг дугуй диаграм болгон хувиргах нь маш амархан: зүгээр л нэмнэ үү цус харвалтын хувьд том ногоон тойрогболон цагийн зүүний эсрэг 90° эргүүлнэтэгснээр энэ нь дундаас дээд хэсгээс эхэлнэ. Учир нь
Svg ( хувиргах: эргүүлэх(-90deg); дэвсгэр: шар ногоон; хилийн радиус: 50%; ) Зураг 13 - SVG-тэй эцсийн дугуй диаграмм
Та эцсийн үр дүнг Зураг 13-аас харж болно. Энэ арга нь дугуй диаграмыг 0% -аас 100% хүртэл хөдөлгөөнт болгоход илүү хялбар болгодог. Бид зүгээр л харвалт-dasharray-г 0 158-аас 158 158 болгон өөрчилдөг CSS хөдөлгөөнт дүрс үүсгэх хэрэгтэй:
@keyframes дүүргэлт ( to ( stroke-dasharray: 158 158; ) ) тойрог ( дүүргэх: шар ногоон; харвалт: #655; зураасны өргөн: 50; stroke-dasharray: 0 158; хөдөлгөөнт дүрс: дүүргэлт 5s шугаман хязгааргүй; )
Цаашид илүү боловсронгуй болгохын тулд бид тойргийн тодорхой радиусыг тохируулах боломжтой бөгөөд ингэснээр тойрог нь 100 (хязгааргүй ойрхон) байх болно. цус харвалтын уртыг хувиар зааж өгнө, ямар ч тооцоололгүйгээр. Тойрог нь 2πr тул бидэнд 100 ÷ 2π ≈ 15.915494309 радиус хэрэгтэй бөгөөд үүнийг бидний хэрэгцээнд зориулан 16 хүртэл бөөрөнхийлж болно. Мөн бид SVG-ийн хэмжээсийг өргөн, өндрийн шинж чанаруудын оронд viewBox шинж чанарт тохируулна. , савныхаа хэмжээсийг тохируулах боломжтой болгох.
Эдгээр өөрчлөлтийн дараа 13-р зурагт үзүүлсэн дугуй диаграмын зураглал дараах байдалтай байна.
Тэгээд CSS дараах байдалтай болно.
Svg (өргөн: 100px; өндөр: 100px; хувиргах: эргүүлэх(-90deg); дэвсгэр: шар ногоон; хүрээ-радиус: 50%; ) тойрог (бөглөх: шар ногоон; харвалт: #655; зураасны өргөн: 32; харвалт-дашаррай : 38 100; /* 38% */ )
Анхаар, хувь хэмжээг өөрчлөх нь одоо хэр амархан вэ. Хэдийгээр ийм хялбаршуулсан ч гэсэн бид дугуй диаграм бүрт SVG тэмдэглэгээг давтахыг хүсэхгүй байна. JavaScript бидэнд бага зэрэг автоматжуулалт хийхэд туслах цаг болжээ. Бид иймэрхүү энгийн HTML тэмдэглэгээг авахын тулд жижиг скрипт бичнэ...
Мөн шаардлагатай бүх элементүүд болон шинж чанаруудтай .pie элемент бүрийн дотор SVG-г нэмнэ үү. Энэ нь мөн элемент нэмэх болно
Нийт 10 шар айргийг харуулсан гурилан бүтээгдэхүүний график. Хоёр шар айраг нь Imperial India Pale Ales, дөрвөн шар айраг нь Бельгийн квадрупель, гурав нь Оросын Imperial Stouts юм. Хамгийн сүүлд үлдсэн шар айраг нь шошгогүй байна.
Мөн бид диаграммд домог түлхүүрийг нэг хэсэг болгон нэмж болно
CSS Flexbox ид шидийн тусламжтайгаар бид түлхүүрийг баруун тийш байрлуулж, диаграммтай босоо байдлаар зэрэгцүүлж чадна. Эцсийн бүтээгдэхүүнийг бидэнд юу өгөх вэ:
CSS загвар нь хилийн радиусын шинж чанарыг ашигладаг бөгөөд Flexbox нь тусдаа нийтлэл байж болох тул (сүүлийнх нь илүү урт тайлбар шаарддаг) тул би эдгээр сэдвүүдийг дараа нь хадгалах болно.
эцсийн үр дүн
Өмнө дурьдсанчлан, SVG объектуудын кодыг гараар бичих нь цаг хугацаа их шаарддаг, ялангуяа эдгээр объектуудыг бүтээх олон гайхалтай JavaScript сангууд байдаг гэдгийг анхаарч үзвэл. Гэхдээ (миний нөхцөл байдал гэх мэт) танд эсвэл танай багт JavaScript-д нөлөөлөхгүй, серверийн тал дээр эмхэтгэх арга хэрэг болох тохиолдол гарч болно.
Сайн мэдээ гэвэл та үүнийг эзэмшсэний дараа үүнийг өөр газар хамгийн бага хүчин чармайлтаар хэрэглэж болно. Нэмж дурдахад SVG объектуудаар гараа бохирдуулах нь тэдгээр нь хэрхэн ажилладаг талаар илүү ихийг мэдэж, тэдгээрийг ашиглахын ач тусыг олж мэдэх сайн арга юм.
Миний үр дүн:
- Иймэрхүү зүйлд математик ашиглах нь ахлах сургуульд байснаас хамаагүй илүү хөгжилтэй байдаг.
- Эргээд харахад stroke-dasharray болон stroke-dashoffset-ийн цаадах логик нь миний бодож байсан шиг тийм ч төвөгтэй биш гэдгийг би ойлгож байна.
- Энд нэмэлт хүртээмжийн түвшинг нэмэхээ бүү мартаарай. Эцсийн эцэст, хүртээмжтэй байх нь зөвхөн дэлгэц уншигчдын төлөө биш юм. Энэ нь таны агуулгыг илүү хүртээмжтэй болгож, бүх хүмүүс болон бүх төхөөрөмжид (хайлтын системийг оруулаад) ашиглахад шаардлагатай. Хэрэв таны JavaScript номын санд хандах боломж байхгүй бол түүнийг өөрчлөх талаар бодож үзээрэй.
