Skapa din första interaktiva JavaScript-diagram

b) Låt oss då ta med våra 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) Då anger vi vilken typ av diagram vi vill ha genom att ringa den relevanta konstruktörfunktionen:

    var chart = anychart.bar();

d) För att göra saker tydligare för tittare vill jag ge diagrammet en titel:

    chart.title('Product Sales');

e) Låt oss nu skapa 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 diagram måste läggas i en behållare, så vi specificerar den som vi just skapat:

    chart.container('container');

g) Allt verkar bra, så vi kan rita vårt diagram nu:

    chart.draw();

Så här ser resultatet ut:

Följande är hela koden för din bekvämlighet:

Ser ganska enkelt ut, eller hur? Och nu kan vi bekvämt jämföra den totala försäljningen per kategori.

Skapa flera serier och staplade streckdiagram

Nu när vi har lärt oss grunderna för att kartlägga med JavaScript, kan vi fortsätta bygga en något mer komplex graf som visar mer information. Som jag sa tidigare kommer jag att visa dig ett enkelt sätt att göra ett flerskiktstångschema och sedan en staplad.

I grunden är förfarandena ganska lika. Som alltid börjar allt med data.

Data från ett bord

I samband med stapeldiagrammet ovan hade vi en variabel (produktförsäljningsdata serien) och flera kategorier (produkttyper). För att dessutom visa sammansättningen av varje värde, vilket är kärnan i staplade stapeldiagram, behöver vi mer detaljerad data.

För detta kan vi använda data som redan visas på sidan. Om du till exempel har en HTML-tabell kan du enkelt bygga ett diagram baserat på det. Om du använder AnyChart s Data Adapter-modul allt du behöver är att ange den tabellen som datakälla.

1) Hämta dataadaptern:

2) Förbered data från bordet:

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

3) Skapa ett diagram och ange datakällan:

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

Det omedelbara resultatet är ett flerskiktstabell som gör det möjligt för oss att snabbt jämföra varje produkts prestanda inom varje enskild kategori.

Ändra typ av serie

Alla nödvändiga detaljer, inklusive data, är redan angivna. Nu kan vi ändra serietypen och få ett staplat stapeldiagram från den konventionella multi-serien. Det är inte svårt alls eftersom du bara behöver en rad kod för att ha värdena staplade:

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

Voila!

Vi har just skapat ett staplat stapeldiagram i flygningen utan att faktiskt ändra konfigurationen för den flera serien. Till följd av detta är vi inte bara redo nu att jämföra den totala försäljningen per kategori som med enkelseriens stapeldiagram från artikelns början men vi kan även identifiera vilken produkt som är ansvarig för att göra en kategori totalt mindre eller större än andra .

Eftersom vi på förhand överens om att vårt slutmål är ett 100% staplat stapeldiagram, låt oss bara byta läge för att få det:

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

Det är ett 100% staplat stapeldiagram som gör att du kan markera helhetsrelationer och bedöma varje produkts bidrag till kategorin totalt.

Design anpassning

Design är väldigt viktigt vid datavisualisering, för att locka uppmärksamhet, öka tydligheten och upprätthålla visuell integritet inom ditt webbprojekt. Hjälpsam med detta kartläggningsbibliotek är anpassningen ganska enkel.

Lägga till text

För tydlighet kan du ge din visualisering med ytterligare texter. Till exempel ger jag den vertikala axeln en titel och lägger till en tablettikett tillfälligt:

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

Färginställningar

Du kan lägga till färg via en palett ( chart.palette () ) och ändra bakgrundsinställningarna ( chart.background () ) bland annat. Eller du kan använda ett tema:

Då måste vi ange det i diagraminställningarna:

    anychart.theme(anychart.themes.wines);

Diagraminteraktivitet

Att göra ett JavaScript-diagram åtminstone lite interaktivt är inte en stor sak.

Förmodligen består det mest grundläggande tillvägagångssättet i att tillåta svävarläget på datapunkter, för att få dem att ändra färg och eller lägga till eller ändra markörer. Väljstaten bestämmer hur varje punkt ser ut efter att ha klickats.

Vissa enkla svävar och valda baserade interaktivitet ingår som standard så nu kommer vi inte lägga till något i exemplet ovan. Vänligen återvänd till det för att utforska den grundläggande interaktiviteten, om du vill.

Det är värt att prata om verktygetipselementet, som kan flyta när en punkt svängs över. Jag försöker alltid använda verktygetips bra genom att visa dem lite användbar information om vilken serie en punkt tillhör, vilket värde det representerar och så vidare. Du kan enkelt ställa in dina verktygstips för att visa något. Vi introducerar verktygstipset och specificerar vad som ska visas i det:

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

Här är resultatet:

Detta är bara en kort titt på anpassningsalternativen, för att gå in i detalj skulle vara en hel artikel av sig själv. För närvarande föreslår jag att du läser interaktivitetssektionen i dokumentationen för mer information.

Slutsats

Som du ser är det inte svårt att skapa interaktiva diagram med JavaScript. Dessutom kan du hitta alla exemplen från handledningen i mitt insamling på CodePen och använd dem enkelt i ditt arbete. Kopiera bara koden, ändra mina data till din, och få ditt projekt igång mycket snabbt.

Var vänlig och kom ihåg att kontrollera dokumentationen och / eller API-referensen samt uppmärksamma demoserna i det bibliotek du använder, till exempel detta AnyCharts galleri . Vanligtvis är det inte komplicerat att se om det finns något nära vad du behöver, hitta ett exempel som passar bäst, gör några enkla ändringar och använd den så som du behöver.