Bular 2019 uchun eng yaxshi JavaScript jadval kutubxonalari

Birinchidan, qisqacha tarix:

Ma'lumot yig'ish va undan foydalanish eksponent bo'yicha o'sishda davom etar ekan, bu ma'lumotni vizualizatsiya qilish zarurati yanada muhim ahamiyat kasb etmoqda. Ishlab chiquvchilar millionlab ma'lumotlar bazasidagi yozuvlarni odamlar tez va intuitiv ravishda izohlashlari mumkin bo'lgan chiroyli jadvallarga va boshqaruv panellariga birlashtirishga intilishadi.

Ma'lumotni vizualizatsiya qilish texnologiyasi so'nggi o'n yillikda yaxshilanishda davom etdi va hozirda ko'plab ilg'or grafik kutubxonalar iste'molchilar uchun mavjud. 2000-yillarning boshlarida grafiklar avlodida server yonidagi rasmlarning rasm chizmalarida ustunlik mavjud edi. Flash va Silverlight kabi plaginlar yanada interaktiv grafik tajribani taklif qilishdi, ammo yuklab olish tezligi, batareya quvvati va tizim manbalari juda katta.

Mobil va planshetdan foydalanish portlashi bilan, yirik platformalarda plaginlar endi qo'llab-quvvatlanmadi va ishlab chiquvchilar har qanday joyda ishlay oladigan mijozlarni yoqish texnologiyalariga o'tishga majbur bo'lishdi. Shu bilan birga, juda yuqori aniqlikdagi ekranlarning paydo bo'lishi va sensorli imo-ishoralar orqali kengaytiriladigan kattalashtirish mustaqil vektor jadvallarini birinchi o'ringa olib chiqdi.

JavaScript va SVG (Masshtabli Vektorli Grafika) tomonidan boshqariladigan ma'lumotlar vizualizatsiya qilishning hozirgi davrini kiriting. Endi jadvallar barcha plaginlarda, maxsus plaginlarsiz ishlaydi, interaktivlikni va animatsiyani qo'llab-quvvatlaydi va hatto eng yuqori aniqlikdagi qurilmalarda ham aniq ko'rinadi. 50 dan ortiq vizual kutubxonalarni ko'rib chiqib, ushbu 9 ta mahsulot ajralib turdi:

D3.js

D3.js juda keng va kuchli JavaScript grafikali kutubxona. U o'zboshimchalik bilan ma'lumotlarni Document Object Model (DOM) bilan bog'lash va keyinchalik hujjatga ma'lumotlarga asoslangan o'zgarishlarni qo'llash imkonini beradi.

D3 odatiy grafik kutubxonalardan, shuningdek, boshqa ko'plab kichik texnik modullardan, masalan, balta, ranglar, ierarxiyalar, konturlar, yengilliklar, ko'pburchaklar va boshqalardan ham yuqori. Bularning barchasi puxta o'rganish egri bo'ladi.

Oddiy jadval tuzishga harakat qilish juda qiyin bo'lishi mumkin. Barcha elementlarni, shu jumladan o'qlarni va boshqa grafik elementlarni aniq belgilash kerak. Ko'pgina namunalar CSS-ni grafik elementlarning uslubini qanday ishlatish mumkinligini ko'rsatadi. Grafikaga asoslangan xususiyatlar avtomatik ravishda qo'llanilmaydi. Agar siz begona o'tlarga kirib, har bir elementni to'liq boshqarish uchun ijodkorlikdan foydalanmoqchi bo'lsangiz, bu eng yaxshi tanlovdir. Ma'lumotni vizualizatsiya qilish loyihasi talablarini qondirish uchun soat bilan ishlash noldan boshlab eng yaxshi tanlov bo'lmasligi mumkin.

D3.js diagramma kutubxonasi uchun asos bo'lishi mumkin. Ishlab chiquvchilar N33 kabi uni iste'mol qiladigan grafik echimlardan foydalanishni osonlashtirish uchun D3-dan foydalanganlar.

D3.js ochiq manba bo'lib, undan foydalanish bepul.

AKHarting

