Chcete zlepšit tuto otázku? Aktualizujte otázku, aby byla aktuální pro Stack Overflow.
Zavřeno před 4 lety.
Vylepšete tuto otázku
Chci vytvořit spojnicový graf, který se aktualizuje každých pár sekund a nepotřebuje aktualizaci stránky (informace by získal ze samostatného souboru, který se aktualizuje na serveru), jsou jejich jakékoli knihovny JavaScript (jiné než JQuery) že to bude snadné? mohl by někdo ukázat zlý příklad na webové stránce? Jak těžké by to bylo na stupnici od 1 do 10? (10 je těžké)
Data se také aktualizují v pevném intervalu 10 s, pokud na tom záleží. A pokud to bude možné, rád bych zůstal pouze u CSS3 HTML5 a javascriptu.
Odpověď
Existuje několik knihoven grafů, které lze použít:gRaphael, Highcharts a ta, kterou zmiňují jiní. Tyto knihovny jsou poměrně snadno použitelné a dobře zdokumentované (řekněme 1 na stupnici obtížnosti).
AFAIK, tyto knihovny nejsou „v reálném čase“, protože nedávají možnost přidávat nové body za běhu. Chcete-li přidat nový bod, musíte překreslit celý graf. Ale myslím, že to není problém, protože překreslování grafu je rychlé. Udělal jsem několik pokusů s gRaphaelem a nezaznamenal jsem žádný problém s tímto přístupem. Pokud je rychlost aktualizace 10 s, měla by fungovat dobře (ale může to záviset na složitosti vašich grafů).
Pokud je problém s překreslením celého grafu, možná budete muset vytvořit graf sami pomocí knihovny vektorové grafiky, jako je Raphael nebo paper.js. To bude o něco těžší než použití grafické knihovny, ale mělo by to být proveditelné. (Řekněme 5 na stupnici obtížnosti).
Jak získáváte data v pevném intervalu, můžete použít běžný ajax lib. jQuery je pro mě v pořádku, ale existují i jiné možnosti. To nemusí být nejlepší volba pro nepevný interval a v tomto případě se možná budete muset podívat na něco jako socket.io, ale mělo by to důsledky i na straně serveru.
Poznámka 1:Raphael, gRaphael a Highcharts nejsou čistě HTML5, ale SVG/VML, ale myslím, že i toto je přijatelná volba.
Poznámka 2:Zdá se, že Highchart nevyžaduje překreslování grafu při vkládání nových bodů. Viz http://www.highcharts.com/documentation/how-to-use#live-charts