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).

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
Nové diskuze
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

@maxiorel na Twitteru

Maxiorel na Twitteru