Kruhové výseče na webové stránce? Pomůže javascriptová knihovna Sektor

Nedávno jsem řešil potřebu dynamického zobrazování kruhové výseče na webové stránce. Měla vyjadřovat procentuální úspěšnost různých testů, tedy schopnost řešitelů testem projít. Použití SVG se přímo nabízelo, jen se mi nechtělo jej generovat ručně zápisem do HTML.

Reklama

Hledal jsem tedy nějakou JavaScriptovou knihovnu, které bych předal číslo jako hlavní parametr a ta by následně do stránky SVG s kruhovou výsečí vygenerovala.

Podobných řešení se na internetu povaluje více. Mě nakonec vyhovuje poměrně malá knihovna napsaná v ES6 se jménem Sektor. Nejenom, že zobrazí kruhovou výseč jako takovou, umí i jednoduchou animaci pro její vykreslení.

Zprovoznění je opravdu minimalistické:

var sektor = new Sektor(‘.sektor’, {
  angle: 30
});

Tedy po napojení souboru sektor.js do vašeho projektu, připravíte v HTML kódu element s CSS třídou .sektor a zavoláte pro něj vygenerování kruhové výseče se zvoleným úhlem. Viz výše uvedený příklad.

V mém případě trochu vadilo, že Sektor funguje s úhly, tj. pokrytí celého kruhu je dáno hodnotou 360, zatímco já chtěl zobrazovat procenta od 0 do 100. Pravidlo pro přepočet hodnot naštěstí zvládnete se znalostmi základní školy, je to jen drobná komplikace.

Výše uvedený příklad tedy vytvoří následující SVG obrázek a vloží jej místo stávajícího obsahu zvoleného selektoru.

Sektor a SVG s kruhovou výsečí ve výchozí podobě

Knihovna Sektor toho však dovede i trochu více. Použijete-li všechny její možnosti, pak ovlivníte:

  • Rozměr obrázku
  • Vygenerování jen obrysu místo výseče
  • Tloušťku čáry pro předchozí volbu
  • Již zmíněný úhel
  • Barvu výseče
  • Barvu kruhu na pozadí
  • A vyplnění pozadí barvou

Pokud si přečtete dokumentaci, najdete tam i dvě metody. Jedna dovede měnit velikost výseče, ta druhá změnu provede animací. I to se může hodit.

Na SVG je nejlepší, že jej můžete upravovat pomocí CSS jako kterýkoli jiný prvek na webové stránce. Což se mi hodilo a výsledná podoba mého SVG s kruhovou výsečí je následující:

SVG s kruhovou výsečí po úpravě v CSS

Pokud tedy potřebujete rychle generovat jednoduché ukazatele a nepotřebujete složitější grafy, určitě Sektor vyzkoušejte. Potěší vás jeho velikost (4 kB) i licence (MIT).

Reklama

Přidat komentář