Harting jadvali kutubxonasi xaritalar, gantt, aktsiyalar va boshqalarni o'z ichiga olgan ko'p sonli jadval turlarini qo'llab-quvvatlaydi, ular ko'pincha alohida kutubxonalardan foydalanishni talab qiladi. Unga barcha dunyo mamlakatlarining xaritalari va SVG piktogrammalar kutubxonasi kiradi. Alohida mikro-jadvallar to'plami har qanday grafik yorliqlarida yoki sahifadagi istalgan div elementlarida ko'rsatilishi mumkin. UI elementlari (UiItems) yanada boy interfaol grafikalarni olish imkoniyatini beradi. Real vaqt rejimida ma'lumotlarni yoki vizualizatsiya parametrlarini boshqarish oson va grafikalarni SVG, PNG, PDF va JPG formatlariga eksport qilish mumkin.

Galereya grafik turi va xususiyat namunalariga bo'lingan. Grafik uslubi sayqallangan va toza ko'rinadigan jadvallarni taqdim etadi. Umumiy vizual rasmlar toza va professional jadval tuzishni ta'minlaydi.

Qo'shilgan namunalar jadvallarni sozlash uchun konfiguratsiya ob'ektidan foydalanadi. Diagramma turlarini yaratish va boshqarish uchun sozlash foydalanish uchun juda oddiy. Jadvalning murakkab turlarini aniqlash uchun ozgina sozlamalar talab qilinadi va AHarting kuchli va dinamik parametrlarga ega, chunki u avtomatik ravishda stsenariy uchun eng yaxshi sozlamalarni tanlashga harakat qiladi.

Hujjatlarga ko'p qo'llanmalar va API xususiyatlarining batafsil tavsiflari kiradi. Ko'p xususiyatlarga misol foydalanish va namunaviy havolalar kiradi.

"Harting" tijoratdan tashqari va shaxsiy foydalanish uchun bepul, shuningdek, grafikaning barcha turlarini va mahsulotlarini bitta to'lov evaziga o'z ichiga olgan tijorat litsenziyasining imkoniyatlarini taklif etadi.

Yuqori yuk mashinalari

Highcharts - bu dunyodagi eng yirik kompaniyalar foydalanadigan mashhur grafik grafikalar kutubxonasi. Grafiklar IV6 / IE8-ga qadar barcha orqaga moslik uchun SVG va VML-ga qaytarish yordamida tuziladi. Demo-jadvallar juda boy xususiyatlarni namoyish etadi, ammo ingl. Umumiy hujjatlar tarkibiga ko'plab tegishli mavzular bo'yicha qo'llanmalar kiradi va API hujjatlari puxta ishlab chiqilgan.

Jadvallarni tuzish uchun diagramma konfiguratsiya parametrlaridan foydalanadi va API-ni ishlatish oson.

Highchartslar notijorat va shaxsiy foydalanish uchun bepul. Boshqa foydalanish va aktsiyalar uchun tijorat litsenziyasi talab qilinadi, xaritalar va gantt-jadvallar alohida litsenziyaga ega.

amChartts

Yaqinda amCharts o'zining 4-versiyasini chiqazdi, unga kuchli SVG animatsion dvigateli qo'shilib, filmga o'xshash sahnalarni yaratishga imkon beradi.

Namoyish jadvallari juda chiroyli ko'rinadi. Ko'pgina demolar grafik parametrlarini real vaqt rejimida sozlash uchun bir nechta palitralar va slayder interfeysi interfeyslarini taklif qiladi. Hujjatlar ko'plab darsliklarni va to'liq API xususiyatlarini o'z ichiga oladi.

Grafikni tuzish konfiguratsiyaga asoslangan yondashuvdan biroz farq qiladi va buning o'rniga ko'proq deklarativ API ishlatadi. Jadvallarni sozlash uchun biroz ko'proq kod talab qilinadi, ammo kodni to'ldirish bo'yicha yaxshiroq tajriba beriladi.

amCharts markali jadvallar va boshqa foydalanish uchun pulli litsenziyalar bilan bepul litsenziyani taqdim etadi.

Google jadvallari

Google jadvallari juda kuchli va ulardan foydalanish oson.

Namunaviy jadvallar toza ko'rinadi va ko'zlarga oson ko'rinadi. Galereya va kengaytirilgan galereya ko'plab grafik turlarini ko'rsatadi, ammo gamburger menyusini bosish ushbu galereya ro'yxatida ko'rsatilmagan boshqa turlarni (taqvim kabi) ochib beradi.

