Opprette ditt første interaktive JavaScript-diagram

b) Etter det, la oss inkludere våre data:

var data = [{x: 'DVD player', y: 19},{x: 'Home theater system', y: 24},{x: 'Karaoke player', y: 30},{x: 'Projector', y: 34},{x: 'TV receiver', y: 42}];

c) Deretter angir vi hvilken type diagram vi ønsker ved å ringe til den aktuelle konstruktørfunksjonen:

    var chart = anychart.bar();

d) For å gjøre ting klarere for seerne, vil jeg gi diagrammet en tittel:

    chart.title('Product Sales');

e) La oss nå lage en serie:

    chart.addSeries(data);// or we can specify a simple dataset within the method:chart.addSeries([19, 24, 30, 34, 42]);

f) Vårt kart må legges i en beholder, så vi spesifiserer den vi nettopp har laget:

    chart.container('container');

g) Alt virker bra, så vi kan tegne vårt diagram nå:

    chart.draw();

Slik ser resultatet ut:

Følgende er hele koden for din bekvemmelighet:

Ser ganske grei ut, ikke sant? Og nå kan vi enkelt sammenligne det totale salget etter kategori.

Opprette flere serier og stablet bardiagrammer

Nå som vi har lært grunnleggende om kartlegging med JavaScript, kan vi fortsette å bygge en litt mer komplisert graf som viser mer informasjon. Som jeg sa tidligere, vil jeg vise deg en enkel måte å lage et multi-serie bar diagram og deretter en stablet en.

I utgangspunktet er prosedyrene ganske like. Som alltid starter alt med data.

Data fra en tabell

I sammenheng med linjediagrammet ovenfor hadde vi en variabel (produktsalgsdata-serien) og flere kategorier (produkttyper). For å i tillegg vise sammensetningen av hver verdi, som er essensen av stablede strekdiagrammer, trenger vi mer detaljerte data.

For dette kan vi bruke data som allerede er vist på siden. For eksempel, hvis du allerede har et HTML-tabell, kan du enkelt bygge en graf basert på den. Hvis du bruker AnyCharts Data Adapter-modul alt du trenger er å spesifisere den tabellen som datakilde.

1) Få dataadapteren:

2) Lag data fra bordet:

    var tableData = anychart.data.parseHtmlTable('#tableWithData');

3) Lag et diagram og spesifiser datakilden:

    var chart = anychart.bar();chart.data(tableData);

Det umiddelbare resultatet er et fler-serie bardiagram som tillater oss for eksempel å raskt sammenligne hvert produkts ytelse innen hver enkelt kategori.

Endre type serien

Alle nødvendige detaljer, inkludert data, er allerede angitt. Nå kan vi endre serietypen og få et stablet stangdiagram ut av den konvensjonelle multi-serien en. Det er ikke vanskelig i det hele tatt, siden du trenger bare en linje med kode for å ha verdiene stablet:

    chart.yScale().stackMode('values');

Voila!

Vi har nettopp opprettet et stablet strekdi i fly uten å endre konfigurasjonen av den multi-serie en. Som et resultat er vi ikke bare klar nå å sammenligne totalt salg fordelt på kategori som med enkelt-seriens linjediagram fra begynnelsen av artikkelen, men vi kan også identifisere hvilket produkt som er ansvarlig for å lage en kategori totalt mindre eller større enn andre .

Siden vi på forhånd enige om at vårt endelige mål er et 100% stablet strekdi, la oss bare endre modusen for å få det:

    chart.yScale().stackMode('percent');

Det er et 100% stablet linjediagram, som gjør at du kan markere del-til-hele-relasjoner og vurdere bidraget til hvert produkt til kategorien totalt.

Designtilpasning

Design er svært viktig i datavisualisering, for å tiltrekke oppmerksomhet, øke klarheten og opprettholde visuell integritet i ditt webprosjekt. Hjertelig med dette kartleggingsbiblioteket er tilpasning ganske enkelt.

Legge til tekst

For klarhet, kan du gi din visualisering med tilleggstekster. For eksempel gir jeg den vertikale aksen en tittel og legger til et diagrammerke midlertidig:

    chart.xAxis().title('Products');chart.label({text: 'Classified!'});

Fargeinnstillinger

Du kan legge til farger gjennom en palett ( chart.palette () ) og endre bakgrunnsinnstillingene ( chart.background () ) blant annet. Eller du kan bruke et tema:

Da må vi spesifisere det i kartinnstillingene:

    anychart.theme(anychart.themes.wines);

Kartinteraktivitet

Å lage et JavaScript-diagram minst en liten interaktiv er ikke en stor avtale.

Sannsynligvis består den mest grunnleggende tilnærmingen i å aktivere svingerstaten på datapunkter, for å få dem til å endre farge og eller legge til eller endre markører. Valgstatusen bestemmer hvordan hvert punkt ser etter at du har klikket.

Noen enkle svever og velg basert interaktivitet er inkludert som standard så nå skal vi ikke legge til noe i eksemplet ovenfor. Vennligst kom tilbake til det for å utforske den grunnleggende interaktiviteten, hvis du vil.

Det er verdt å snakke om verktøytipselementet, som kan flyte når et punkt er svevet over. Jeg prøver alltid å gjøre bruk av verktøytips ved å få dem til å vise noen nyttige opplysninger om hvilken serie et punkt tilhører, hvilken verdi den representerer, og så videre. Du kan enkelt justere verktøytipsene dine for å vise noe. Vi presenterer verktøytipset og angir hva som skal vises i det:

    var tooltip = chart.tooltip();tooltip.displayMode('union');tooltip.textFormatter('{%SeriesName}: {%Value} ({%YPercentOfCategory}%)');

Her er resultatet:

Dette er bare et kort blikk på tilpasningsalternativene, for å gå i detalj ville være en hel artikkel av seg selv. For nå foreslår jeg at du leser interaktivitetsseksjon i dokumentasjonen for mer informasjon.

Konklusjon

Som du ser, er det ikke vanskelig å bygge interaktive diagrammer med JavaScript. Videre kan du finne alle eksemplene fra opplæringen i min samling på CodePen og bruk dem enkelt i arbeidet ditt. Bare kopier koden, endre dataene dine til din, og få prosjektet oppe og kjører veldig fort.

Husk alltid å sjekke dokumentasjonen og / eller API-referansen, samt ta hensyn til demoene til biblioteket du bruker, for eksempel dette AnyCharts galleri . Vanligvis er det ikke komplisert å se om det er noe nær det du trenger, finn et eksempel som passer best, gjør noen enkle endringer, og bruk det på den måten du trenger.