web-dev-qa-db-fra.com

Graphiques SVG vs HTML5 Canvas

Je dois dessiner des graphiques sur le navigateur en utilisant un backend python (qui peut ne pas avoir d'importance ici). Il existe de nombreuses bibliothèques comme JQPlot, D3, Google Charts pour y parvenir.

Mais si vous les classifiez, ils sont basés sur HTML5 Canvas ou sur SVG. Les deux sont des technologies importantes dans leur propre espace. Mais

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.

Je n'ai aucune expérience préalable avec la cartographie et je ne veux pas frapper le mur après avoir commencé le projet.

svgchartshtml5-canvasgoogle-visualizationjqplot
34
Vivek Jha

Les projets avec une grande quantité de données peuvent favoriser le canevas. Les approches SVG créent généralement un nœud DOM par point (sauf si vous créez des chemins), ce qui peut conduire à:

  1. Une explosion de la taille de votre arborescence DOM

  2. Problèmes de performances

En utilisant un chemin, vous pouvez contourner ce problème, mais vous perdez ensuite l'interactivité.

Supposons que vous créez un graphique boursier. Si vous parlez d'un graphique avec, disons ... 5 ans maximum et des échantillons de données de fin de transaction uniquement, je pense que la réponse est clairement SVG. Si vous parlez de regarder les données historiques de Walmart depuis le premier jour de négociation ou de faire des informations commerciales complètes par minute, vous devrez vraiment examiner attentivement SVG. Il faudra probablement utiliser une gestion de mémoire sophistiquée et une approche de récupération à la demande car SVG s'effondrera, en particulier si vous passez un échantillon à un nœud SVG.

Si l'interactivité est une exigence, SVG a facilement l'Edge, étant donné:

  • Il s'agit d'une API en mode conservé
  • Vous pouvez utiliser des gestionnaires d'événements typiques
  • Vous pouvez facilement ajouter/supprimer des nœuds, etc.

Bien sûr, vous voyez que si vous avez besoin de l'interactivité complet, cela peut aller à l'encontre des mécanismes qui permettent à SVG de se mettre à l'échelle, comme l'effondrement du chemin, il y a donc une tension inhérente ici.

Il va y avoir un compromis dans les extrêmes. Si la taille est petite, la réponse est SVG haut la main. Si la taille est grande et sans interactivité, la réponse est SVG avec un dessin de chemin uniquement ou en utilisant Canvas. Si la taille est grande et que l'interactivité est requise, vous devez utiliser le canevas ou le SVG délicat, ce qui est complexe dans les deux cas.

Certaines bibliothèques proposent des rendus de toile et SVG, tels que ZingChart et Dojo . D'autres ont tendance à s'en tenir à une seule des deux options.

66
RockinSocks