Har bir grafik turida jonli misollar bilan maxsus qo'llanma mavjud. Qo'llanmalar tegishli funktsiyalar va API ro'yxatlari uchun kodni o'z ichiga oladi. Yangi diagramma kutubxonasini boshlash yoqimli tajriba.

Jadvallar konfiguratsiya parametrlari ob'ekti yordamida sozlanadi. Ma'lumotlar to'plamlari barcha jadvallar tomonidan iste'mol qilinishi mumkin bo'lgan DataTable klassi yordamida to'ldiriladi. Har bir jadval turida o'ziga xos darsliklarda keltirilgan noyob variantlar mavjud. Mulkni nomlash standartlashtirilgan va ko'p variantlar barcha turlarda ishlaydi.

Google-ning jadvallari bepul, ammo bu haqda ogohlantirish mavjud. Bu veb-xizmat bo'lib, uni lokalizatsiya qilib bo'lmaydi. Ilgari Google API-ni ishdan bo'shatdi, shuning uchun agar sizning vazifangiz juda muhim bo'lsa, boshqa variantni tanlashingiz mumkin.

ZingChart

ZingChart ko'plab grafik turlarini taklif qiladi va burchak, reaktsiya va boshqa ramkalar bilan birlashadi. Bu ko'plab xususiylashtirish imkoniyatlari bilan kuchli xususiyatlarga ega.

Namoyish jadvallarida turli xil uslublar mavzulari aks ettirilgan, ularning ba'zilari boshqalarga qaraganda yaxshiroq ko'rinadi, ammo kerak bo'lganda ularni uslublash variantlari mavjud. Demolar barcha mavjud grafik turlarini namoyish etmaydi.

Hujjatlar mavjud bo'lgan barcha turlar uchun qo'llanmalar, yaxshi xususiyatlar va to'liq API ro'yxatini o'z ichiga oladi.

ZingChart grafiklarni sozlash uchun konfiguratsiya parametrlaridan foydalanadi. Namuna tarkibiga shrift uslubi kabi ko'plab xususiyatlar kiradi. Ular ushbu jadval uchun qanday sozlamalar talab qilinishini tushunish usulida olishlari mumkin.

ZingChart-ni markalash bilan bepul foydalanish mumkin. Brendlanmagan foydalanish uchun pulli litsenziya mavjud.

FushionCharts

FusionCharts ko'p yillardan beri Flash-ga asoslangan grafik plaginidan boshlangan. Bu ishonchli grafik vizual kutubxonadir. XML, JSON va JavaScript kabi ko'plab ma'lumot formatlarini qo'llab-quvvatlaydi, zamonaviy brauzerlarda ishlaydi va IE6-ga orqaga mos keladi. Ko'pgina JavaScript ramkalari va server tomonidan dasturlash tillari qo'llab-quvvatlanadi.

Grafikalar galereyasida ko'plab misollar mavjud va ular toza vizual ko'rinishga ega.

Hujjatlar yaxshi API tavsiflarini va har bir grafik turining namunalarini o'z ichiga oladi. Konfiguratsiya xususiyatlari vazifalar va grafik xususiyatlari bo'yicha guruhlangan.

Jadvallar konfiguratsiyaga asoslangan variantlardan foydalangan holda tuziladi va ulardan foydalanish nisbatan oson. API-ga chuqur qazish paytida xususiyatlar ro'yxati uzoq bo'lishi mumkin. Barcha konfiguratsion xususiyatlar {chartLeftMargin, showAlternateHGridColor} kabi sayoz. Kodni to'ldirishni yaxshilashga urinish kabi.

FusionCharts-dan foydalanish, grafik brendi bilan shaxsiy foydalanish uchun bepul. Pulli litsenziyalash litsenziyasiz va tijorat maqsadlarida foydalanish uchun mavjud.

KOOLCHART

KoolChart - bu HTML 5-kanvasga asoslangan JavaScript grafikali kutubxona. Xarita va panjara mahsuloti ham mavjud.

