2015-01-22 13 views
17

devo disegnare grafici su browser usando un backend pitone (che potrebbe non importa qui). Esistono numerose librerie come JQPlot, D3, Google Charts per raggiungere questo obiettivo.SVG vs HTML5 Canvas grafici basati

Ma se li si classificano, essi sono o HTML5 Canvas based o basato su SVG. Entrambe sono tecnologie importanti nel loro spazio. Ma

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. 

non ho alcuna esperienza precedente con la creazione di grafici e non vogliono colpire il muro dopo avvio il progetto.

+0

Dai un'occhiata a questo articolo di MSDN; https://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx – Adi

risposta

28

I progetti con una quantità di dati possono favorire il canvas. approcci SVG in genere creano un nodo DOM per punto (a meno che non si fanno percorsi), che può portare a:

  1. un'esplosione nella dimensione del tuo albero DOM

  2. problemi di prestazioni

Utilizzando un percorso, è possibile aggirare questo problema, ma si perde quindi l'interattività.

dici che stai costruendo un grafico azionario. Se stai parlando di un grafico con, diciamo ... max 5 anni e solo fine di campioni di dati commerciali, penso che la risposta sia chiaramente SVG. Se stai parlando dei dati storici di Walmart dal primo giorno di trading o delle informazioni di trading complete al minuto, dovrai davvero osservare attentamente SVG. Probabilmente dovremo impiegare la gestione della memoria di fantasia e un approccio di tipo fetch-on-demand in quanto SVG andrà a pezzi, in particolare se si passa da un campione a un nodo SVG.

Se interattività è un requisito, SVG ha facilmente bordo, data:

  • È un'API modalità trattenuta
  • È possibile utilizzare i gestori tipici eventi
  • È possibile aggiungere/rimuovere i nodi facilmente, ecc

Naturalmente, si vede che se hai bisogno di pieno interattività, si mA Vado contro i meccanismi che consentono all'SVG di ridimensionare, come il collasso dei percorsi, quindi qui c'è una tensione intrinseca.

Ci sarà un trade-off in extremes. Se la dimensione è piccola, la risposta è SVG a mano libera. Se la dimensione è grande e l'interattività non è presente, la risposta è SVG con il solo disegno del percorso o l'uso di Canvas. Se la dimensione è grande e l'interattività è necessaria, devi andare su tela o SVG ingannevole, che in entrambi i casi è complesso.

Alcune librerie offrono sia canvas che rendering SVG, come ad esempio ZingChart e Dojo. Altri tendono ad attenersi solo a una delle due opzioni.