true - Listas SVG vs HTML5 basadas en lienzo

which is best suited for applications with large rendering areas e.g.: google maps?

Question

Tengo que dibujar gráficos en el navegador usando un backend de python (lo cual puede no importar aquí). Existen numerosas bibliotecas como JQPlot, D3, Google Charts para lograr esto.

Pero si los clasifica, están basados ​​en HTML5 Canvas o SVG. Ambas son tecnologías importantes en su propio espacio. Pero

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.

No tengo experiencia previa con los gráficos y no quiero golpear la pared después de comenzar el proyecto.

Answer 1

Los proyectos con una gran cantidad de datos pueden favorecer el lienzo. Los enfoques SVG normalmente crean un nodo DOM por punto (a menos que haga rutas), lo que puede llevar a:

1. Una explosión en el tamaño de tu árbol DOM

2. Problemas de rendimiento

Usando una ruta, puede solucionar este problema, pero luego pierde la interactividad.

Digamos que estás construyendo un gráfico de cotizaciones. Si está hablando de una tabla con, digamos ... solo 5 años y muestras de datos de fin de comercio solamente, creo que la respuesta es claramente SVG. Si está hablando de mirar los datos históricos de Walmart desde el primer día de operaciones o hacer información completa sobre el comercio por minuto, tendrá que mirar cuidadosamente a SVG. Probablemente tendrá que emplear una gestión de memoria sofisticada y un enfoque de búsqueda bajo demanda, ya que SVG se desmoronará, especialmente si va de una muestra a un nodo SVG.

Si la interactividad es un requisito, SVG tiene la ventaja fácilmente, dado:

• Es una API de modo retenido
• Puedes utilizar los manejadores de eventos típicos.
• Puedes agregar / eliminar nodos fácilmente, etc.

Por supuesto, verá que si necesita interactividad total , puede ir en contra de los mecanismos que permiten escalar el SVG, como colapsar la trayectoria, por lo que aquí hay una tensión inherente.

Va a haber una compensación en los extremos. Si el tamaño es pequeño, la respuesta es SVG sin mancha. Si el tamaño es grande y no hay interactividad, la respuesta es SVG con solo trazado de ruta o usando Canvas. Si el tamaño es grande y se requiere interactividad, debe ir al lienzo o al SVG complicado, que es complejo en ambos casos.

Algunas bibliotecas ofrecen lienzos y representaciones SVG, como ZingChart y Dojo . Otros tienden a seguir con una de las dos opciones.