Ularning yangi v5 versiyasi ko'proq interfaol xususiyatlar to'plamini va yangilangan uslublarni o'z ichiga oladi. Vizual toza va zamonaviy. Tuvaldan foydalanish rastrga asoslangan hisob-kitob asosida yaxshiroq ishlashga imkon beradi.

Namunalar diagramma parametrlarini qo'llash uchun boshqa usullarga qaraganda kamroq amaliy bo'lib ko'rinadigan XML-ga asoslangan namunalardan foydalanadi. Ushbu parametrlar HTML5ga o'xshaydi, lekin JavaScript-ning satri orqali o'rnatiladi.

API har bir mulk uchun namunaviy jadvallar bilan yaxshi hujjatlashtirilgan. 173 betli PDF qo'llanma ham mavjud.

Baholash uchun ikki oylik sinov muddati mavjud. Sinov muddati tugagandan so'ng litsenziya talab qilinadi.

Jadval.js

Chart.js - bu 8 ta jadval turlarini qo'llab-quvvatlaydigan ochiq kodli JavaScript kutubxonasi. Bu atigi 60kb bo'lgan kichik js kutubxonasi. Turlarga chiziq chiziqlari, chizmalar, mintaqaviy jadvallar, radar, pirog jadvallari, pufakchalar, tarqoq chiziqlar va aralash joylar kiradi. Vaqt seriyasi ham qo'llab-quvvatlanadi. U vizuallashtirish uchun tuval elementidan foydalanadi va o'lchovlarning teranligini saqlab qolish uchun oynaning o'lchamiga mos keladi. Bu IE9 bilan orqaga mos keladi. IE7 bilan ishlash uchun polifiller mavjud.

Namunaviy vizuallar juda zamonaviy ko'rinishga ega va birinchi marta rasm chizishda dastlabki animatsiyalarni o'z ichiga oladi. Real vaqt rejimida ketma-ket yoki ma'lumotlar nuqtalarini qo'shishda muammosiz jonlantiradi. Grafik parametrlarini yangilash () funktsiyasi chaqirilgandan so'ng o'zgartirish mumkin.

Namunaviy manba kodi veb-sayt galereyasida ko'rsatilmagan, ammo GitHub repo-da mavjud. Konfiguratsiya parametrlari jadvallarni yaratish va o'zgartirish uchun ishlatiladi. API parametrlari toza va intuitivdir.

Hujjat puxta va API va kod parchalariga ega bo'lgan darsliklarni o'z ichiga oladi.

Chart.js ochiq manbali kutubxona bo'lib, undan shaxsiy va tijorat maqsadlarida foydalanish bepul. Cheklangan miqdordagi asboblar paneli yanada rivojlangan talablar uchun muammo bo'lishi mumkin.

Xulosa

So'nggi o'n yil ichida JavaScript grafikali kutubxonalarning ekotizimi sezilarli darajada rivojlandi. Bugungi kunda juda ko'p talablarga javob beradigan juda ko'p sonli grafik mahsulotlar mavjud bo'lib, ular yuzlab grafik turlariga qaramay keng doiradagi loyihalarga xizmat qiladi. Ko'pgina kutubxonalar jadvalni samaradorligini o'zingizning ma'lumotlaringiz, yuklashingiz va loyihangizning murakkabligi bilan baholashga imkon beradigan bepul sinov yoki markali versiyasini taqdim etadi.

Ko'pgina grafik kutubxonalar uchun oddiy tuzilgan ma'lumotlar to'plamlari va statik vizualizatsiya bilan shug'ullanish oson. Biroq, real vaqtda, dinamik ma'lumotlar vizualizatsiya qilinganida, jadvallar har doim ham muammolarni hal qila olmaydi. Jadvallar to'g'ri ko'rinishi va yangi dinamik ma'lumotlarning vizualizatsiyalanishi natijasida ushbu qo'lda tweaking buzilishi uchun elementlarni sozlash va tartibga solish uchun ko'proq ish talab qilinishi mumkin.

Noyob ehtiyojlaringiz uchun eng yaxshi JS diagramma echimini tanlash uchun, yuqorida sanab o'tilgan ikkita kutubxonaga nisbatan o'zingizning ma'lumotlaringizni hozirgi va kelajakdagi loyihalaringizga juda mos kelishini ta'minlash uchun sinab ko'rishni tavsiya etaman.