Html գրաֆիկն ըստ կետերի պատրաստ է: Javascript գրադարանների ակնարկ գծագրման համար: jQuery մկնիկի անիվի ոլորման էֆեկտով

. Սցենարն ինքնին, համեմատած նախորդ օրինակի հետ, պահպանում է իր կառուցվածքը և բաղկացած է երկու խմբագրվող մասից՝ գծապատկերում ցուցադրելու իրական տվյալները և դրա տարբեր պարամետրերը: hAxis և vAxis պարամետրերի միջոցով պարզության համար ավելացնենք առանցքների վերնագրերը։

Ամփոփում

Հարմար է, որ ծառայությունն ուղղված է ուսուցման տարբեր մակարդակների օգտվողներին: Կարող եք պատճենել կից օրինակները և անմիջապես ստանալ ստանդարտ տեսքի պատրաստի գրաֆիկ։ Այն օգտվողները, ովքեր լիովին տիրապետում են տարբեր պարամետրերին, կպարգևատրվեն իրենց ցանկությամբ պատրաստված գրաֆիկայով և կայքի դիզայնի նմանությամբ:

Դիագրամներն իրենք ցուցադրվում են բավականին արագ, բացի այդ, կանչված ֆայլերը պահվում են առաջին բեռնման ժամանակ, ուստի գծապատկերների հետագա ցուցադրումը կայքում ավելի արագ է: Բոլոր բրաուզերներն ապահովված են, ներառյալ հինները Ինտերնետ տարբերակներհետախույզ.

Ծառայության փաստաթղթերը չեն թարգմանվել ռուսերեն և հասանելի են միայն անգլերենով, ինչը կարող է վախեցնել որոշ օգտատերերի: Դրա համար կա միայն մեկ մանտրա՝ լեզուներ սովորել:

javascript գրադարանների համառոտ ակնարկ գծագրման համար

Highcharts

Highcharts-ը մաքուր HTML5/JavaScript գծապատկերային գրադարան է, որն առաջարկում է ինտուիտիվ ինտերակտիվ գծապատկերներ ձեր կայքի կամ վեբ հավելվածի համար: Highchartsներկայումս աջակցում է գիծ, ​​գիծ, ​​տարածք, տարածքի տող, սյունակ, բար, կարկանդակ, ցրում, անկյունային չափիչներ, տարածքների միջակայք, տարածքների միջակայք, սյունակի միջակայք, փուչիկ, տուփի գծապատկեր, սխալի գծեր, ձագար, ջրվեժ և բևեռային գծապատկերների տեսակները:

Google Charts

Google Charts - Առաջարկում է տարբեր գծապատկերներ, որոնք նախատեսված են տվյալների վիզուալիզացիայի լուծումների համար: Այս գծապատկերները հիմնված են մաքուր HTML5/SVG տեխնոլոգիայի վրա (ընդունում է VML IE-ի ավելի հին տարբերակների համար), ուստի ոչ մի պլագին չի պահանջվում: Դրանք բոլորը ինտերակտիվ են, և դրանցից շատերը համաչափ և մասշտաբային են: Այս գծապատկերները էջի վրա ավելացնելը կարող է կատարվել մի քանի հեշտ քայլով:

CanvasJS

CanvasJS - հեշտ օգտագործվող HTML5 և JavaScript գրադարան Գծապատկերում, կառուցված տարերքի վրա Կտավ. Գրաֆիկները կարող են ցուցադրվել տարբեր սարքեր, այդ թվում շարժական սարքեր, iPad, Android, Windows հեռախոս, Microsoft Surface, on սեղանադիր համակարգիչներև այլն: Սա թույլ է տալիս ստեղծել ֆունկցիոնալ գրաֆիկա, որն աշխատում է բոլոր սարքերի վրա՝ չվնասելով ձեր վեբ հավելվածի պահպանման կամ ֆունկցիոնալությունը: CanvasJSգալիս է գեղեցիկ թեմաներով և բեռնվում է 10 անգամ ավելի արագ, քան սովորական ֆլեշ և SVG գրաֆիկները, ինչը հանգեցնում է թեթև և գեղեցիկ գրաֆիկների:

ChartJS

Chart JS - Թեթև, օբյեկտի վրա հիմնված հաճախորդի կողմից գծապատկերային գրադարան:

RGraph

RGraph-ը HTML5 կտավի վրա հիմնված և JavaScript գրադարան է՝ վեբ գծապատկերներ ստեղծելու համար՝ քսանից ավելի աջակցությամբ: տարբեր տեսակներվիզուալիզացիա. RGraph-ը ստեղծում է HTML5 գծապատկերներ վեբ բրաուզերի ներսում JavaScriptև հատկորոշել կտավ.

• Թարգմանություն

Գրեթե անհնար է պատկերացնել վահանակը առանց գծապատկերների և գրաֆիկների: Նրանք արագ և արդյունավետ կերպով ցուցադրում են բարդ վիճակագրական տվյալներ: Ավելին, լավ դիագրամը նաև բարելավում է ձեր կայքի ընդհանուր դիզայնը:

Այս հոդվածում ես ձեզ ցույց կտամ JavaScript-ի լավագույն գրադարաններից մի քանիսը գծապատկերներ/գծապատկերներ (և առանցքային աղյուսակներ) կառուցելու համար: Այս գրադարանները կօգնեն ձեզ ստեղծել գեղեցիկ և հարմարեցված գծապատկերներ ձեր ապագա նախագծերի համար:

Չնայած գրադարանների մեծ մասն անվճար է և բաց կոդով, դրանցից մի քանիսն ունեն վճարովի տարբերակներ՝ լրացուցիչ ֆունկցիոնալությամբ:

D3.js - Տվյալների վրա հիմնված փաստաթղթեր

Այսօր, երբ մենք մտածում ենք գրաֆիկների մասին, առաջին բանը, որ գալիս է մեր մտքին, դա D3.js-ն է՝ լինելով բաց կոդով նախագիծ՝ D3.js-ը, անկասկած, բերում է բազմաթիվ օգտակար հատկություններ, որոնք բացակայում են գոյություն ունեցող գրադարաններից շատերին: Առանձնահատկություններ, ինչպիսիք են «Enter and Exit», հզոր անցումները և jQuery-ին կամ Prototype-ին նման շարահյուսությունը, այն դարձնում են JavaScript-ի լավագույն գրադարաններից մեկը գրաֆիկներ և գծապատկերներ ստեղծելու համար: D3.js-ում դրանք ստեղծվում են օգտագործելով HTML, SVG և CSS:

Ի տարբերություն JavaScript-ի շատ այլ գրադարանների, D3.js-ը չի գալիս նախապես կառուցված սյուժեներով: Այնուամենայնիվ, դուք կարող եք դիտել D3.js-ով ստեղծված գրաֆիկների ցանկը՝ ընդհանուր պատկերացում կազմելու համար:

D3.js-ը ճիշտ չի աշխատում ավելի հին բրաուզերների հետ, ինչպիսին է IE8-ը: Բայց դուք միշտ կարող եք օգտագործել փլագիններ, ինչպիսիք են aight plugin-ը, բրաուզերի համատեղելիության համար:

D3.js-ը լայնորեն օգտագործվել է այնպիսի կայքերում, ինչպիսիք են NYTimes-ը, Uber-ը և Weather.com-ը:

Google Charts

Google Charts-ը JavaScript գրադարան է, որը ես պարբերաբար օգտագործում եմ պարզ և հեշտ գծապատկերներ ստեղծելու համար: Ապահովում է բազմաթիվ նախապես կառուցված գծապատկերներ, ինչպիսիք են համակցված գծապատկերները, սյունակային գծապատկերները, օրացուցային սյուժեները, կարկանդակ գծապատկերները, աշխարհագրական սխեմաները և այլն:

