Oprettelse af dit første interaktive JavaScript-diagram

b) Lad os derefter medtage vores 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) Så specificerer vi hvilken type diagram vi ønsker ved at kalde den relevante konstruktørfunktion:

    var chart = anychart.bar();

d) For at gøre tingene mere klare for seerne, vil jeg give diagrammet en titel:

    chart.title('Product Sales');

e) Lad os nu lave en serie:

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

f) Vores diagram skal placeres i en container, så vi specificerer den, vi netop har oprettet:

    chart.container('container');

g) Alt virker fint, så vi kan tegne vores kort nu:

    chart.draw();

Sådan ser resultatet ud:

Følgende er hele koden for din bekvemmelighed:

Ser ret let ud, ikke? Og nu kan vi bekvemt sammenligne det samlede salg pr. Kategori.

Oprettelse af multi-serie og stablet stregdiagrammer

Nu hvor vi har lært det grundlæggende ved at chartre med JavaScript, kan vi fortsætte med at opbygge en lidt mere kompleks graf, der viser flere oplysninger. Som jeg sagde tidligere, vil jeg vise dig en nem måde at lave et multi-serie stregdiagram og derefter en stablet.

Grundlæggende er procedurerne ret ens. Som altid begynder alt med data.

Data fra en tabel

I sammenhæng med stregdiagrammet ovenfor havde vi en variabel (produktsalgsdata serien) og flere kategorier (produkttyper). For yderligere at vise sammensætningen af ​​hver værdi, som er essensen af ​​stablede stregdiagrammer, har vi brug for mere detaljerede data.

Til dette kan vi bruge data, der allerede vises på siden. Hvis du for eksempel allerede har et HTML-bord, kan du nemt bygge en graf baseret på den. Hvis du bruger AnyChart's Data Adapter modul alt hvad du behøver er at angive den tabel som datakilde.

1) Få dataadapteren:

2) Forbered data fra bordet:

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

3) Opret et diagram og angiv datakilden:

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

Det umiddelbare resultat er et multi-seriens stregdiagram, der tillader os at for eksempel hurtigt sammenligne hvert produkts præstationer inden for hver enkelt kategori.

Ændring af serienummer

Alle nødvendige detaljer, herunder data, er allerede angivet. Nu kan vi ændre serietypen og få et stablet stregdiagram ud af den konventionelle multi-serie en. Det er slet ikke svært, da du kun har brug for en linje kode for at få værdierne stablet:

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

Voila!

Vi har netop oprettet et stablet stregdiagram i flyve uden at ændre konfigurationen af ​​den pågældende multi-serie. Som følge heraf er vi ikke kun klar til nu at sammenligne det samlede salg pr. Kategori som med single-seriens linjediagram fra artiklens begyndelse, men vi kan også identificere hvilket produkt der er ansvarlig for at lave en kategori, som er mindre eller større end andre .

Da vi på forhånd aftalt at vores endelige mål er et 100% stablet stregdiagram, lad os bare ændre mode for at få det:

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

Det er et 100% stablet stregdiagram, som giver dig mulighed for at fremhæve hele forhold til hinanden og vurdere hvert produkts bidrag til kategorien totalt.

Designtilpasning

Design er meget vigtigt i data visualisering, for at tiltrække opmærksomhed, øge klarheden og opretholde visuel integritet i dit webprojekt. Hjælpe med dette kortlægningsbibliotek er tilpasning ganske simpelt.

Tilføjelse af tekst

For mere klarhed kan du give din visualisering med yderligere tekster. For eksempel giver jeg den lodrette akse en titel og tilføjer en kortetiket midlertidigt:

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

Farveindstillinger

Du kan tilføje farve gennem en palette ( chart.palette () ) og ændre baggrundsindstillingerne ( chart.background () ) blandt andet. Eller du kan bruge et tema:

Så skal vi angive det i diagramindstillingerne:

    anychart.theme(anychart.themes.wines);

Diagraminteraktivitet

At lave et JavaScript-diagram i det mindste lidt interaktivt er ikke en big deal.

Sandsynligvis består den mest grundlæggende tilgang i at aktivere svingestatusen på datapunkter, for at få dem til at ændre farve og tilføje eller ændre markører. Vælge tilstanden bestemmer, hvordan hvert punkt ser ud efter at blive klikket.

Nogle enkle svever og vælg baseret interaktivitet er som standard inkluderet, så nu vil vi ikke tilføje noget til eksemplet ovenfor. Venligst vende tilbage til det for at udforske den grundlæggende interaktivitet, hvis du vil.

Det er værd at tale om værktøjstipelementet, som kan flyde, når et punkt er svævet over. Jeg forsøger altid at gøre god brug af værktøjstips ved at vise dem nogle nyttige oplysninger om, hvilken serie et punkt tilhører, hvilken værdi den repræsenterer og så videre. Du kan nemt justere dine værktøjstips for at vise noget. Vi introducerer værktøjstip og angiver hvad der skal vises i det:

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

Her er resultatet:

Dette er bare et kort overblik over tilpasningsmulighederne, for at gå i detaljer ville være en hel artikel alene. For nu foreslår jeg, at du læser interaktivitet sektion af dokumentationen for mere information.

Konklusion

Som du ser, er det ikke svært at opbygge interaktive diagrammer med JavaScript. Desuden kan du finde alle eksemplerne fra selvstudiet i min indsamling på CodePen og brug dem nemt i dit arbejde. Du skal bare kopiere koden, ændre mine data til din, og få dit projekt op og køre meget hurtigt.

Husk altid at tjekke dokumentationen og / eller API-referencen, samt vær opmærksom på demoen i det bibliotek, du bruger, f.eks. dette AnyCharts galleri . Det er normalt ikke kompliceret at se, om der er noget tæt på hvad du har brug for, find et eksempel der passer bedst, lav nogle enkle ændringer, og brug det så som du har brug for.