Ako zmeníte graf, keď zmeníte údaje?

Metóda na prekreslenie grafu, keď sa zmeny údajov zmení, do značnej miery závisí od knižnice mapovania, ktorú používate. Neexistuje žiadna univerzálna odpoveď. Všeobecné princípy sú však vo väčšine knižníc podobné:

1. Aktualizujte zdroj údajov:

Najprv musíte upraviť základné údaje, ktoré graf používa. To by mohlo zahŕňať:

* Výmena celého súboru údajov: Ak sa vaše údaje úplne zmenia, pravdepodobne nahradíte existujúce dátové pole alebo objekt novým.

* Modifikácia existujúcich údajov: Ak sa zmenia iba časti údajov, aktualizujte konkrétne prvky v rámci vášho dátového poľa alebo objektu.

2. Spustite prepracovanie:

Tu prichádza do hry špecifická knižnica mapovania. Tu sú príklady pre niektoré populárne knižnice:

* graf.js: GAart.js zvyčajne spracováva aktualizácie, ak upravujete údaje priamo v vlastnosti „Data“ konfigurácie grafu. Ak však pre zložitejšie aktualizácie budete musieť zavolať `gart.update ()`, aby ste explicitne spustili prekreslenie.

`` `JavaScript

// za predpokladu, že „Mychart“ je váš inštancia grafov.

mychart.data.datasets [0] .data =[10, 20, 30, 40, 50]; // Aktualizujte údaje

mychart.update (); // vynútiť prekreslenie

`` `

* d3.js: D3.js je deklaratívny, čo znamená, že opíšete vzhľad grafu na základe údajov. Ak chcete prekresliť, musíte znova spustiť kód, ktorý vytvorí prvky grafu pomocou aktualizovaných údajov. To často zahŕňa použitie `selectl ()` na výber prvkov a potom aktualizáciu ich atribútov na základe nových údajov. Je to podstatne manuálnejšie ako iné knižnice.

`` `JavaScript

// Príklad D3.js Update (zjednodušené):

d3.select ("#mychart") // Vyberte kontajner grafu

.selectall ("rect") // Vyberte obdĺžniky (napríklad stĺpce v stĺpcovom grafe)

.data (newdata) // viazať nové údaje

.attr ("výška", d => d * 10); // Aktualizujte výšku na základe nových údajov

`` `

* Highcharts: Podobne ako graf.js, Highcharts sa často automaticky aktualizuje, ak údaje upravujete priamo. Avšak `graf.redraw ()` je spoľahlivou metódou na výslovné vynútenie prekreslenia.

`` `JavaScript

// Za predpokladu, že „graf“ je vaša inštancia Highcharts Graf inštancie

graf.series [0] .setData ([10, 20, 30, 40, 50]);

graf.redraw ();

`` `

* Ploty: Ploty používa metódy „plotly.react` alebo` plotly.update` na prekreslenie grafu aktualizovanými údajmi. `Plotly.react` úplne nahrádza údaje a rozloženie grafu, zatiaľ čo` plotly.update` aktualizuje iba zadané stopy alebo atribúty.

`` `JavaScript

Plotly.react ('myDiv', {// 'mydiv' je ID kontajnera grafu

X:[1,2,3],

y:[4,5,6]

});

`` `

* RECHARTS: Recharts, knižnica grafov založených na reakciách, funguje podobne ako graf.js:Aktualizujete údaje odovzdané do komponentu grafu a komponent automaticky opätovne vyzdvihuje.

3. Efektívne spracovať veľké súbory údajov:

Pre veľmi veľké súbory údajov môže byť opakovane prekreslenie celej grafu pomalé. Zvážte tieto optimalizácie:

* Prírastkové aktualizácie: Namiesto prekreslenia celého grafu aktualizujte iba časti, ktoré sa zmenili.

* virtualizácia údajov: Viditeľnú časť údajov vykreslí iba.

* Optimalizované dátové štruktúry: Použite efektívne dátové štruktúry na urýchlenie prístupu k údajom a manipulácii.

Stručne povedané, presná metóda závisí od vašej zvolenej knižnice mapovania. Správnu metódu aktualizácie a prekreslenie grafov nájdete v jeho dokumentácii. Najskôr prioritujte aktualizáciu údajov a potom pomocou špecifickej funkcie redraw knižnice.

• Predchádzajúca strana: Čo je interné zálohovanie a ako môžete súbory dátového systému? 
• Ďalšia strana: Dátový súbor patriaci do systému Systémový tabuľkový priestor je poškodený a žiadne zálohovanie k dispozícii Ako obnovíte súbor?