SVG vs HTML5 Canvas Based Charts

Question

Ich muss Diagramme im Browser mit einem Python-Backend (was hier nicht von Bedeutung sein). Es gibt zahlreiche Bibliotheken wie JQPlot, D3, Google Charts, um dies zu erreichen.

Aber wenn Sie sie klassifizieren, sind sie entweder HTML5 Canvas oder SVG basiert. Beide sind wichtige Technologien in ihrem eigenen Raum. Aber

for charting as a subject, shall I go with SVG based libraries or 
HTML5 Canvas based libraries. What are downside and benefits of 
both approaches. 

Ich habe keine vorherige Erfahrung mit Charting und will nicht auf die Wand schlagen , nachdem ich das Projekt zu starten.

Answer 1

Projekte mit einer große Datenmenge kann Canvas bevorzugen. SVG Ansätze typischerweise einen DOM-Knoten pro Punkt erstellen (es sei denn, Sie Pfade zu machen), die dazu führen können:

1. Eine Explosion in der Größe Ihres DOM-Baum

2. Leistungsprobleme

Mit einem Pfad können Sie dieses Problem umgehen, aber dann verlieren Sie die Interaktivität.

Angenommen, Sie erstellen eine Kursgrafik. Wenn Sie über ein Diagramm mit, sagen wir, höchstens 5 Jahren und dem Ende von Handelsdaten nur sprechen, denke ich, dass die Antwort eindeutig SVG ist. Wenn Sie Walmart's historische Daten vom ersten Handelstag an betrachten oder volle Handelsinformationen pro Minute machen, müssen Sie sich SVG wirklich genau anschauen. Vermutlich müssen Sie ein fantastisches Speichermanagement und einen Fetch-on-Demand-Ansatz verwenden, da SVG auseinander fällt, insbesondere wenn Sie ein Beispiel an einen SVG-Knoten übergeben.

Wenn Interaktivität Voraussetzung ist, SVG hat leicht die Kante gegeben:

• Es ist ein Retained Mode API
• können Sie typische Ereignis verwenden Handler
• Sie können hinzufügen/Knoten entfernen leicht usw.

natürlich sehen Sie, dass, wenn Sie voll Interaktivität erfordern, ma es Ich gehe gegen Mechanismen, die SVG skalieren lassen, wie den Weg, der kollabiert, so dass hier eine inhärente Spannung herrscht.

Es wird einen Kompromiss in den Extremen geben. Wenn die Größe klein ist, ist die Antwort SVG Hands-Down. Wenn die Größe groß und keine Interaktivität ist, lautet die Antwort SVG mit Pfadzeichnung oder Canvas. Wenn die Größe groß ist und Interaktivität erforderlich ist, müssen Sie auf die Leinwand oder das schwierige SVG gehen, was in beiden Fällen sehr komplex ist.

Einige Bibliotheken bieten sowohl Canvas- als auch SVG-Renderings wie ZingChart und Dojo an. Andere neigen dazu, mit nur einer der beiden Optionen zu bleiben.