Vlad Merzsevics

A weboldalakon esetenként szükség van különböző diagramok használatára, amelyek lehetővé teszik az adatok egyértelmű és egyszerű továbbítását a felhasználó számára. Korábban Excelben készítettek hasonló grafikonokat, majd képként kerültek be a honlapra. De az informatika korát éljük, ezért szeretnénk egy diagramot gyorsan, egyszerűen és még úgy beilleszteni, hogy az interaktív és szép legyen. Aztán jött a Google, és adott nekünk egy ilyen szolgáltatást.

A lehetséges menetrendek válogatása ezen az oldalon érhető el. Minden grafikonon számos lehetőség van, amelyek lehetővé teszik, hogy mindent saját ízlése szerint szabjon: színek, pozíciók, címek, animációk és még sok más. Minimális készlettel meg lehet elégedni, ha nem akarunk belemenni ezekbe a finomságokba, vagy ha teljesen meg vagyunk elégedve a grafikon standard megjelenésével.

Csak kétféle grafikont fogok figyelembe venni – kör- és vonaldiagramokat. A fennmaradó típusok analógia útján kapcsolódnak egymáshoz, és miután rájött, hogyan kell hozzáadni egy diagramot, könnyebben dolgozhat másokkal.

Kördiagram

Ez a diagram egy különböző méretű darabokra vágott tortára hasonlít. Az összes rész összege 100%, a részek értékük arányában osztják el a kört.

Az 1. példa kódot mutat be a levegő összetételének kördiagramként történő megjelenítéséhez.

1. példa: Kördiagram

Kördiagram google.load("vizualizáció", "1", (csomagok:["corechart"]));

google.setOnLoadCallback(drawChart);

függvény drawChart() ( var data = google.visualization.arrayToDataTable([ ["Gáz", "Térfogat"], ["Nitrogén", 78.09], ["Oxigén", 20.95], ["Argon", 0.93], [ "Carbon dioxide", 0.03] ] var options = ( cím: "Air Composition", is3D: true, pieResidueSliceLabel: "Rest" ); ); chart.draw(adatok, opciók)

A példa eredménye az ábrán látható. 1.

Rizs. 1. Kördiagram nézet

A diagram paraméterei két blokkból állnak: a ténylegesen megjelenítendő adatokból (adatváltozó) és a beállításokból (opciós változó). Az adatok első sora a következő oszlopok nevét adja meg, és bár semmilyen módon nem jelenik meg, enélkül a megjelenítés nem történik meg megfelelően. Az opciókban a diagram címét írják, háromdimenziós és egyéb beállításokat is megadhatunk, ezek mindegyike opcionális, és ha nincs megadva, akkor alapértelmezés szerint a rendszer.

A diagram interaktívnak bizonyul, ha a kurzort rájuk vagy a jelmagyarázat fölé viszi.

Példák, a paraméterek listája és a kördiagram leírása a következő címen érhető el: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

A hisztogram egy oszlopdiagram, amely hasznos a különböző értékek összehasonlításához. Példaként vegyük a 19. századi olajtermelést Oroszországban és az USA-ban (2. ábra). Az éveket az abszcissza tengelyen (vízszintes tengely), az ezer tonnában kifejezett olajtermelést az ordináta tengelyen (függőleges tengely) ábrázoljuk. A téglalapok magassága megfelel a megadott értéknek.

Rizs. 2. Hisztogram

Az ilyen típusú diagramok létrehozásának elve hasonló az előzőhöz - hozzáadunk egy címkét, hozzárendeljük egy szkripthez, amely tárolja a diagram adatait és a megjelenítési paramétereket (2. példa).

2. példa: Hisztogram

Hisztogram google.load("vizualizáció", "1", (csomagok:["corechart"]));

google.setOnLoadCallback(drawChart);

függvény drawChart() ( var data = google.visualization.arrayToDataTable([ ["Év", "Oroszország", "USA"], ["1860", 1.3, 70], ["1885", 2000, 3120], [ "1901", 12170, 9920] ]); .getElementById("olaj")); chart.draw(data, options)

Kényelmes, hogy a szolgáltatás különböző képzettségi szintű felhasználókat céloz meg. A mellékelt példákat másolhatja, és azonnal kész szabványos grafikont kaphat. Azok a felhasználók, akik kezdik alaposan megérteni a sok paramétert, az ízlésüknek megfelelő, az oldal kialakításához hasonló grafikával jutalmazzák.

Maguk a grafikonok meglehetősen gyorsan megjelennek, a hívott fájlok pedig az első letöltéskor gyorsítótárazásra kerülnek, így a grafikonok későbbi megjelenítése az oldalon gyorsabb. Minden böngésző támogatott, beleértve az Internet Explorer régebbi verzióit is.

A szervizdokumentációt nem fordították le oroszra, és csak angolul érhető el, ami néhány felhasználót elriaszthat. Ehhez csak egy mantra létezik: tanulj nyelveket.

A grafikonok kiváló vizuális segítséget nyújtanak az adatok bemutatásához. Ezek nélkül lehetetlen jó minőségű adminisztrációs panelt létrehozni. Nem olyan egyszerű őket telepíteni. Van azonban egy új könyvtár, amely megkönnyíti ezt a feladatot - az xCharts. Ma ezt a programot a Twitter Bootstrap Date Range palettájával együtt használjuk, hogy gyönyörű AJAX grafikont hozzunk létre webalkalmazásához, amely adatokat gyűjt ki egy MySQL táblából.

HTML

Ennek a nyelvnek a demó felépítése meglehetősen egyszerű - elemeket kell hozzáadnunk az oldalhoz, hogy elkezdhessük az ábrázolást és az információk kiválasztását. Mivel az oldalon egyébként is engedélyezzük a betöltést, oldalstílusokat és ikonokat használhatunk, hogy szép megjelenést adjunk ennek a szerkezetnek.

index.php

Szép diagramok jQuery és AJAX | Tutorialzine Demo

Itt sok külső erőforrást használnak fel. A fő részben megtalálhatók az xCharts lépcsőzetes stíluslapfájljai, a számrendező, a feltöltés (a CloudFlare szupergyors CDN-jéből integrálva), valamint a style.css fájlunk.

A táblázat gyorsbillentyűjének bezárása előtt rendelkezésünkre áll a JQuery könyvtár, a d3.js (amelyre az xcharts programnak szüksége van), az xcharts, a felhasználóbarát sugar.js könyvtár (amelyhez a dátumtartomány bővítmény szükséges), a dátumtartomány bővítmény és a script.js fájlt. A következőkben látni fogod, hogyan működik mindez együtt.

MySQL

Ahogy a bevezetőben említettem, az általunk írt szkript egy MySQL táblából fogja lekérni az adatokat, és diagramban jeleníti meg. A táblázatot létrehozó SQL-kódot a schema.sql-ben egy tömörített fájlban találhatja meg, amely letölthető a felső gombok segítségével. A táblázat így fog kinézni:

Csak három oszlopa van. A dátum oszlophoz egyedi index tartozik, ami azt jelenti, hogy ugyanazon a napon nem lehet ismétlődő bejegyzés. Az „értékesítési rekordok” oszlop a nap folyamán történt értékesítések számát rögzíti. Az adatbázisa minden bizonnyal más lesz, de amíg megkapja a helyes választ arra a formátumra, hogy az adatokat egyszerű szöveges formátumba strukturálja, amelyet a PHP szkriptből származó JSON-információk cseréjére használnak, addig nem lesz probléma (erről bővebben a következőben szakasz).

Megjegyzés: Ne felejtse el megadni a MySQL kapcsolat adatait a setup.php oldalon. Ezután létre kell hoznia egy új MySQL adatbázist, és importálnia kell a schema.sql fájlt a PHPMyAdmin rendszerből vagy a választott felügyeleti rendszerből.

PHP

PHP-szkriptünkben kiválasztjuk azokat a rekordokat a táblából, amelyek megfelelnek az átadott kezdő és záró információnak, az összes adatot összegyűjtjük egy tömbben, és szöveges adatcsere formátumban (JSON) adjuk ki:

ajax.php

Header("Content-Type: application/json"); // a könyvtár beállítása request_once("setup.php"); if (isset($_GET["kezdet"]) ÉS isset($_GET["vége"])) ( $kezdet = $_GET["kezdet"]; $vége = $_GET["vége"]; $data = array( // találatok kiválasztása $eredmények = ORM::for_table("chart_sales") ->where_gte("date", $start) ->where_lte("date", $end) ->order_by_desc("dátum") ->find_array( // új tömb létrehozása a foreach adattal ($eredmények mint $kulcs => $érték) ($data[$key]["címke"] = $érték["dátum"]; $ adat[$ kulcs]["érték"] = $érték["értékesítési_rendelés"]; echo json_encode($adat);

Itt a kedvenc könyvtáram - az Idiorm -ot használom. Korábban weboldali konzultációkhoz (és sok személyes projekthez) használtam. Ez csak egy fájl (a könyvtárban/mappában található), és nagyon egyszerűvé teszi az adatbázisokkal való munkát. Mindössze annyit csinálok, hogy lekérem az adatbázisból az összes olyan eredményt, amely az információkéréssel összhangban lévő kezdeti és befejezési időbélyegek között időbeli értékkel rendelkezik.

Az eredményül kapott JSON-válasz valahogy így néz ki:

[( "label": "2013-01-07", "value": "4" ), ( "label": "2013-01-06", "value": "65" ), ( "címke": "2013-01-05", "érték": "96")]

A címketulajdonságok a megfelelő sorban a MySQL számértékeket tartalmazzák, az oszlopok pedig az adott nap eladásainak számát. A JavaScript-kódon múlik, hogy megfelelően dolgozza fel ezeket az adatokat, és alakítsa át azokat az xCharts beépülő modullal való megosztásra alkalmas formátumba.

JavaScript

Az összes JS-kód azeszközök/js/script.js fájlban található. A kód kicsit hosszú, és a könnyebb követhetőség kedvéért részletekben mutatom be nektek.

Először beállítunk néhány változót, és inicializáljuk a dátumtartományválasztó beépülő modult. Kérjük, vegye figyelembe, hogy az általam használt adattartomány egy elágazás az eredeti bővítményből. Úgy döntöttem, hogy ezzel a verzióval dolgozom, mert az eredeti a date.js-től függ, amely egy örökölt adatkönyvtár, amely ütközik az xCharts-szal. Ehelyett a sugar.js-t használják – ez egy kiváló hasznos könyvtár megbízható és naprakész információkkal.

eszközök/js/script. js

$(function() ( // szabványos dátumok beállítása a shugar függvényekkel var startDate = Date.create().addDays(-6), // 6 napja endDate = Date.create(); // ma var range = $ ( "#range"); // dátumok megjelenítése a bejegyzés sorrendjében (dd)/(yyyy)")); // betölti a diagramot ajaxLoadChart(startDate,endDate); range.daterangepicker(( startDate: startDate, endDate: endDate, ranges: ( "Ma": ["ma", "ma" " ], "Tegnap": ["tegnap", "tegnap"], "Utolsó 7 nap": , "Legutóbbi 30 nap": // Ide további bejegyzéseket adhat hozzá ) ),function(start, end)( ajaxLoadChart( eleje, vége ));

Amint látható, sikeresen felhasználtuk a sugar.js információit és módszereit a tartomány kezdő- és végpontjának meghatározásához. Beírtam a szkriptbe az elmúlt 7 nap eredményeit, és frissítettem a tartomány beviteli mezőjét.

Most készítsünk egy grafikont:

// tipp a diagramra mutatva var tt = $("").appendTo("body"), topOffset = -32;

Először meghatározok egy xCharts konfigurációs objektumot annak tulajdonságaival és visszahívásaival. A dataFormatX tulajdonságban az AJAX kérésből visszaadott éééé-hh-nn stringeket megfelelő JavaScript Date objektumokká alakítom át, hogy a plugin helyesen tudja megjeleníteni és elvégezni a számításait.

A mouseover/mouseout pluginhoz is használok egy információkezelőt, és egy tooltip megjelenítésére használom (a plugin egyik moduljához sem tartozik).

Végül itt van egy JavaScript függvény az adatok AJAX-on keresztüli betöltéséhez:

// függvény adatok AJAX-on keresztüli betöltésére és diagramon való megjelenítésére függvény ajaxLoadChart(startDate,endDate) ( // ha nincs adat, akkor a diagram üres lesz if(!startDate || !endDate)( chart.setData(( "xScale" : "time ", "yScale" : "linear", "main" : [( className: ".stats", data: )] ) // ellenkező esetben hozzon létre egy ajax kérést $.getJSON; ("ajax.php ", ( kezdet: startDate.format("(éééé)-(MM)-(nn)"), vége: endDate.format("(éééé)-(MM)-(nn)") ) , function(data) ( var set = ; $.each(data, function() ( set.push(( x: this.label, y: parseInt(this.value, 10) )); )); chart.setData (( "xScale" : "time", "yScale" : "lineáris", "fő" : [( className: ".stats", data: set )] ));

Az xCharts egy setData metódust biztosít, így könnyen mozgathatja vagy cserélheti a megjelenített adatokat. A className attribútum fontos, mert ezt használja a beépülő modul a gráf meghatározásához. Ha figyelmen kívül hagyod, mindenféle furcsa hiba történhet (bízz bennem, tudom).

Ezzel teljes a gyönyörű diagramunk!

Vége!

Ezzel a példával javíthatja ellenőrzési területeit, és megjelenítheti a statisztikai adatokat egy gyönyörű felületen.

• Fordítás

Szinte lehetetlen elképzelni egy irányítópultot diagramok és grafikonok nélkül. Összetett statisztikákat jelenítenek meg gyorsan és hatékonyan. Ezen túlmenően egy jó diagram javítja a webhely általános kialakítását.

Ebben a cikkben bemutatom néhány legjobb JavaScript-könyvtárat diagramok/diagramok (és pivot táblák) létrehozásához. Ezek a könyvtárak segítenek gyönyörű és testreszabható grafikák létrehozásában a jövőbeli projektjeihez.

Bár a legtöbb könyvtár ingyenes és újraterjeszthető, néhányuknak van fizetős verziója további funkciókkal.

D3.js – Data-Centric Documents Manapság, amikor a grafikonokra gondolunk, először a D3.js jut eszünkbe. Mivel nyílt forráskódú projekt, a D3.js kétségtelenül sok hasznos funkciót kínál, amelyek leginkább hiányoznak meglévő könyvtárak. Az olyan funkciók, mint az „Enter and Exit”, a hatékony átmenetek és a jQuery-hez vagy a Prototype-hoz hasonló szintaxis, az egyik legjobb JavaScript-könyvtár a grafikonok és diagramok létrehozásához. A D3.js-ben ezek HTML, SVG és CSS használatával jönnek létre.

Sok más JavaScript-könyvtártól eltérően a D3.js nem tartalmaz előre elkészített grafikonokat. Áttekintheti azonban a D3.js-szal létrehozott grafikonok listáját, hogy általános képet kapjon.

A D3.js nem működik megfelelően a régebbi böngészőkkel, mint például az IE8. De a böngészők közötti kompatibilitás érdekében mindig használhat olyan bővítményeket, mint az aight plugin.

A D3.js-t korábban széles körben használták olyan webhelyeken, mint a NYTimes, az Uber és a Weather.com

Google Charts

A Google Charts egy JavaScript-könyvtár, amelyet rendszeresen használok diagramok egyszerű és egyszerű létrehozására. Számos előre elkészített diagramot biztosít, például kombinált sávdiagramokat, oszlopdiagramokat, naptárdiagramokat, kördiagramokat, földrajzi diagramokat stb.

A Google diagramok számos konfigurációs beállítást is tartalmaznak, amelyek segíthetnek a diagram megjelenésének megváltoztatásában. A grafikák HTML5/SVG használatával készülnek, hogy biztosítsák a böngészők közötti kompatibilitást és a platformok közötti hordozhatóságot iPhone, iPad és Android számára. VML-t is tartalmaz a régebbi IE-verziók támogatására.

Highcharts JS

A Highcharts JS egy másik nagyon népszerű diagramkönyvtár. Számos különféle típusú animációt tartalmaz, amelyek sok figyelmet vonzanak webhelyére. A többi könyvtárhoz hasonlóan a HighchartsJS is számos előre elkészített diagramot tartalmaz: spline, alak, kombináció, oszlop, hisztogram, kör, szórvány stb.

A HighchartsJS használatának egyik legnagyobb előnye, hogy kompatibilis a régebbi böngészőkkel, például az Internet Explorer 6-tal. A szabványos böngészők SVG-t használnak a diagramok megjelenítéséhez. Az örökölt IE-ben a gráfok VML-en keresztül készülnek.

Bár a HighchartsJS személyes használatra ingyenes, kereskedelmi használatra licencet kell vásárolnia.

Fúziós diagramok

A Fusioncharts az egyik legrégebbi JavaScript-könyvtár, amelyet először 2002-ben adtak ki. A grafikonok HTML5/SVG és VML használatával készülnek a jobb hordozhatóság és kompatibilitás érdekében.

Sok könyvtártól eltérően a Fusioncharts lehetőséget biztosít a JSON-adatok és az XML-adatok elemzésére is. Ezeket a grafikonokat 3 különböző formátumban is exportálhatja: PNG, JPG és PDF.

A Fusioncharts nagymértékben kompatibilis a régebbi böngészőkkel, például az IE6-tal. Emiatt számos szakmai szervezet egyik legkedveltebb könyvtárává vált.

A Fusioncharts vízjeles verzióját ingyenesen használhatja személyes és kereskedelmi projektekben is. A vízjel eltávolításához azonban licencet kell vásárolnia.

Flot

A Flot egy JavaScript könyvtár a JQuery számára, amely lehetővé teszi grafikonok/diagramok létrehozását. Az egyik legrégebbi és legnépszerűbb diagramkönyvtár.

A Flot támogatja az oszlopdiagramokat, a szórt diagramokat, az oszlopdiagramokat, az oszlopdiagramokat és ezen diagramtípusok bármilyen kombinációját. Szintén kompatibilis a régebbi böngészőkkel, mint például az IE 6 és a Firefox 2.

A Flot teljesen ingyenes, kereskedelmi támogatást a fejlesztő külön kérésére biztosítunk. Itt található a Flotban létrehozott diagramokra vonatkozó példák listája.

amCharts

Az amCharts kétségtelenül az egyik legjobban kinéző diagramkönyvtár. Teljesen három független típusra oszlik: JavaScript diagramokra, térképdiagramokra (amMaps) és részvénydiagramokra.

Az AmMaps a kedvencem a fenti három közül. Olyan funkciókat biztosít, mint a hőtérképek, vonalak rajzolása, szöveg hozzáadása a térképhez, ikonok vagy fényképek betöltése a térkép tetejére, méretarány módosítása stb.
Az amCharts SVG-t használ a diagramok megjelenítésére, ami csak a modern böngészőkben működik. Előfordulhat, hogy a grafikonok nem jelennek meg megfelelően az IE 9-es verziója alatt.

Az EJS Chart ingyenes és fizetős változatban is elérhető. Az ingyenes verziónak van egy korlátozása, amely nem teszi lehetővé oldalanként 1-nél több diagram és diagramonként kettőnél több (numerikus) sorozat használatát. Tekintse meg az árak részleteit.

UV-diagramok

Az uvCharts egy nyílt forráskódú JavaScript-könyvtár, amely állítása szerint több mint 100 konfigurációs lehetőséggel rendelkezik. A dobozból kivéve 12 különböző szabvány táblázata van.

Az UVCharts a D3.js könyvtárra épül. Ez a projekt azt ígéri, hogy kiküszöböli a D3.js kódolás összes bonyolult árnyalatát, és lehetővé teszi a szabványos megjelenésű grafikonok egyszerű megvalósítását. Az uvCharts SVG, HTML és CSS használatával készül.

Következtetés Most Ön dönti el, hogy a jövőbeli projektjeihez melyik diagramkönyvtárat válassza ki. Azok a fejlesztők, akik teljes irányítást szeretnének a grafikonjaik felett, minden bizonnyal a D3.js-t választják majd a Stackoverflow fórumokon.

Remélem tetszett ez a cikk. Jó napot kívánok.

A grafikonok és diagramok alkalmazásának igen széles körű alkalmazásai vannak. Segítségükkel sok információt megjeleníthet kényelmes és érthető formában, ezért gyorsan megértheti és megértheti.

Többféleképpen is hozzáadhat grafikont vagy diagramot egy weboldalhoz. Az első, amelyre valószínűleg már gondolt, az, hogy megrajzolja bármelyik grafikus szerkesztőben. De ez nem a legkényelmesebb és leggyorsabb lehetőség. Sokkal egyszerűbb és gyorsabb JavaScriptben grafikont készíteni, ahol már csak a szükséges paramétereket, megjelenést kell beállítani és az oldalra helyezni.

Ebben a cikkben 10 szolgáltatást és eszközt fogunk bemutatni, amelyek segítenek grafikonok és diagramok létrehozásában JavaScriptben. További létrehozási módszereket a „” részben talál.

Blöff
A szolgáltatás segítségével vonaldiagram rajzolásához csak néhány sornyi kódot kell másolnia, be kell állítania a szükséges paramétereket, és szöveget kell hozzáadnia. A kód olyan egyszerű és világos, hogy néhány másodperc alatt kitalálhatja.

A PlotKit segítségével diagramokat és grafikonokat készíthet, amelyek minden böngészőben helyesen jelennek meg. Az oldalon dokumentációt, példákat diagramtípusokra és egy gyors útmutatót (az összes paraméter és beállítás leírásával) talál a gyors kezdéshez.

Ez a szolgáltatás nagyszerű vizuális funkciók létrehozását teszi lehetővé. Írjon be egy egyenletet, például 2*sin(4*x)^(x+4), nyomja meg az „Enter” gombot, és a függvény készen áll. Ezek után már csak az url-t kell másolnia és beilleszteni az oldalára.

A leghatékonyabb eszköz táblázatok, grafikonok és diagramok készítéséhez a jQuery használatával. Az oldalon mindenféle grafikonra talál példát, valamint részletes leírást a paraméterekről és a beállítási lépésekről.

Flot
jQuery diagramkönyvtár a Google-tól. Nem kell többet írni erről, már minden világos (: De még mindig megjegyezzük, hogy a szolgáltatás rengeteg gyönyörű példát kínál rugalmas és egyszerű beállításokkal.

Lehetővé teszi diagramok és adatok hisztogramtáblázatainak létrehozását. Az építéshez meg kell adnia a szükséges adatokat, és kattintson a „Számítás” gombra. Ezután másolja ki a kódot, és töltsön le egy kis szkriptet. Kívánt esetben minden adat beírható magába a kódba.

A szolgáltatás 6 féle diagramot biztosít (kördiagram, vonaldiagram, dinamikus diagram és 3 féle hisztogram). Itt található a beállítások, paraméterek leírása és részletes példák minden típusú diagramra.

Raphael
A Raphaël egy kis JavaScript-könyvtár, amely sokkal könnyebbé teszi a grafikonok és diagramok létrehozását. Ez a legerősebb eszköz a jelen áttekintésben bemutatott összes közül. Könnyebb lesz saját kezűleg látni a könyvtár képességeit, mint elolvasni a lehetőségek leírását.

Plotr
Könyvtár diagramok létrehozásához a Mootools-on. Kiváló eszköz, amely gyönyörűen és érthetően mutatja be az információkat. A konfigurálásához pedig csak értékeket kell módosítania vagy hozzáadnia.

Ennek a szolgáltatásnak a lehetőségei lehetővé teszik 3D grafika készítését. A funkcionalitások közül érdemes kiemelni az egyszerű beállítást, a gyors script működést, valamint a koszinusz és szinuszos gráfok készítésének lehetőségét.

Vannak esetek, amikor egy bizonyos típusú információt meg kell jeleníteni egy nyitóoldalon és általában egy webhelyen. Ezzel a könyvtárral grafikonokat és diagramokat hozhat létre a webhelyhez – ez nem olyan nehéz, mint amilyennek látszik. Egyszer ki kell találnia (a cikkben található példák segítenek). Ezután adja meg adatait, és élvezze a gyönyörű és animált grafikonokat. Az ilyen dolgok mindig felkeltik a figyelmet.

Nem csak így teheti különlegessé céloldalát vagy webhelyét. Az alábbiakban felsorolunk néhány érdekes effektust, amelyeket könnyedén alkalmazhat projektjeire:

Az animált grafikonokra mind a három példa megtekinthető alább:

LetöltésHogyan használhatsz gyönyörű grafikát saját céljaidra?

Azonnal szeretném elmondani, hogy ezek a grafikák is adaptívak. Most ez fontos, hiszen óránként növekszik azoknak a felhasználóknak a száma, akik mobil eszközökről érik el az oldalt.

Az ilyen gyönyörű diagramok a Chartist.js könyvtár segítségével készülnek.

Alkalmazásával pedig „életre kelnek”, és felkeltik a figyelmet. Most képzelje el a látogatók reakcióját, amikor ezt látják egy szokásos nyitóoldalon! Végül is senkit nem fog meglepni, de az ilyen elemek mindig javítják az oldal minőségét.

Először nézzük meg azokat a lépéseket, amelyek segítenek a könyvtár összekapcsolásában, majd mutatok néhány példát, és beszélek a könyvtár összes funkciójáról. De azonnal figyelmeztetem, hogy egyszerűen lehetetlen az összes funkciót egy cikkben figyelembe venni.

1. szakasz. Összekapcsoljuk a szükséges stílusokat és szkripteket

Letöltheti a stílus- és szkriptfájlokat, és elhelyezheti őket a tárhelyen, de sokkal kényelmesebb, ha csak 2 sort szúr be a HTML-be, és csatlakoztathat mindent, amire szüksége van:

Ez elegendő az első gyönyörű grafikon vagy diagram elkészítéséhez. Még egy utolsó lépés van hátra.

3. szakasz. Grafikonértékek beállítása (JS)

Először azonnal bemutatom a teljes kódot, amely egy ilyen grafikont hoz létre:

És itt van maga a kód:

JAVASCRIPT KÓD

1 2 3 4 5 6 7 8 9 10 11 12

új Chartist.Line (.chart1" , ( címkék: [ "1. nap", "2. nap", "3. nap", "4. nap", "5. nap" ] , sorozat: [ [ 12 , 9 , 3 , 8, 4], [2, 1, 4,7, 5,5, 8]]), (fullWidth: true, chartPadding: (jobbra: 50)));

Menjünk végig minden soron, hogy teljes mértékben megértse ezt a kis JS-szkriptet. És ha megérti, hogy az egyes sorok miért felelősek, bármilyen értéket megváltoztathat saját magának.

• 1. sor – Ebben a sorban figyelje meg az idézőjelek közötti értéket. Itt jelezzük azt a blokkot, amelyben grafikonunk vagy diagramunk lesz.
• 2. sor - egy osztás nevét írjuk az X tengely mentén, vesszővel elválasztva, szimpla idézőjelben.
• 3–6. sorok – itt állíthatja be az Y tengely értékeit a grafikon egyes soraihoz. Egy sor érték szögletes zárójelben (ebben a szkriptben a 4. és 5. sor) egy sornak felel meg.
• 8. sor - a true érték megadásával a grafikont a „szülőblokk” teljes szélességére nyújtottuk.
• 9–11. sor – állítsa be a jobb oldali belső behúzást. Ez azért történik, hogy az X tengely menti felosztások leírása ne legyen levágva és egy blokkba kerüljön.

Ha követi a fent jelzett összes lépést, máris gyönyörű grafikont kap. Már csak a szükséges értékeket kell megadni. De ez a grafikon nem különbözik az összes többitől, amely az interneten látható. Tekintse meg alább, hogyan adhat egyediséget ehhez a grafikonhoz, ami után felkelti a figyelmet.

1. példa: Animált grafikon

De hogyan lehet olyan grafikont készíteni, mint a fenti képen (a kép animált, ha nincs animáció, akkor várja meg, amíg betöltődik) a fenti?

Ehhez csak hozzá kell adnia az elemek néhány tulajdonságát a kész diagramon. Mivel a teljes grafika SVG elemekből áll, csak el kell döntenünk, hogy melyiket szeretnénk animálni.

Két sor animálásához, mint ebben a példában, hozzá kell adnia a következő CSS-kódot a stíluslaphoz:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

/*1. diagram*/ .chart1 .ct-chart .ct-series .ct-series-a .ct-line ( körvonal: #F04D3A ; körvonal-szélesség: 5px ; stroke-dasharray: 5px 5px ; animáció : dashoffset- hét 200 ms végtelen lineáris ) /*Az első vonalpontok színe*/ .chart1 .ct-chart .ct-series .ct-series-a .ct-point( stroke: #B22819 ; ) .chart1 .ct-chart . ct- series .ct-series-b .ct-line ( körvonal: #4DB543 ; körvonal-szélesség: 5px ; stroke-dasharray: 5px 5px ; animáció : dashoffset 200 ms végtelen lineáris ; ) /*A második vonal pontjainak színe*/ .chart1 .ct -chart .ct-series .ct-series-b .ct-point( vonás: #0FB500 ; ) /*Szaggatott pontok mozgásának animációja*/ @keyframes dashoffset ( 0% ( stroke-dashoffset: 7px ; ) 100% ( vonás- dashoffset: 0px ; ) )

A JS részt nem írom ide, nagyon hasonló minden példában. Ha alaposan áttanulmányozta a fenti JS-kód leírását, ahol mindent szó szerint soronként elemeztem, akkor itt sem lesz nehéz kitalálnia.

2. példa: Animáció a diagram fő vonalának kiemelésére

Itt van animáció (a fenti képen). Ha nem látja, akkor lehet, hogy a kép egyszerűen nem töltődött be, csak várjon.

Ez egy nagyszerű módja annak, hogy megjelenítse a változásokat, és felhívja a figyelmet a grafikon egy adott vonalára. Minden CSS3-ban történik. A következő animációs kódot használták:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

/*2. diagram*/ /*Az első sor színe, vastagsága és stílusa*/ .chart2 .ct-chart .ct-series .ct-series-a .ct-line ( vonal: #949494 ; körvonal-szélesség: 5px ; ) .chart2 .ct-chart .ct-series .ct-series-a .ct-point( vonal: #656565 ; ) /*A második sor színe, vastagsága és stílusa*/ .chart2 .ct-chart . ct-series . ct-series-b .ct-line ( körvonal: #6765B5 ; körvonal-szélesség: 5px ; animáció : szélesség-impulzus 2s végtelen; ) .chart2 .ct-chart .ct-series .ct-series-b .ct-point ( körvonal: #403CB5 ; ) /*A harmadik sor színe, vastagsága és stílusa*/ .chart2 .ct-chart .ct-series .ct-series-c .ct-line ( körvonal: #949494 ; körvonal-szélesség: 5px ; ) /*A diagram harmadik vonalának pontjának színe*/ .chart2 .ct-chart .ct-series .ct-series-c .ct-point( körvonal: #656565 ; ) / *Ripple animáció a vonal kiemeléséhez a diagramon*/ @keyframes width-impulse ( 0% ( körvonal-szélesség: 6px ; körvonal: #403CB5 ; ) 50% ( körvonal-szélesség: 14px ; körvonal: #E40DE4 ; ) 100% ( körvonal szélessége: 6 képpont ;

löket: #403CB5 ;

) )

Ehhez a hatáshoz a következő CSS-kódot és animációt kell használnia:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

/*3. számú diagram*/ /*A második vonal színe, vastagsága és stílusa*/ .chart3 .ct-chart .ct-series .ct-series-b .ct-line ( vonal: #E44A4A ; körvonal-szélesség: 5 px .ct-chart .ct-series .ct-series-a .ct-line ( körvonal: #949494 ; körvonal-szélesség: 5px ; ) /*A diagram első sorának pontjának színe*/ .chart3 .ct -chart .ct-series .ct-series-a .ct-point( stroke: #656565 ; ) /*Animáció két irányban grafikán*/ @keyframes dasharray-őrület ( 0% ( stroke-dasharray: 7px 2px ; ) 80% (vonás-dasharray: 7px 100px; körvonal-szélesség: 10px) 100% (vonás-dasharray: 7px 2px; ) )

Ezekkel a példákkal azt szerettem volna megmutatni, hogy egy gyönyörű és ami a legfontosabb: szemet gyönyörködtető diagram elkészítése nagyon egyszerű. Csak ismernie kell legalább a CSS3 animáció alapjait. Erről az alábbi linken olvashat.