Metoden för att rita om ett diagram när data ändras beror starkt på kartbiblioteket du använder. Det finns inget enda universellt svar. De allmänna principerna liknar dock de flesta bibliotek:
1. Uppdatera datakällan:
Först måste du ändra de underliggande uppgifterna som diagrammet använder. Detta kan innebära:
* ersätter hela datasättet: Om dina data ändras helt kommer du sannolikt att ersätta den befintliga datauppsättningen eller objektet med en ny.
* Ändra befintliga data: Om bara delar av data ändras, uppdatera de specifika elementen i din datauppsättning eller objekt.
2. Trigger en ritraw:
Det är här det specifika kartobiblioteket spelar in. Här är exempel för några populära bibliotek:
* diagram.js: Chart.js hanterar vanligtvis uppdateringar automatiskt om du modifierar data direkt i egenskapen "Data" för diagramkonfigurationen. Men för mer komplexa uppdateringar kan du behöva ringa `chart.update ()` för att uttryckligen utlösa en ritraw.
`` `JavaScript
// Antagande "myChart" är din diagram.js diagram instans
mychart.data.DataSets [0] .data =[10, 20, 30, 40, 50]; // Uppdatera data
myChart.update (); // Force Redraw
`` `
* d3.js: D3.JS är deklarativt, vilket betyder att du beskriver diagrammets utseende baserat på data. För att rita om måste du köra koden igen som skapar diagramelementen med hjälp av de uppdaterade uppgifterna. Detta innebär ofta att använda `selectAll ()` att välja element och sedan uppdatera deras attribut baserat på de nya uppgifterna. Detta är betydligt mer manuellt än andra bibliotek.
`` `JavaScript
// Exempel D3.JS -uppdatering (förenklad):
d3.select ("#mychart") // Välj diagrambehållare
.Selectall ("rect") // Välj rektanglar (staplar i ett stapeldiagram, till exempel)
.data (newdata) // binda nya data
.attr ("höjd", d => d * 10); // Uppdatera höjd baserad på ny data
`` `
* highcharts: I likhet med Chart.js uppdaterar HighCharts ofta automatiskt om du ändrar data direkt. Men `diagram.redraw ()` är en pålitlig metod för att uttryckligen tvinga en ritraw.
`` `JavaScript
// Antagande "diagram" är din highcharts -diagram instans
diagram.series [0] .setData ([10, 20, 30, 40, 50]);
diagram.redraw ();
`` `
* Plotly: Plotly använder metoderna "plotly.react" eller "plotly.update" för att rita om diagrammet med uppdaterade data. `Plotly.React 'ersätter helt diagrammets data och layout, medan` plotly.Update' bara uppdaterar specifika spår eller attribut.
`` `JavaScript
Plotly.react ('mydiv', {// 'mydiv' är diagrammets container -id
x:[1,2,3],
Y:[4,5,6]
});
`` `
* Uppsättning: Uppsättningar, ett React-baserat kartbibliotek, arbetar på samma sätt som Chart.js:Du uppdaterar de data som skickas till diagramkomponenten och komponenten återförs automatiskt.
3. Hantera stora datasätt effektivt:
För mycket stora datasätt kan upprepade gånger omdragning av hela diagrammet vara långsamt. Tänk på dessa optimeringar:
* Inkrementella uppdateringar: Istället för att rita om hela diagrammet, uppdatera bara de delar som har ändrats.
* Data virtualisering: Endast återge den synliga delen av uppgifterna.
* Optimerade datastrukturer: Använd effektiva datastrukturer för att påskynda datatillgång och manipulation.
Kort sagt beror den exakta metoden på ditt valda kartbibliotek. Se dokumentationen för rätt metod för att uppdatera och rita om dina diagram. Prioritera alltid att uppdatera data först och sedan använda bibliotekets specifika omraskfunktion.
