Pie, barra, línea: SVG/VML mejor que Canvas

Question

Necesito elegir una biblioteca para gráficos "estándar": pies, líneas y barras.

Por lo que he leído, me parece que el mejor formato es SVG/VML, como Highcharts, por ejemplo. SVG se está convirtiendo en estándar en todos los principales navegadores, ahora que IE 9 lo acepta. Parece más fácil reescalar y exportar que Canvas.

Aún así, veo que varias bibliotecas de gráficos dependen de Canvas. ¿Me estoy perdiendo de algo? ¿Hay alguna razón para considerar Canvas sobre SVG para tales aplicaciones?

Answer 1

En general, puede obtener los mismos resultados con cualquiera. Ambos terminan dibujando píxeles en la pantalla para el usuario. Los principales diferenciadores son que HTML5 Canvas le brinda control a nivel de píxeles sobre los resultados (tanto de lectura como de escritura), mientras que SVG es API de gráficos de modo retenido que hace que sea muy fácil manejar eventos o manipular la obra de arte con JavaScript o SMIL Animación y ten cuidado de redibujar todo para ti.

En general, me gustaría sugerir el uso de Canvas de HTML5 si:

• necesidad de control a nivel de píxeles sobre los efectos (por ejemplo, visión borrosa o blending)
• tienen un gran número de puntos de datos que serán presentado una vez (y tal vez criticada), pero son de otra manera estática

uso SVG si:

• desea que los objetos complejos dibujados en la pantalla se asocien con eventos (p. mover más de un punto de datos para ver notas)
• desea que el resultado se imprime bien en alta resolución
• necesidad de animar las formas de varias partes del gráfico de forma independiente
• habrá incluido el texto de su salida que usted quiere estar indexados por los motores de búsqueda
• desea utilizar XML y/o XSLT para producir la salida

Answer 2

El lienzo no es necesario a menos que desee mucha manipulación/animación o vaya a tener más de 10.000 cuadros. Más información sobre el análisis de rendimiento here.

También es importante hacer la distinción: la creación de gráficos y la diagramación son dos cosas diferentes. Mostrar algunos gráficos de barras es muy diferente de (por ejemplo) hacer diagramas de flujo de diagramas con más de 10,000 objetos movibles, vinculables y potencialmente animados.

Cada elemento SVG es un elemento DOM, y agregar 10,000 o 100,000 nodos al DOM causa una desaceleración increíble. Pero agregar muchos elementos a Canvas es completamente factible y puede ser bastante rápido.

En caso de que te haya confundido: RaphaelJS (en mi opinión, la mejor biblioteca de gráficos SVG) utiliza la palabra canvas, pero eso no está relacionado con el elemento HTML <canvas>.

Answer 3

En los últimos dos años, mi preferencia ha sido utilizar SVG, ya que se ocupan principalmente de relativamente pequeños conjuntos de datos para construir las empanadas , gráficos de columnas o mapas.

Sin embargo, una ventaja que he encontrado en el lienzo es la capacidad de guardar el gráfico como una imagen gracias al método toDataURL. No he encontrado un equivalente para svg, y parece que la mejor manera de guardar un lado del cliente svg chart es convertirlo primero en canvas (usando por ejemplo canvg).