Қарапайым нұсқаулық: кесте кітапханасын қалай таңдауға болады?

Егер сізге интернеттегі диаграмманы қолдану қажет болса, сыртқы кітапхананы пайдаланғаныңыз дұрыс. Көп жағдайда ашық схемалық кітапхананы таңдау жиі кездеседі.

Әдетте сіз қандай кітапхананы пайдалану керектігін анықтау үшін әртүрлі аспектілер бойынша көп зерттеулер жүргізесіз (салыстыру, салыстыру кестесі және т.б.). Алайда, осыған ұқсас процестер қайталанады. Бұл тәсілдердің ешқайсысы дұрыс қолданылмаған.

Бұл лауазымда мен кесте кітапханасын таңдаудың негізгі тәсілін кезең-кезеңімен, бірақ ұсынылған тәсілсіз сипаттап бергім келеді. Жеке адамдардың қажеттіліктері мен қолдану жағдайлары әр түрлі болады

Бұл лауазымды тек сіздің қарауыңыздың бастапқы нүктесі ретінде қабылдаңыз. :)

Сәйкес графикалық түрді таңдау

Интернетте диаграмманы жүзеге асыру үшін, негізінен, графиканың екі түрі қолданылады.

  • Нүктелік карта (кенеп)
  • Вектор (SVG, VML)

Нүктелік кескін мен векторлық графика арасындағы таңдау критерийі қандай?

Жақсы, осы тақырыпта MSDN тамаша мақаласы бар: «SVG vs. Canvas: қалай таңдау керек?». Жоғары ұсынылады.

Графикалық типті таңдаудың негізгі анықтамасы

Нүктелік карта (кенеп)

Нақты уақыттағы диаграмманың мысалы

Артықшылықтары

  • Нақты уақытта үлкен көлемдегі деректерді көрсетуге жарамды (мысалы, әкімшілерге арналған құралдар дизайнға жоғары талап қоймайды және кітапханада ұсынылған UI / UX стандарттарына сай келеді).

Кемшіліктері

  • UI / UX жағдайында түзету өте қиын.
  • Нүктелік кескіннің сипатына байланысты дисплейдің әртүрлі өлшемдерінде және масштабтау кезінде шектеулер бар.

Вектор (SVG)

Әр түрлі UI / UX теңшелімдерінің мысалы

Артықшылықтары

  • UI / UX түзетулері өте икемді (бәрі түйін ретінде түсіндіріледі). Әдетте бұл соңғы пайдаланушыларға бағытталған қызметтер үшін жеткілікті.
  • Үлкейту кезінде де әртүрлі ажыратымдылықтарда бірдей ажыратымдылық сапасын сақтай алады.

Кемшіліктері

  • Үлкен жазбаларды көрсету үшін жеткіліксіз болуы мүмкін.

Диаграммалық кітапханаларды салыстыру

Диаграммалар кітапханаларында іздегенде көптеген диаграммалар кітапханаларын аласыз. (Тізімдердің бірін мына сілтемеден алуға болады: https://bestof.js.org/tags/chart)

Әрбір кітапхананың артықшылықтары мен кемшіліктері бар, сондықтан 1: 1-ге баға беру өте қиын, өйткені олардың бәрі ерекше қасиеттерге ие.

Есіңізде болсын: мен мүмкіндігінше қалыпқа келтіруге тырыстым, бірақ бұл өте дұрыс деп айта алмаймын (түсініңіз).

Тізім

Бұл салыстыру үшін диаграмма кітапханаларының таңдалған тізімі. Мен бұл күндер ең танымал болды деп ойладым.

  • billboard.js (API / Demos)
  • ChartJS (API / Demos)
  • Жоғары тарифтер (API / демо)
  • C3.js (API / Demos)
  • nvd3 (API / демо)
  • Chartist (API / Demos)
  • қуаттау (API / demos)
  • plotly.js (API / Demos)
  • Британдық диаграммалар (API / demos)
  • TauCharts (API / Demos)

Салыстыру кестесі

Мәтіндік кестені көрсету үшін сілтемені нұқыңыз: салыстыру кестесі
(1) Мен диаграммаларымды nvd3-тен billboard.js-ке ауыстырып жатырмын, өйткені API-дің құжаттары әлдеқайда мұқият. (3) индикаторлар 1 қарашада өлшенеді
Сілтеме: - npmcharts: npm жүктеулерін салыстыру - 2017 жылғы ең жақсы Javascript диаграмма кітапханаларын салыстырыңыз

Интерфейсті салыстыру

Әр кітапхананың ұрпақ кодына қараңыз. Бұл қолданушы интерфейсін көрсетіп, оны пайдалану туралы өрескел түсінік бере алады.

Кейбіреулері өте қарапайым, ал басқаларын API құжаттамасының көмегінсіз түсіну қиын.

Таңдау ағындарының кестесі

Егер сіз диаграммаларды қолдануда жаңадан болсаңыз (немесе бұрынғы тәжірибеңіз болмаса), бұл кесте кітапхананы таңдаудың бастапқы нүктесін ұсынуы мүмкін.

Диаграмманы таңдауға арналған диаграмма

билборд.js?

https://github.com/naver/billboard.js/

billboard.js - бұл диаграмма кітапханасы және алғашқы шығарылымы 2017 жылдың маусымында болды.

Оны келесідей анықтауға болады:

D3 v4 + негізінде қайтадан қолдануға болатын, JavaScript-ке негізделген диаграмма кітапханасы

және икемділік икемділік береді.

Қасиеттері

  • Оқу сызығынсыз өте оңай
  • Шынымен қарапайым интерфейс
  • Ұялы ортаны қолдау (сенсорлы)
  • Реттелудің жоғары икемділігі: 150-ден астам опцияны ұсынады және оларды CSS стилінің қасиеттерімен оңай жасауға болады.
  • Ұйымдастырылған API құжаттары және 80-нен астам мысалдар
  • Жарық мөлшері (169 КБ, азайтылған)

Ағымдағы күй

Алғашқы шығарылымы шамамен 5 ай бұрын, billboard.js-қа көп көңіл бөлудің арқасында біртіндеп кеңейтілді.

npm жүктеу

  • Маусым: 370 жүктеу
  • Шілде: 479 жүктеу (29,4%, алдыңғы аймен салыстырғанда)
  • Тамыз: 862 жүктеу (алдыңғы аймен салыстырғанда 79,9%, өсім)
  • Қыркүйек: 1144 жүктеу (30,3%, алдыңғы аймен салыстырғанда)
  • Қазан: 1 706 жүктеу (алдыңғы аймен салыстырғанда 51,7%)
npm-stat.com: 2017-06-08 бастап 2017-10-31 аралығында өлшенді

GitHub жұлдыздары

GitHubs Stars - бұл кітапхананың танымалдығы мен өсуін анықтайтын күшті және қарапайым көрсеткіштердің бірі.

Төмендегі графикадан көріп отырғаныңыздай, жұлдыздар біртіндеп көбейіп келеді. Бұл көрсеткіш болашақ көзі және пайдаланушылардың мүдделерін білу болып табылады. :)

Басты рөлді GitHub ойнайды

Келесі не бар?

Біз үнемі ашық бастапқы кітапхананы дамытуға тырысамыз. Бұл күштер пайдалы және кейбір жолдармен көмектеседі деп үміттенемін.

Біз қоғамдастықтың қатысып, өз үлестерін қосады деп күтеміз.

Ашық көзге қатысудан тартынбаңыз, өйткені ол әрқашан байланысты!