Google գծապատկերները նաև ունեն բազմաթիվ կազմաձևման կարգավորումներ, որոնք օգնում են ձեզ փոխել ձեր գծապատկերի տեսքը: Գրաֆիկները ստեղծվում են HTML5/SVG-ի միջոցով՝ ապահովելու բրաուզերի համատեղելիությունը և միջպլատֆորմային փոխադրելիությունը iPhone-ի, iPad-ի և Android-ի համար: Պարունակում է նաև VML՝ IE-ի հին տարբերակներն աջակցելու համար:

HighchartsJS

Highcharts JS-ը ևս մեկ շատ հայտնի գծապատկերային գրադարան է: Այն գալիս է տարբեր տեսակի բազմաթիվ անիմացիաներով, որոնք կարող են մեծ ուշադրություն հրավիրել ձեր կայքի վրա: Ինչպես մյուս գրադարանները, HighchartsJS-ը պարունակում է բազմաթիվ նախապես կառուցված գծապատկերներ՝ spline, curly, combination, bar, histogram, pie, scatter և այլն:

HighchartsJS-ի օգտագործման ամենամեծ առավելություններից մեկը հին բրաուզերների հետ համատեղելիությունն է, ինչպիսին է Internet Explorer 6-ը: Ստանդարտ բրաուզերներն օգտագործում են SVG գծապատկերները ցուցադրելու համար: Հնացած IE-ում գրաֆիկան կառուցվում է VML-ի միջոցով:

Չնայած HighchartsJS-ն անվճար է անձնական օգտագործման համար, դուք պետք է գնեք արտոնագիր առևտրային օգտագործման համար:

Fusioncharts

Fusioncharts-ը JavaScript-ի հին գրադարաններից մեկն է, որն առաջին անգամ թողարկվել է 2002 թվականին: Գրաֆիկները ստեղծվում են օգտագործելով HTML5/SVG և VML՝ ավելի լավ դյուրատարության և համատեղելիության համար:

Ի տարբերություն շատ գրադարանների, Fusioncharts-ը հնարավորություն է տալիս վերլուծել ինչպես JSON տվյալները, այնպես էլ XML-ը: Դուք կարող եք նաև արտահանել այս գրաֆիկան 3 տարբեր ձևաչափերով՝ PNG, JPG և PDF:

Fusioncharts-ը շատ համատեղելի է հին բրաուզերների հետ, ինչպիսին է IE6-ը: Եվ այս պատճառով այն դարձել է բազմաթիվ առևտրային կազմակերպությունների ամենանախընտրելի գրադարաններից մեկը։

Դուք կարող եք անվճար օգտագործել Fusioncharts-ի ջրանիշով տարբերակը ինչպես անձնական, այնպես էլ կոմերցիոն նախագծերում: Այնուամենայնիվ, ջրի մակարդակի նշագծից ազատվելու համար անհրաժեշտ է լիցենզիա ձեռք բերել:

նավատորմ

Flot-ը JavaScript գրադարան է jQuery-ի համար, որը թույլ է տալիս ստեղծել գրաֆիկներ/գծապատկերներ: Ամենահին և ամենատարածված գծապատկերային գրադարաններից մեկը:

Flot-ն աջակցում է գծապատկերների, ցրված գծապատկերների, գծապատկերների, սյունակների գծապատկերների և այս գծապատկերների տեսակների ցանկացած համակցության: Նաև համատեղելի է հին բրաուզերների հետ, ինչպիսիք են IE 6-ը և Firefox 2-ը:

Flot-ը լիովին անվճար է, կոմերցիոն աջակցությունը հասանելի է մշակողի հատուկ խնդրանքով: Ահա Flot-ով ստեղծված գծապատկերների օրինակների ցանկը:

amCharts

