Lihtne juhend: kuidas valida diagrammikogu, mida kasutada?

Kui peate veebis diagrammi rakendama, on välise raamatukogu kasutamise otsuse tegemine tavaliselt tavaline. Enamasti valitakse tavaliselt avatud lähtekoodiga diagrammiteegi.

Tavaliselt tehke palju uurimusi erinevates aspektides (võrdlusalus, mõne võrdlustabeli koostamine jne), et teha kindlaks, millist teeki kasutada, kuid neid sarnaseid protsesse tehakse korduvalt. Kuna ühtegi neist lähenemisviisidest ei jagata õigesti.

Selles postituses tahan kirjeldada põhikäsitlust, kuidas diagrammiteeki samm-sammult valida, kuid ei anna soovitatud. Kuna igaühe vajadused ja rakendatavad juhtumid on erinevad.

Võtke see postitus lihtsalt oma kaalutluse lähtepunktiks. :)

Sobiva graafilise tüübi valimine

Põhimõtteliselt veebis diagrammi rakendamiseks kasutatakse kahte tüüpi graafikat.

  • Bitmap (lõuend)
  • Vektor (SVG, VML)

Millised on kriteeriumid bitmap ja vektorgraafika vahel valimiseks?

Noh, selle kohta on MSDNis suurepärane artikkel: "SVG vs lõuend: kuidas valida". Väga soovitatav.

Graafilise tüübi valiku põhiline määramine

Bitmap (lõuend)

Näide reaalajas graafikust

Plussid

  • Sobib massiivsete andmete kuvamiseks reaalajas (nt administraatori tööriistadel pole kujundamise osas suuri vajadusi ja see on ok, kui teegi pakutav vaikimisi kasutatav UI / UX on korras).

Miinused

  • Kasutajaliidese / UX-i kohandamine on üsna keeruline.
  • Eri tüüpi kuvaskaala ja suumimise korral renderdamine on piiratud bitikaardi olemuse tõttu.

Vektor (SVG)

Näide erinevatest UI / UX-i kohandamistest

Plussid

  • Kasutajaliidese / UX-i kohandamine on paindlik (kõike tõlgendatakse sõlmena). Tavaliselt on lõpptarbijale suunatud teenuste jaoks piisav.
  • Saab säilitada sama eraldusvõime kvaliteeti erinevate eraldusvõimete vahel, ka suumides.

Miinused

  • Võib-olla ei piisa massiivsete andmekogumite kuvamiseks.

Diagrammiraamatukogude võrdlus

Diagrammiteekides otsides saate hunniku erinevaid diagrammiteeke. (ühe loendist leiate aadressilt: https://bestof.js.org/tags/chart)

Igal raamatukogul on plusse ja miinuseid ning seda on üsna raske 1: 1 hinnata, sest neil kõigil on unikaalsed omadused.

Pidage meeles: püüdsin nii palju kui võimalik normaliseerida, kuid ma ei saa öelda, et see oleks tõesti täpne (küsisin selle kohta lahket mõistmist).

Nimekiri

Need on valitud diagrammiteekide loend, mida tuleb võrrelda. Arvasin, et need on tänapäeval kõige populaarsemad tooted.

  • billboard.js (API / demos)
  • ChartJS (API / demos)
  • Diagrammid (API / demos)
  • C3.js (API / demos)
  • nvd3 (API / demos)
  • kaardistaja (API / demos)
  • echarts (API / Demos)
  • plotly.js (API / demos)
  • Britecharts (API / demos)
  • TauCharts (API / demos)

Võrdlustabel

Tekstitabelina kuvamiseks klõpsake linki: Võrdlustabel
(1) Ma vahetan oma diagrammid nvd3-st üle billboard.js, kuna API-de dokumenteerimine on palju põhjalikum.
(3) Näitajaid mõõdetakse 1. novembril
Viide:
- npmcharts: npm allalaadimiste võrdlus
- Võrrelge 2017. aasta parimate Javascripti diagrammide kogudega

Liideste võrdlused

Vaadake iga raamatukogu genereerimiskoodi. See võib liidest illustreerida ja anda üldise ettekujutuse tavadest.

Mõni on väga sirgjooneline, kuid mõnda on API dokumentide abita raske mõista.

Valiku vooskeem

Kui olete diagrammi rakendamisel uus (või teil pole varasemaid kogemusi), võib see vooskeem anda lähtepunkti, millise teegi valida.

Diagrammi valiku vooskeem

billboard.js?

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

billboard.js on graafikute kogu ja esimene väljalase oli juunis 2017.

Seda saab määratleda järgmiselt:

Taaskasutatav, lihtsa liidesega JavaScripti diagrammi kogu, mis põhineb D3 v4 +

ning võimaldades kohandamisel suurt paindlikkust.

Omadused

  • Äärmiselt lihtne rakendada ilma õppimiskõverata
  • Tõesti lihtne liides
  • Tugi mobiilses keskkonnas (puutetundlik)
  • Ülimalt paindlik kohandamisel: pakub 150+ suvandit ja hõlpsasti kujundatud CSS-i stiiliomadustega.
  • Korraldatud API-dokumendid ja 80+ näited
  • Kerge suurus (minimeeritud 169 kt)

Praegune olek

Alates esimesest väljalaskest umbes viis kuud tagasi on seda järk-järgult õnneks kasvanud, kuna billboard.js-le on antud palju tähelepanu.

npm Allalaadimised

  • Juuni: 370 allalaadimist
  • Juuli: 479 allalaadimist (29,4%, kasv eelmise kuuga võrreldes)
  • August: 862 allalaadimist (79,9%, kasv eelmise kuuga võrreldes)
  • September: 1 124 allalaadimist (30,3%, kasv eelmise kuuga võrreldes)
  • Oktoober: 1 706 allalaadimist (51,7%, kasv eelmise kuuga võrreldes)
npm-stat.com: mõõdetud vahemikus 2017–06–08 kuni 2017–10–31

GitHub Stars

GitHubi tähed on üks tugevaid ja lihtsaid näitajaid, mis määravad raamatukogu populaarsuse ja kasvu.

Nagu näete alloleval graafiku pildil, suurenevad tähed järk-järgult ja järjepidevalt. See indikaator on edasiliikumise ja kasutajate huvide tundmise allikas. :)

GitHubi tähtede ajalugu

Mis järgmiseks?

Töötame pidevalt parema avatud lähtekoodiga raamatukogu loomise nimel. Loodan, et need jõupingutused on kasulikud ja aitavad mingil moel.

Samuti ootame kindlalt kogukonna osalust ja panust.

Ärge kõhelge avatud lähtekoodiga osalemisest, sest see on alati oluline!