SVG и HTML5 на основе холста

Мне нужно нарисовать диаграммы в браузере, используя бэкэнд python (что может не иметь значения здесь). Для этого есть множество библиотек, таких как JQPlot, D3, Google Charts.

Но если вы их классифицируете, они либо основаны на HTMLvas, либо на основе SVG. Оба являются важными технологиями в своем собственном пространстве. Но

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.

У меня нет опыта работы с графикой и я не хочу удариться о стену после запуска проекта.

Ответы

Ответ 1

Проекты с большим количеством данных могут способствовать созданию холста. Подходы SVG обычно создают DOM node за точку (если вы не создаете пути), что может привести к:

  • Взрыв размера вашего дерева DOM

  • Проблемы с производительностью

Используя путь, вы можете обойти эту проблему, но тогда вы теряете интерактивность.

Предположим, вы строите диаграмму акций. Если вы говорите о графике с, скажем... максимум 5 лет и заканчиваете только образцы данных торговли, я думаю, что ответ явно SVG. Если вы говорите о том, чтобы смотреть на исторические данные Walmart с первого дня торгов или делать полную торговую информацию в минуту, вам действительно нужно внимательно посмотреть на SVG. Вероятно, придется использовать причудливое управление памятью и подход выборки по требованию, поскольку SVG развалится, особенно если вы отправите один образец в один SVG node.

Если требуется интерактивность, SVG легко имеет ребро, учитывая:

  • Это API с сохраненным режимом
  • Вы можете использовать типичные обработчики событий
  • Вы можете легко добавлять/удалять узлы и т.д.

Конечно, вы видите, что если вам требуется полная интерактивность, это может противоречить механизмам, которые позволяют масштабировать SVG, например, коллапсирование пути, поэтому здесь присутствует внутреннее напряжение.

В крайних случаях будет компромисс. Если размер мал, ответ будет передан SVG. Если размер большой и нет интерактивности, ответом является SVG с использованием только чертежа пути или с использованием Canvas. Если размер большой и требуется интерактивность, вы должны пойти на холст или сложный SVG, что является сложным в любом случае.

В некоторых библиотеках есть как холсты, так и SVG-рендеры, такие как ZingChart и Dojo. Другие склонны придерживаться только одного из двух вариантов.