luzzattigramsci.it

  

Bästa artiklarna:

  
Main / Hur man gör chart.js lyhörd

Hur man gör chart.js lyhörd

Data finns runt omkring oss. Medan sökmotorer och andra applikationer fungerar mest optimalt med textbaserad representation av data, tycker människor att data som representeras visuellt är lätta att förstå. Denna handledning ger en snabb sammanfattning av introduktionen följt av en djupare titt på funktionerna i Chart. Biblioteket stöder sex olika diagramtyper, var och en av dessa diagramtyper kommer med massor av anpassningsalternativ.

Om det inte räcker kan du också skapa egna anpassade diagramtyper. Samtliga sex kärntyper i diagram. Nedan finns cdnjs-länken för att inkludera den :. I det här avsnittet kommer jag att ändra några inställningar för att visa vilket diagram. För den första demonstrationen skapar jag ett linjediagram. Det finns några grundläggande alternativ som du måste ställa in för att kartorna ska vara meningsfulla. Linjediagrammet förväntar sig en rad etiketter och datamängder. Etiketterna visas på X-axeln. Jag har fyllt i linjediagrammet med några dummydata.

Uppgifterna delas upp i en uppsättning datauppsättningar. Varje datamängd har en färg för fyllningen, raden och punkterna. Jag har satt FillColor till transparent i det här fallet. Samma sak gäller för andra värden.

Jag har inkluderat koden som anger några globala värden. Det finns många fler alternativ som du kan ändra efter dina behov, till exempel scaleLineColor och scaleIntegersOnly. Jag föreslår att du går igenom diagrammet.

Förutom globala alternativ finns konfigurationsalternativ tillgängliga för enskilda diagramtyper. Jag kommer att ställa in några av dessa alternativ i det här linjediagrammet för att ge dig en uppfattning :.

Diagram genererade av diagram. Om du ställer in lyhörd för sant som gjort ovan gör dem lyhörda. Om du behöver göra varje diagram lyhörd rekommenderar jag att du ställer in detta globalt istället, så här :. Se penndiagrammet. Ibland måste du visa data som ändras över tiden.

Ett klassiskt exempel på detta scenario är aktiemarknaden. I det här avsnittet kommer jag att skapa ett stapeldiagram och dynamiskt ta bort samt lägga till data till det. Jag kommer att använda några slumpmässiga data och jag har beslutat att representera data med ett stapeldiagram i det här fallet.

Det mesta av koden i detta exempel kommer att likna det föregående exemplet. Först skriver vi kod för att fylla i vårt diagram med dummydata. Jag använder ett funktionsuttryck för att generera slumpmässiga värden och sedan lagra det i en variabel dData.

Dessa värden används sedan för att förse oss med slumpmässiga data närhelst behov uppstår. Som i föregående exempel skapar jag en rad etiketter och datauppsättningar och ställer in en godtycklig fillColor. Jag börjar med att initialisera indexvariabeln till ett värde av 11.

Jag använder två metoder: Att ringa removeData i en diagraminstans tar bort det första värdet för alla datamängder i det specifika diagrammet. I fallet med barChartDemo tas det första värdet av datasetet bort.

Att anropa addData som skickar en rad värden tillsammans med etiketter lägger till en ny datapunkt i slutet av diagrammet. Kodavsnittet nedan uppdaterar diagrammet var tredje sekund. En alternativ metod för att uppdatera värden i ett diagram är att ställa in värdena direkt. I exemplet nedan sätter den första raden värdet på den andra stapeln i den första datasetet till 60. Om du ringer uppdatering vid denna tidpunkt animeras fältet från sitt nuvarande värde till 60.

Denna handledning täckte några viktiga funktioner i Chart. Det första exemplet demonstrerade användningen av några globala inställningar. Men diagram. Jag rekommenderar dig att gå igenom dokumentationen så att du kan få ett bra grepp om vad du kan och inte kan göra med det här biblioteket. Fancy, responsiva diagram med diagram. Komma igång Diagram. Nedan finns cdnjs-länken för att inkludera den: Jag kommer att ställa in några av dessa alternativ i det här linjediagrammet för att ge dig en uppfattning: Om du behöver göra varje diagram lyhörd rekommenderar jag att du ställer in detta globalt istället, så här: Lägg till och Ta bort data dynamiskt Ibland måste du visa data som ändras över tiden.

Slutsats Denna handledning täckte några viktiga funktioner i Chart. Möt författaren. Monty Shokeen. Monty är en front-end-utvecklare som älskar att lära sig om nya JavaScript-bibliotek och ramar. Han har gjort front-end utveckling i tre år nu och gillar att skriva om intressanta bibliotek och verktyg som han stöter på i sin forskning.

Äldre inlägg.

(с) 2019 luzzattigramsci.it