Мазмун
Жооптуу веб-иштеп чыгуучу катары мен стандарттык технологияларды бир капюшон астына киргизүүнү көздөп, W3C One Web убадасын аткарууга аракет кылам.
Бирдей маалыматты, дизайнды жана өз ара аракеттенүүнү ар бир чөйрөдө жеткиликтүү кылуу - ар бири өзүнүн жеке чектөөсү менен келгенине карабастан, башында мүмкүн эмес болуп калышы мүмкүн. Бул иштеп чыгуучунун ишинин эң татаал бөлүктөрүнүн бири, бирок дагы деле болсо бул биз аткара турган жана аткара турган убада деп ойлойм.
Белгилүү бир медиада айрым контентти көрсөтпөө же кээ бир өз ара аракеттерди жокко чыгаруу көйгөйү анын W3C келишимин бузгандыгында эмес, биздин колдонуучулардын күтүүлөрүн бузгандыгында. Биз айып пулду ошол жерде төлөйбүз.
Вебсайтта сиздин сүйүктүү баскычты ачкандан ашыкча тажатма эч нерсе жок, сиз автобуста отурганда жок болуп, аны баскыңыз келет! Менин тажрыйбам боюнча, бул колдонуучуну веб-сайтты толугу менен каралбай коюуну тандап алышы мүмкүн.
Менин оюмча, бул принциптер Интернеттеги каалаган мазмунга карата колдонулушу керек жана ага маалыматтарды визуалдаштыруу кирет.Мобилдик жана планшетте жеткиликтүү болушу керек, бирок ошондой эле чоң кеңири экрандуу телекөрсөтүүдө сонун көрсөтүлүп, иштөө панелин ишке ашырууну каалаган кардардын долбооруна туш болуп, колдо болгон параметрлер менен Ifelt утулуп калды.
Ал жакта бир нече тонна жакшы диаграмма китепканалары бар болчу, бирок алардын эч кимиси жөнөкөй жана жагымдуу көрүнгөн диаграммаларды түзүү маселесин чечкен жок, алар да өзүлөрүн сезгичтик менен мамиле кылышты.
Учурдагы китепканаларды оңдоп, аларды өзүм каалагандай алып жүрүүгө аракет жасап, бир нече саат жумшагандан кийин, мен жөн гана өз китепканамды түзүүнү чечтим. Бул Chartist.js төрөлгөндүгүн белгиледи.
Туруу жана иштөө
Chartist.js менен баштоонун эң оңой жолу - бул Bower топтом менеджери (bower.io). Андан кийин Chartist.js акыркы нускасын кабыгыңызга төмөнкүдөй буйрукту терип орното аласыз:
bower install chartist - сактоо
Эми Chartist.js орнотулган, ал эми жергиликтүү, жана сиздин кийинки көрсөтмөлөрдү күтүп жатабыз. Сизге керек болгон нерселер - бул HTMLге ресурстарды кошуу, ошондо сиз жакшы жооп берүүчү схемаларды чийүүгө даярсыз.
link rel = "stylesheet" href = "bower_components / chartist / libdist / chartist.min.css"> script src = "bower_components / chartist / libdist / chartist.min.js"> / script>
Chartist.js эч кандай көзкарандылыксыз келет жана кысылган көлөмү 10KBдан аз. Chartist.js программасынын негизги максаты - бирден-бир көйгөйдү чечүү, бул иштеп чыгуучуларга жөнөкөй, жооптуу диаграммаларды тартууга мүмкүнчүлүк берүү. DOMдогу SVG сыяктуу сапаттуу веб-стандарттардын жана анын көрүнүшү үчүн CSSтин күчүн колдонот. Кооптонууларды так бөлүштүрүү жана стандарттык технологияларды колдонуу менен, Chartist.js сизге керектүү нерселердин бардыгын камсыздай алат жана андан башка эч нерсе жок.
Chartist.js бир гана көйгөйдү чечет: devsке жөнөкөй, жооптуу диаграммаларды тартуу мүмкүнчүлүгүн берүү
Учурда көптөгөн китепканалар менен байкап жаткан эң чоң маселе, алар өтө көп көйгөйлөрдү чечүүгө аракет кылып, тиркемелер эмес, китепканалар экендигин унутуп калышты. Китепкана баарын ыңгайлаштырган жагдайларга туш болдуңуз, бирок сиз бир нерсени жөндөп алгыңыз келет. Веб-стандарттарга таянуу менен, сиз Chartist.js функциясын оңой эле кеңейтип, сызыктуу масштабда жасай аласыз.
Биринчи диаграмманы бузуу
Эми Chartist.js долбоорун киргизгенден кийин, алдыга жылып, биринчи диаграммаңызды түзсөңүз болот. Китепкана Sass (SCSS) версиясы менен жеңилдетилген же ыңгайлаштырылган айрым демейки стилдер менен камсыздалган.
Эгер сиз демейки стилдерди колдонууну кааласаңыз, анда HTML'иңизде achart контейнерин түзүү үчүн алдын ала курулган CSS класс .ct-диаграммасын колдонсоңуз болот.
div class = "ct-chart"> / div>
Бул HTML бөлүгү үчүн буга чейин эле. Албетте, div> же контекстке туура келген башка элементтерди колдонууну кааласаңыз, ал сизге байланыштуу.
Chartist.Line ('. Ct-диаграмма', {энбелгилери: ['Дш', 'Шейшемби', 'Шар', 'Бш', 'Жума'], сериялар: [[0, 3, 2, 8, 9] , [1, 2, 3, 5, 8]]}, {туурасы: '300px', бийиктиги: '200px'});
Куттуктайбыз, жаңы диаграмманы Chartist.js колдонмосун түздүңүз! Бул бир кесим торт эмес беле? Бирок күтө туруңуз ... ал диаграммага жооп берген библиотека эмеспи? Албетте, пикселге негизделген графигиңиз үчүн белгиленген өлчөмдөрдү колдонууну сунуш кылбайт элем, туурабы?
Кийинки бет: Chartist.js менен жооптуу диаграммаларды түзүү жөнүндө көбүрөөк маалымат