amCharts-ը, անկասկած, ամենագեղեցիկ գծապատկերային գրադարաններից մեկն է այնտեղ: Այն ամբողջությամբ բաժանված է 3 անկախ տեսակի՝ JavaScript գծապատկերներ, Քարտեզների գծապատկերներ (amMaps) և Stock charts:

AmMaps-ն իմ սիրելին է վերը նշված երեքից: Ապահովում է այնպիսի գործառույթներ, ինչպիսիք են ջերմային քարտեզները, գծեր նկարելը, քարտեզին տեքստ ավելացնելը, ձեր քարտեզի վերևում պատկերակները կամ լուսանկարները վերբեռնելը, խոշորացումը և այլն:
amCharts-ն օգտագործում է SVG գծապատկերները ցուցադրելու համար, որոնք աշխատում են միայն ժամանակակից բրաուզերներում: Գրաֆիկները կարող են ճիշտ չցուցադրվել IE-ում 9-րդ տարբերակի տակ:

EJS Chart-ը հասանելի է անվճար և վճարովի տարբերակներով: Անվճար տարբերակն ունի սահմանափակում, որը թույլ չի տալիս օգտագործել մեկ էջի 1-ից ավելի գծապատկեր և մեկ գծապատկերում ավելի քան երկու (թվային) հաջորդականություն: Ստուգեք գնի մանրամասները:

uvCharts

uvCharts-ը բաց կոդով JavaScript գրադարան է, որը պնդում է, որ ունի ավելի քան 100 կազմաձևման տարբերակներ: Այն ունի 12 տարբեր ստանդարտների գծապատկերներ անմիջապես տուփից դուրս:

UvCharts-ը կառուցված է D3.js գրադարանի վրա: Այս նախագիծը խոստանում է վերացնել D3.js կոդավորման բոլոր բարդ նրբությունները և ապահովել ստանդարտ տեսքի գրաֆիկների հեշտ իրականացում: uvCharts-ը ստեղծվում է SVG-ի, HTML-ի և CSS-ի միջոցով:

Եզրակացություն

Այժմ ձեր ապագա նախագծերի լավագույն գծագրման գրադարանի ընտրությունը կախված է ձեզանից: Ծրագրավորողները, ովքեր ցանկանում են լիարժեք վերահսկողություն ունենալ գծապատկերների վրա, անպայման կընտրեն D3.js-ը: Գրեթե բոլոր վերը նշված գրադարանները լավ աջակցություն ունեն Stackoverflow ֆորումներում:

Հուսով եմ, որ ձեզ դուր եկավ այս հոդվածը: Լավ օր եմ մաղթում.

Բարի երեկո, իմ սիրելի ընթերցող, այսօր ես ուզում եմ ձեզ առաջարկել պլագինների և օրինակների հիանալի ընտրություն տարբեր տեսակի գծապատկերներ և գծապատկերներ կառուցելու համար: Կարծում եմ՝ յուրաքանչյուրն իր համար հետաքրքիր բան կգտնի։

1. jqPlot - բազմակողմանի և ընդարձակելի JQuery պլագին պլանավորման համար

jqPlot- jquery plugin Javascript-ով գծագրելու համար:
jqPlot արտադրում է գեղեցիկ գծեր, բարեր և կարկանդակ գծապատկերներ բազմաթիվ առանձնահատկություններով.
Գծապատկերների բազմաթիվ ոճեր:
Տվյալներ հատուկ ձևաչափով առանցքի վրա:
Մինչև 9 Y- առանցք:
Տեքստի առանցքի ռոտացիա:
Միտման գծի ավտոմատ հաշվարկ:
Թռուցիկ ակնարկներ.
Օգտագործման հեշտությունը.

2. Dygraphs վիզուալիզացիայի գրադարան

Dygraphs-ը բաց կոդով գրադարան է, որը կառուցում է ինտերակտիվ, մասշտաբային ժամանակային շարքերի գրաֆիկներ: Այն նախագծված է ցուցադրելու տվյալների խիտ հավաքածուներ և թույլ է տալիս օգտվողներին ուսումնասիրել և մեկնաբանել դրանք:

