Интерактивни графикони са ЈаваСцрипт -ом и Хигхцхартс -овима

Хигхцхартс је библиотека написана у ХТМЛ5 и чистом Јавасцрипт -у:

Хајде да видимо како то функционише, како је структурирано и како то применити на нашој веб страници.
Структура именика
Прво преузимамо зип који садржи нашу библиотеку, распакујемо га и можемо видети директоријум наших датотека и његову структуру.

Хајде да видимо шта сваки директоријум садржи и за шта се користи:

• индек.хтмл: Ово је ХТМЛ страница за тестирање, помоћу које можете направити тестове и прегледати подразумеване опције.
• примери: Ова фасцикла садржи сав изворни код за примере.
• графика: Ова фасцикла садржи слике коришћене у примерима.
• екпорт-сервер: Ово је директоријум који садржи функцију на страни сервера за извоз графике у слику.
• јс: Ово је главни директориј Хигхцхартс -а. Свака Јавасцрипт датотека има два суфикса, први .срц.јс је онај који садржи изворни код са коментарима, а други .јс је његова минимална верзија.
• адаптери: Ево додатака које можете користити Моотоолс или Прототип Као оквири, унутар овог директоријума налази се следеће:

• екпорт.јс: ова датотека нам даје функције за извоз и штампање.

• Теме: Ова фасцикла садржи низ унапред изграђених Јавасцрипт датотека са поставкама као што су боја позадине, стилови, између осталог. Можемо учитати једну од ових датотека у графику за различите стилове.

Видевши како ова библиотека функционише и како је организована, пређимо на практичан пример како се примењује Хигхцхартс на нашој веб страници.

Прво укључујемо библиотеке Хигхцхартс, као и библиотеке у јКуери за додатну функционалност:

 Хигхцхартс Први пример 

Крива графикон је дефинисан у спецификацији објекта која садржи сва својства и низ података.

 вар цхарт = нев Хигхцхартс.Цхарт ({цхарт: {…}, титле: '…' …}); 

Када се овај објекат креира, графика се приказује у прегледачу, унутар овог објекта постоји низ опција које ћемо објаснити у наставку.
Упутство рендерТо говори Хигхцхартс -у да прикаже графикон у ХТМЛ -у, посебно уса ид = "контејнер". Опција тип дефинише врсту графикона, опције могу бити: површина, линија, сплине итд. У овом примеру ћемо користити сплине.

 графикон: {рендерТо: 'цонтаинер', тип: 'сплине'} 

Након тога постављамо наслов и поднаслов који ће се појавити при врху графикона.

 наслов: {текст: 'Веб прегледачи …'}, поднаслов: {текст: 'Од 2008. до данас'}, 

У опцији категорија у својини кАкис садржи низ са ознакама сваког уноса података и са тицкИнтервалс Одвајамо начин штампања ових налепница.

 кОса: {категорије: ['јануар 2008', 'фебруар',…. ], тицкИнтервал: 3}, 

Опције на имању иАкис Они нам омогућавају да доделимо наслов тој оси и поставимо минималну и максималну вредност у којој ћемо ограничити наш графикон.

 иОса: {титле: {тект: 'Проценат%'}, мин: 0}, 

Власништво од плотОптионс Он контролише како ће се свака серија података приказивати у зависности од врсте графикона.

 плотОптионс: {сериес: {линеВидтх: 2}}, 

Својство серије је центар целог конфигурацијског објекта који дефинише податке који ће уносити графикон.

 серија: [{наме: 'Интернет Екплорер', подаци: [54.7, 54.7, 53.9, 54.8, 54.4,…]}, {наме: 'ФиреФок', подаци: [36.4, 36.5, 37.0, 39.1, 39.8,…] }, { 

Сада када су сви делови кода објашњени, да видимо како би то изгледало у нашем прегледачу.

На крају остављам комплетан код тако да га можете сами тестирати и не заборављајући да се може прилагодити тако да га прилагоди било којој потреби.

 Хигхцхартс Први пример

Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен