Js vakre endringsgrafbygger. Begrensninger: Areal, Linje, Bar og kombinasjoner av disse
Før aksept viktige avgjørelser hver forretningsmann analyserer dataene først. I ethvert markedsområde er det en enorm mengde data å trekke ut fra verdifull informasjon. Med å komme Stor Data De gode gamle Excel-regnearkene var ikke lenger aktuelle, og det var nødvendig å finne et like enkelt alternativ.
Forretningsmenn lette etter nye muligheter til å visualisere data, gjerne med støtte for interaktivitet og ethvert tilgjengelig perspektiv. Tross alt er data bare så god som mengden informasjon som kan trekkes ut fra den.
Grafikkbiblioteker i JavaScript har raskt overtatt nisjen med kraftige og tilgjengelige datavisualiseringsverktøy. Med deres hjelp kan du trekke ut alt nyttig informasjon fra en hvilken som helst mengde data, se på den fra en praktisk vinkel og se mønstre som er usynlige på grafer på Excel-nivå.
1. Chartist.js
Chartist er enkelt og lett å lære, viktig for alle som er vant til Excel-tabeller. Grafikken er adaptiv og er ikke avhengig av skjermen DPI, som gjør biblioteket flott løsning for nettsteder designet for et bredt spekter av enheter — fra mobil til skrivebord. Tegning er basert på SVG-teknologi, som garanterer kompatibilitet med alle moderne nettlesere.
Det som gjør Chartist til et unikt kartbibliotek er fellesskapet. Det er mange programmerere som jobber med prosjektet som er misfornøyde med eventuelle begrensninger ved alternative skript. Hvis du har støtt på begrensninger mens du arbeider med et annet bibliotek, kan du være trygg på at de har blitt eliminert her.
2. FusionCharts
Et av de største bibliotekene, FusionCharts, har mer enn 90 kartalternativer og 900 karttyper tilgjengelig fra esken. Forfatterne skryter av at deres produkt er det beste innen sitt felt når det gjelder datavisualisering. De støtter ordene sine med detaljerte eksempler på bruk av biblioteket i virkelige forretningsprosesser.
FusionCharts støtter et bredt spekter av enheter og teknologier, inkludert Mac, iPhone, Android, og kan til og med trekke inn rariteter som IE6!
Utviklerne tenkte også på formatene – JSON og XML støttes, gjengivelse via HTML5/SVG og VML. Ferdige diagrammer kan eksporteres som bilder i PNG- eller JPG-format, eller som PDF. FusionCharts-utvidelser lar deg bygge inn biblioteket i hvilken som helst teknologistabel, inkludert jQuery, AngularJS, ren PHP eller Rails.
Samlet sett gir FusionCharts praktisk talt alle funksjonene du trenger for å lage vakre, brukervennlige diagrammer som egner seg for seriøs forretningsanalyse.
Lisens: gratis for ikke-kommersielle prosjekter, betalt ellers.
3. Dygrafer
Dygraphs er et åpen kildekode-grafikkbibliotek som er ideelt for ekstremt store datasett. "Ut av esken" støtter den fullt ut interaktivitet, muligheten til å avgrense og forstørre grafer selv på mobile enheter.
Biblioteket støttes av alle moderne nettlesere, og bakoverkompatibilitet strekker seg opp til IE8. Mange alternativer og tilbakeringinger støttes.
Lisens: åpen kildekode, gratis for enhver bruk.
4. Chart.js
Chart.js er ideell for små prosjekter når du trenger et flatt, rent, elegant diagram og raskere. Biblioteket tar opp bare 11 KB i komprimert form, samtidig som det gir 6 grafalternativer - linje, histogram, pai, lobe, polar og ring. Hver av dem er i en modul, som lar deg laste inn akkurat den blokken du vil bruke i prosjektet.
Gjengivelsen gjøres ved hjelp av HTML5 Canvas, og i nettlesere som ikke har det, gjennom polyfills. All grafikk er interaktiv.
Lisens: åpen kildekode, gratis for enhver bruk.
5. Google-diagrammer
Google Charts tilbyr et bredt utvalg av diagrammer for nesten enhver smak. Gjengivelse gjøres ved hjelp av HTML5/SVG, eller VML på eldre IE. Alle grafene er interaktive, og noen kan forstørres og strekkes etter behov. Se på eksisterende arter grafer finner du her.
Lisens: gratis, men ikke åpen kildekode. Lisensen forbyr å plassere JS-filen for gjengivelse på nettstedserveren. Hvis du jobber med et nettsted for en bedrift og plasserer konfidensielle data i grafikk, er det bedre å se alternativ til Google Diagrammer.
6. Highcharts
Highcharts er et annet populært interaktivt kartbibliotek, som de fleste andre, basert på HTML5/SVG/VML. Stort utvalg støttes forskjellige typer diagrammer, og et spesielt grensesnitt med samme navn lar deg lage interaktive diagrammer mens du er på farten.
Lisens: gratis for ikke-kommersiell bruk, ellers betalt.
7.Flott
Flot er et av de eldste bibliotekene, hovedfunksjon som er enkelhet og interaktivitet. Den kjører på jQuery, og for å være fullt funksjonell trenger du erfaring med den. Når du mestrer syntaksen, vil du ha full kontroll over presentasjonen, dens animasjon og interaktive deler.
Flot støtter de fleste moderne nettlesere og kan til og med tegne i IE6. I depotet for plugins for Flot kan du finne mange utviklinger av tredjepartsforfattere som utvider funksjonaliteten til biblioteket. Du kan se eksempler på bruk av Flot.
Lisens: åpen kildekode, gratis for enhver bruk.
8. D3.js
For noen er D3 det første man tenker på når det kommer til datavisualisering. Det er veldig mektig åpen kilde et prosjekt som lar deg skape utrolige visuelle effekter ved å endre DOM. Grafer tegnes ved hjelp av HTML5, SVG og CSS.
Biblioteket overholder W3C-standarder og støttes av alle gjeldende nettlesere. Utviklere elsker det for sitt brede utvalg av funksjoner og kraftige API. En demo av D3s evner er tilgjengelig.
Vær forsiktig - D3 kommer ikke med innebygd grafikk, og du må installere de riktige utvidelsespakkene først for å tegne. Du kan imidlertid finne mange D3-baserte sammenstillinger med ferdiglagde sett med diagrammer.
Lisens: åpen kildekode, gratis for enhver bruk.
9. n3-diagrammer
Hvis du trenger en teknologi som kan tegne enkle interaktive linjegrafer basert på AngularJS-applikasjonen din, så er dette ditt valg. N3 er basert på D3 og retter seg mot bare ett segment av utviklere — de som bruker AngularJS. De som leter etter variasjon vil kanskje se på andre alternativer. Eksempler på bruk av N3 er tilgjengelige.
Lisens: åpen kildekode, gratis for enhver bruk.
10.NVD3
NVD3 er et prosjekt basert på d3.js, som har som mål å lage et praktisk og komplett sett med funksjoner for å tegne grafer, men forenkle prosessen i forhold til ren d3. Med dens hjelp kan du operere med en enorm mengde data og nyte et spesielt vakkert bilde.
Lisens: åpen kildekode, gratis for enhver bruk.
11. Glørkart
Ember Charts ble utviklet av Addepar for å utvide utvalget av Ember-funksjoner. I tillegg til diagrammer inkluderer dette teamet også Ember Tables og Ember Widgets. Biblioteket er bygget på grunnlag av D3 med integrasjon i Ember.js-rammeverket.
Et sterkt, omhyggelig polert bibliotek er perfekt for å jobbe med data av enhver kompleksitet. Innebygd støtte for feilhåndtering forhindrer at presentasjonen din krasjer når du møter feil data. Du kan utvide funksjonaliteten til monteringen selv.
Lisens: åpen kildekode, gratis for enhver bruk.
12. jQuery Sparklines
Før dette snakket vi mest om tungvektere — allroundere som kan gjøre bokstavelig talt alt. Men noen ganger trenger du noe enkelt å gjøre grunnleggende diagrammer. jQuery Sparklines er akkurat løsningen som fyller denne nisjen. Den kan brukes til å generere sparklines — små linjegrafer som gir en ide om generelle trender og tar minimalt med plass på siden. Biblioteket støttes av de fleste nettlesere, inkludert IE6.
Lisens: åpen kildekode, gratis for enhver bruk.
13. Sigma.js
Når vi snakker om spesialiserte forsamlinger, kan man ikke ignorere Sigma. Dette er et kraftig bibliotek som først og fremst omhandler interaktive diagrammer og samhandling med nettverket.
Inne i Sigma kan du finne en utrolig mengde interaktivitetsinnstillinger. Det er med dette som kommer forståelsen av at selv en linjegraf kan være fascinerende og uvanlig. Bare ta en titt på demoen, så ser du hva vi snakker om.
Lisens: åpen kildekode, gratis for enhver bruk.
14. Morris.js
Som Morris sa, god tidsplan trenger ikke være komplisert. Morris — et miniatyrbibliotek på jQuery basert og Raphael, som gir enkel og ren grafikk. Listen over støttede visualiseringer er liten, men Morris er verdt et forsøk hvis du vil ha noe raskt, enkelt og kjent.
Lisens: åpen kildekode, gratis for enhver bruk.
15. Cytoscape.js
Cytoscape er et vakkert åpen kildekode-bibliotek på rent Javascript lisensiert under LGPL3+. Maksimal optimalisering og ingen eksterne avhengigheter. Cytoscape lar deg lage grafer som du deretter kan bruke separat ved å bygge inn koden på andre sider.
Biblioteket fungerer for alle moderne nettlesere og støtter populære rammeverk inkludert Node.js, jQuery, Meteor og mange andre. Merk at det er en applikasjon som heter Cytoscape, som til tross for navnet ikke er relatert til biblioteket på noen måte.
Lisens: åpen kildekode, gratis for enhver bruk.
16. C3.js
C3.js er en annen gaffel av D3. Antall grener fra D3 viser hvor gode muligheter biblioteket har, og hvor vanskelig det er for programmerere å takle det.
C3.js omgår D3s forferdelige læringskurve gjennom sine egne kodebehandlere for grafpresentasjon. C3 lar deg lage dine egne klasser, basert på hvilke du kan generere unike grafer. Den har allerede API og tilbakeringinger som er nødvendige for å jobbe med diagrammet etter gjengivelse.
Bruken av grafer og diagrammer har svært brede bruksområder. Med deres hjelp kan du vise mye informasjon i en praktisk og forståelig form, og derfor raskt forstå og forstå den.
Det er flere måter å legge til en graf eller et diagram på en nettside. Den første, som du sikkert allerede har tenkt på, er å tegne den inn grafisk redaktør. Men dette er ikke det mest praktiske og raskt alternativ. Det er mye enklere og raskere å lage en graf i JavaScript, hvor alt du trenger å gjøre er å angi nødvendige parametere, utseende og plassere den på siden.
I denne artikkelen vil vi fortelle deg om 10 tjenester og verktøy som hjelper deg med å lage grafer og diagrammer i JavaScript. Du finner andre metoder for å lage i ""-delen.
Bløff
For å tegne en linjegraf ved hjelp av denne tjenesten trenger du bare å kopiere noen få linjer med kode, sett nødvendige parametere og legg til tekst. Koden er så enkel og tydelig at du kan finne ut av den på bare noen få sekunder.
Med PlotKit kan du bygge diagrammer og grafer som vises riktig i alle nettlesere. På siden finner du dokumentasjon, eksempler på karttyper og hurtiginnføring(med beskrivelse av alle parametere og innstillinger) for raskt å komme i gang.
Denne tjenesten lar deg lage flotte visuelle funksjoner. Skriv inn en ligning, for eksempel 2*sin(4*x)^(x+4), trykk "Enter" og funksjonen er klar. Etter det er alt du trenger å gjøre å kopiere url-en og lime den inn på siden din.
Det kraftigste verktøyet for å bygge tabeller, grafer og diagrammer ved hjelp av jQuery. På siden finner du eksempler på alle typer grafer, samt Detaljert beskrivelse parametere og oppsettstrinn.
Flot
jQuery-kartbibliotek fra Google. Det er ikke nødvendig å skrive noe mer om dette, alt er allerede klart (: Men vi merker likevel at tjenesten tilbyr et stort antall vakre eksempler med fleksibelt og enkelt oppsett.
Lar deg lage diagrammer og histogramtabeller med data. For å bygge må du skrive inn de nødvendige dataene og klikke på "Beregn" -knappen. Deretter kopierer du koden og laster ned et lite skript. Om ønskelig kan alle data legges inn i selve koden.
Tjenesten tilbyr 6 typer diagrammer (kakediagram, linjediagram, dynamisk diagram og 3 typer histogrammer). Det er en beskrivelse av innstillinger, parametere og detaljerte eksempler alle typer diagrammer.
Raphael
Raphaël er et lite JavaScript-bibliotek som gjør det mye enklere å lage grafer og diagrammer. Dette er mest kraftig verktøy av alle de presentert i denne anmeldelsen. Det vil være lettere for deg å se mulighetene til biblioteket selv enn å lese en beskrivelse av dets muligheter.
Plotr
Bibliotek for å lage diagrammer på Mootools. Flott verktøy, som presenterer informasjon på en vakker og forståelig måte. Og for å konfigurere den trenger du bare å endre eller legge til verdier.
Mulighetene til denne tjenesten lar deg bygge 3D-grafikk. Blant funksjonaliteten er det verdt å fremheve enkelt oppsett, raskt arbeid script og evnen til å bygge cosinus- og sinusgrafer.
- Oversettelse
Det er nesten umulig å forestille seg et dashbord uten diagrammer og grafer. De viser kompleks statistikk raskt og effektivt. Dessuten forbedrer et godt diagram også den generelle utformingen av nettstedet ditt.
I denne artikkelen vil jeg vise deg noen av de beste JavaScript biblioteker for å lage diagrammer/skjemaer (og pivottabeller). Disse bibliotekene vil hjelpe deg med å lage vakker og tilpassbar grafikk for dine fremtidige prosjekter.
Selv om de fleste biblioteker er gratis og redistribuerbare, har noen av dem betalte versjoner med ekstra funksjonalitet.
D3.js – datasentriske dokumenter I dag, når vi tenker på grafer, er det første vi tenker på D3.js. Som et åpen kildekodeprosjekt bringer D3.js uten tvil mye til bordet. nyttige funksjoner, som de fleste eksisterende biblioteker mangler. Funksjoner som "Enter and Exit", kraftige overganger og en syntaks som ligner på jQuery eller Prototype gjør det til et av de beste JavaScript-bibliotekene for å lage grafer og diagrammer. I D3.js genereres de ved hjelp av HTML, SVG og CSS.I motsetning til mange andre JavaScript-biblioteker, kommer ikke D3.js med forhåndsbygde grafer rett ut av esken. Du kan imidlertid ta en titt på listen over grafer laget med D3.js for å få en generell idé.
D3.js fungerer ikke ordentlig med eldre nettlesere som IE8. Men du kan alltid bruke plugins som aight plugin for kompatibilitet på tvers av nettlesere.
D3.js har tidligere vært mye brukt på nettsteder som NYTimes, Uber og Weather.com
Google-diagrammer
Google Charts er et JavaScript-bibliotek som jeg regelmessig bruker for å lage diagrammer enkelt og greit. Gir mange forhåndsbygde diagrammer som kombinasjonshistogrammer, søyle diagram, kalenderdiagrammer, sektordiagrammer, geodiagrammer osv.
Google-diagrammer har også mange konfigurasjonsinnstillinger som er med på å endre utseende grafisk kunst. Grafikken genereres ved hjelp av HTML5/SVG for å sikre kompatibilitet på tvers av nettlesere og portabilitet på tvers av plattformer til iPhone, iPad og Android. Inneholder også VML for å støtte eldre IE-versjoner.
Highcharts JS
Highcharts JS er et annet veldig populært kartbibliotek. Fullført stort beløp animasjoner av ulike typer som kan tiltrekke mye oppmerksomhet til nettstedet ditt. Som andre biblioteker, inneholder HighchartsJS mange forhåndslagrede diagrammer: spline, form, kombinasjon, kolonne, histogram, kake, scatter, etc.
En av de største fordelene med å bruke HighchartsJS er kompatibiliteten med eldre nettlesere som f.eks Internet Explorer 6. Standard nettlesere bruk SVG for å gjengi grafer. I eldre IE bygges grafer via VML.
Selv om HighchartsJS er gratis for personlig bruk, må du kjøpe en lisens for kommersiell bruk.
Fusioncharts
Fusioncharts er et av de eldste JavaScript-bibliotekene, først utgitt i 2002. Grafer genereres ved hjelp av HTML5/SVG og VML for bedre portabilitet og kompatibilitet.
I motsetning til mange biblioteker, gir Fusioncharts muligheten til å analysere både JSON-data og XML. Du kan også eksportere disse grafene til 3 forskjellige formater: PNG, JPG og PDF.
Fusioncharts er svært kompatibel med eldre nettlesere som IE6. Og av denne grunn har det blitt et av de mest foretrukne bibliotekene i mange bransjeorganisasjoner.
Du kan bruke den vannmerkede versjonen av Fusioncharts gratis i både personlige og kommersielle prosjekter. Du må imidlertid kjøpe en lisens for å bli kvitt vannmerket.
Flot
Flot er et JavaScript-bibliotek for JQuery som lar deg lage grafer/diagrammer. Et av de eldste og mest populære diagrambibliotekene.
Flot støtter stolpediagram, punktdiagram, stolpediagram, kolonnediagram og enhver kombinasjon av disse diagramtypene. Også kompatibel med eldre nettlesere som IE 6 og Firefox 2.
Flot er helt gratis, kommersiell støtte tilgjengelig på spesiell forespørsel til utvikleren. Her er en liste over eksempler med diagrammer laget i Flot.
amCharts
amCharts er utvilsomt et av de flotteste kartbibliotekene der ute. Det er fullstendig delt inn i 3 uavhengige typer: JavaScript-diagram, kartdiagram (amMaps) og aksjekart.
AmMaps er min favoritt av de tre ovenfor. Gir funksjoner som varmekart, tegne linjer, legge til tekst på kartet, laste ikoner eller bilder øverst på kartet, endre målestokk osv.
amCharts bruker SVG for å gjengi diagrammer som bare fungerer i moderne nettlesere. Grafer vises kanskje ikke riktig i IE under versjon 9.
EJS Chart leveres gratis og betalte versjoner. Gratis versjon har en begrensning som ikke tillater deg å bruke mer enn 1 diagram per side og mer enn to (numeriske) sekvenser per diagram. Sjekk ut prisdetaljer.
uvCharts
uvCharts er et JavaScript-bibliotek med åpen kildekode som hevder å ha over 100 konfigurasjonsalternativer. Den har diagrammer for 12 forskjellige standarder rett ut av esken.
UvCharts er bygget på D3.js-biblioteket. Dette prosjektet lover å eliminere alle de komplekse nyansene til D3.js-koding og gi enkel implementering av grafer standard visning. uvCharts er generert ved hjelp av SVG, HTML og CSS.
Konklusjon Nå er valget av det beste diagrambiblioteket for dine fremtidige prosjekter opp til deg. Utviklere som vil ha full kontroll over grafene sine, vil definitivt velge D3.js. Nesten alle de ovennevnte bibliotekene har god støtte på Stackoverflow-foraene.Jeg håper du likte denne artikkelen. Ha en fin dag.
Grafer er et utmerket visuelt hjelpemiddel når du presenterer data. Uten dem er det umulig å lage et adminpanel av høy kvalitet. De er ikke så enkle å installere. Imidlertid er det et nytt bibliotek som gjør denne oppgaven enklere - xCharts. I dag skal vi bruke dette programmet sammen med Twitter Bootstraps Date Range-palett for å lage en vakker AJAX-graf for nettapplikasjonen din som henter data fra MySQL-tabeller.
HTMLDemostrukturen til dette språket er ganske enkel - vi må legge til elementer på siden for å begynne å plotte og velge informasjon. Siden vi uansett aktiverer lasting på siden, kan vi bruke sidestiler og ikoner for å gi denne strukturen et pent utseende.
index.php
Pene diagrammer med jQuery og AJAX | Tutorialzine-demo
Her brukes mye eksterne ressurser. I hoveddelen har vi cascading stilarkfiler for xCharts, nummersorterer, lasting (integrert fra superrask CDN CloudFlare), og vår style.css-fil.
Før vi lukker tabellsnarveien, har vi JQuery-biblioteket, d3.js (påkrevd av xсharts-programmet), xcharts, et bibliotek med brukervennlig grensesnitt sugar.js (som krever en "date range" plugin), en "date range" plugin og en script.js fil. Deretter vil du se hvordan det hele fungerer sammen.
MySQLSom jeg nevnte i introduksjonen, vil skriptet vi skriver hente data fra en MySQL-tabell og vise dem i et diagram. Du finner SQL-koden som skal lage tabellen i schema.sql in komprimert fil, tilgjengelig for nedlasting ved hjelp av øverste knapper. Tabellen vil se slik ut:
Den har bare tre kolonner. Datokolonnen er tildelt en unik indeks, noe som betyr at det ikke kan være dupliserte oppføringer samme dag. Kolonnen "salgsposter" registrerer antall salg i løpet av dagen. Databasen din vil sikkert være annerledes, men så lenge du får det riktige svaret inn i formatet for å strukturere dataene til et enkelt tekstformat som brukes til å utveksle JSON-informasjon fra et PHP-skript, vil det ikke være noen problemer (mer om dette i det neste seksjon).
Merk: Ikke glem å skrive inn MySQL-tilkoblingsdetaljer i setup.php. Da må du lage ny base MySQL-data og importer schema.sql fra PHPMyAdmin-systemet eller fra ditt valgte administrasjonssystem.
PHPI vår PHP-skript vi vil velge poster fra tabellen som tilsvarer den overførte innledende og endelige informasjonen, samle alle dataene i en matrise og vise dem i tekstformat datautveksling (JSON):
ajax.php
Header("Content-Type: application/json"); // sette opp biblioteket require_once("setup.php"); if (isset($_GET["start"]) OG isset($_GET["end"])) ( $start = $_GET["start"]; $end = $_GET["end"]; $data = array(); // velg resultater $results = ORM::for_table("chart_sales") ->where_gte("date", $start) ->where_lte("date", $end) ->order_by_desc("date") ->find_array(); // lag en ny matrise med data foreach ($results som $key => $value) ($data[$key]["label"] = $value["date"]; $ data[$ key]["value"] = $value["sales_order"]; echo json_encode($data);
Her bruker jeg favorittbiblioteket mitt - Idiorm. Jeg har brukt det tidligere til nettsidekonsultasjoner (og mange personlige prosjekter). Dette er kun én fil (plassert i biblioteket/mappen) og gjør arbeidet med databaser veldig enkelt. Alt jeg gjør er å hente alle resultater fra databasen som har en tidsverdi mellom start- og slutttidsstemplene i samsvar med forespørselen om å hente informasjonen.
Det resulterende JSON-svaret ser omtrent slik ut:
[( "label": "2013-01-07", "value": "4" ), ( "label": "2013-01-06", "value": "65" ), ( "label": "2013-01-05", "value": "96")]
Etikettegenskapene inneholder MySQL-tallverdiene i den tilsvarende raden, og kolonnene inneholder antall salg for den dagen. Det kommer bare an på JavaScript-kode for å behandle disse dataene på riktig måte og konvertere dem til et format som er egnet for bruk med xCharts-plugin.
All JS-kode er i assets/js/script.js. Koden er litt lang, og for å gjøre den lettere å følge, vil jeg presentere den for deg i deler.
Først vil vi sette noen få variabler og initialisere datovalgplugin. Vær oppmerksom på at dataområdet jeg brukte er en gaffel fra den originale plugin-en. Jeg bestemte meg for å jobbe med denne versjonen fordi originalen avhenger av date.js, et eldre databibliotek som er i konflikt med xCharts. I stedet brukes sugar.js – et utmerket nyttig bibliotek med pålitelig og oppdatert informasjon.
assets/js/script. js
$(function() ( // sett standarddatoer med shugar-funksjoner var startDate = Date.create().addDays(-6), // 6 dager siden endDate = Date.create(); // today var range = $ ( "#range"); // vis datoer i rekkefølge for oppføring range.val(startDate.format("(MM)/(dd)/(åååå)") + " - " + endDate.format("(MM)/ (dd)/(åååå)")); // last inn diagrammet ajaxLoadChart(startDate,endDate); range.daterangepicker(( startDate: startDate, endDate: endDate, ranges: ( "Today": ["today", "today") " ], "Yesterday": ["yesterday", "yesterday"], "Siste 7 dager": , "Siste 30 dager": // Du kan legge til flere oppføringer her ) ),function(start, end)( ajaxLoadChart( start, slutt));
Som du kan se, brukte vi sukker.js' informasjon og metoder for å bestemme start- og sluttpunktet for området. Jeg la inn resultatene fra de siste 7 dagene i skriptet, og oppdaterte områdeinnføringsfeltet.
La oss nå lage en graf:
// hint når du peker på diagrammet var tt = $("").appendTo("body"), topOffset = -32; var data = ( "xScale" : "tid", "yScale" : "lineær", "main" : [( klassenavn: ".stats", "data" : )] ); var opts = ( paddingLeft: 50, paddingTop: 20, paddingHøyre: 10, axisPaddingLeft: 25, tickHintX: 9, // Hvor mange haker som skal vises horisontalt dataFormatX: function(x) ( // her tidsstemplet som fulgte med // ajax er konvertert .php til det tilsvarende JavaScript Dato-objektet returner Date.create(x ), tickFormatX: function(x) ( // sett etikettformatet for x-aksen retur x.format("(MM)/(dd) "); ), "mouseover": funksjon (d, i) ( var pos = $(this).offset(); tt.text(d.x.format("(Måned) (ord)") + ": " + d.y ).css(( top: topOffset + pos.top, left: pos.left )).show( ), "mouseout": function (x) ( tt.hide(); ) ); // Opprett en ny xChart-forekomst ved å sende inn // grafikktypen, et sett med datoer og tilleggsfunksjoner var diagram = new xChart("linjeprikket", data, "#chart" , opts);
Først definerer jeg et xCharts-konfigurasjonsobjekt med dets egenskaper og tilbakeringinger. I dataFormatX-egenskapen transformerer jeg åååå-mm-dd-strengene returnert fra AJAX-forespørselen til de riktige JavaScript-objekter Dato slik at plugin-en kan vise dem riktig og gjøre sine beregninger.
Jeg bruker også en informasjonsbehandler for mouseover/mouseout plugin, og bruker den til å vise et verktøytips (pluginen følger ikke med en av modulene).
Endelig er den her JavaScript-funksjon for å laste inn data via AJAX:
// funksjon for å laste data via AJAX og vise den på diagramfunksjonen ajaxLoadChart(startDate,endDate) ( // hvis det ikke er data, vil diagrammet være tomt if(!startDate || !endDate)( chart.setData(( "xScale" : "tid ", "yScale" : "lineær", "main" : [( className: ".stats", data: )] )); ("ajax.php ", ( start: startDate.format("(åååå)-(MM)-(dd)"), slutt: endDate.format("(åååå)-(MM)-(dd)") ) , function(data) ( var set = ; $.each(data, function() ( set.push(( x: this.label, y: parseInt(this.value, 10) )); )); chart.setData (( "xScale" : "tid", "yScale" : "lineær", "main" : [( className: ".stats", data: sett )] ));
xCharts tilbyr en setData-metode slik at du enkelt kan flytte eller erstatte de viste dataene. className-attributtet er viktig fordi det er det plugin-en bruker for å definere grafen din. Hvis du ignorerer det, kan alle slags rare feil oppstå (stol på meg, jeg vet).
Dette fullfører vårt vakre diagram!
Slutt!Du kan bruke dette eksemplet til å forbedre kontrollområdene dine og visualisere statistiske data i et vakkert grensesnitt.
Hei kjære lesere! Diagrammer er en av de de beste måtene datavisning og mye mer informativ enn tabeller. I denne artikkelen vil vi se på et eksempel på å lage diagrammer ved hjelp av en utmerket javascript-plugin - Chart.js. For å lage diagrammer, histogrammer, linjegrafer, sektordiagrammer og mye mer plugin-en bruker. Som et eksempel på bruk av chart.js, la oss vurdere et sett med 3 elementer, det ene vil vise antall kjøpere av et fiktivt produkt over 6 måneder - dette vil være en graf, det andre vil vise hvilke land kundene er fra - dette vil være et sektordiagram og til slutt vil vi bruke et histogram for å vise fortjeneste for denne perioden.
Det første du må gjøre er å laste ned Chart.js. Alt som gjenstår er å koble den til siden. La oss si html-filer og js er i samme katalog, deretter i generelt syn Sideoppsettet ser slik ut:
1 |
|
Som du sikkert har lagt merke til sammenhengen jQuery-biblioteker ikke nødvendig, men hvis det er nødvendig for andre formål, kan du trygt koble det til, konflikter bør ikke oppstå.
Bruk Tegn en grafFor å tegne et linjediagram, må vi lage grafisk element HTML der du kan lage en graf ved hjelp av Chart.js:
Vi setter dimensjonene til elementet og angir identifikatoren.
1 | var buyers = document.getElementById("buyers").getContext("2d"); |
Ved å bruke Chart-klassen definerer vi et linjediagram.
Nå setter vi parameterne og dataene som skal vises:
1 | var countries= document.getElementById ("land") .getContext ( "2d" ) ; |
For mer "finkornede" innstillinger kan du også bruke alternativer.