Առանձնահատկություններ:
Ժամանակային շարքերի ցուցադրում առանց արտաքին սերվերների կամ ֆլեշ անիմացիայի
Աշխատում է Internet Explorer-ում (օգտագործելով excanvas)
Փոքր չափ (69 կբ)
Ցուցադրում է արժեքները սավառնելիս
ինտերակտիվ խոշորացում
Կարգավորելի միջին ժամկետ
Համատեղելի է Google Visualization API-ի հետ
http://dygraphs.com/

3. Highcharts - Ինտերակտիվ JavaScript գծապատկերներ ձեր կայքի համար

Highcharts-ը գրված գծապատկերային գրադարան է մաքուր JavaScript, առաջարկելով ինտերակտիվ գծապատկերներ ձեր կայքի կամ վեբ հավելվածի համար: Highcharts-ը ներկայումս աջակցում է տողերի, գծերի, տարածքների, տարածքների, սյուների, բարերի, կարկանդակների, ցրման, անկյան չափիչների, տարածքի միջակայքի, areaspline-ի, սյունակի միջակայքի և բևեռային գծապատկերների տեսակների:

4. jQuery մկնիկի անիվի ոլորման էֆեկտով

Չի օգտագործում PNG կամ JPG sprites:
Կառավարում է հպման, մկնիկի անիվի և ստեղնաշարի իրադարձությունները:
http://anthonyterrien.com/knob/

5. Նորաձև ցուցիչներ CSS3-ում

Նորաձև, անիմացիոն ցուցիչներ՝ օգտագործելով CSS3:
http://www.red-team-design.com

6. Highcharts jQuery-ով

Highcharts-ը JQuery-ի և Mootools-ի համատեղելի գծապատկերային գրադարան է: Այն համատեղելի է բոլոր ստանդարտ վեբ բրաուզերների հետ և օգտագործում է JSON տվյալները՝ գրաֆիկ ստեղծելու համար: Աջակցում է գրաֆիկի մի քանի տեսակների տողեր, գծեր, տարածք, տարածքներ, սյունակ, բար, կարկանդակ և ցրման հողամաս:
highcharts.com

7. Անիմացիոն գրաֆիկ HTML5-ում և jQuery-ում

Գեղեցիկ, ինտերակտիվ կարկանդակ աղյուսակ օգտագործելով նորագույն տեխնոլոգիաներ HTML5. Չի օգտագործում Flash:

8. Փորձարարական CSS3 գրաֆիկ

Այս մեթոդը CSS3-ում փորձնական հողամասեր կառուցելու օրինակ է՝ առանց JavaScript-ի կամ պատկերների: CSS3 ընտրիչների օգտագործումը իսկապես տպավորիչ է՝ փոխակերպումներ, գրադիենտներ և անցումներ: Ցավոք, չի աջակցվում IE-ում:

9. Մեկ այլ JQuery և HTML5 աղյուսակ

Visualize հավելվածը վերլուծում է բովանդակության հիմնական տարրերը կառուցվածքային ձևով: HTML աղյուսակ, և օգտագործում է HTML5՝ դրանք գծապատկերի կամ գրաֆիկի վերածելու համար: Օրինակ, տվյալների աղյուսակում տողերը կարող են ծառայել որպես բար, տող կամ սեպ աղյուսակ: Visualize-ը նաև ավտոմատ կերպով ստուգում է առավելագույնը և նվազագույն արժեքըաղյուսակում և օգտագործում է դրանք գծի և հիստոգրամի համար x առանցքի արժեքները հաշվարկելու համար: Վերջապես, plugin-ը ներառում է երկու տարբեր css ոճը- բաց և մութ, որոնք կարող են օգտագործվել ինչպես կա, կամ կարող են ծառայել որպես ելակետ գծապատկերների և գրաֆիկների հարմարեցման համար: