Пирог, полоса, линия: SVG / VML лучше, чем Canvas - PullRequest
Новая
       10

Пирог, полоса, линия: SVG / VML лучше, чем Canvas

11 голосов
/ 09 мая 2011

Мне нужно выбрать библиотеку для «стандартных» графиков: пироги, линии и столбцы.

Из того, что я прочитал, мне кажется, что лучшим форматом является SVG / VML, как Highchartsпример.SVG становится стандартом во всех основных браузерах, теперь, когда IE 9 принимает его.Кажется, легче масштабировать и экспортировать, чем Canvas.

Тем не менее, я вижу, что несколько библиотек диаграмм полагаются на Canvas.Я что-то пропустил?Есть ли основания для рассмотрения Canvas поверх SVG для таких приложений?

Ответы [ 3 ]

8 голосов
/ 10 мая 2011

Как правило, вы можете достичь одинаковых результатов с любым из них.Оба заканчивают тем, что рисуют пиксели на экране для пользователя.Основные отличия заключаются в том, что HTML5 Canvas обеспечивает управление результатами на уровне пикселей (как чтение, так и запись), а SVG - это графический интерфейс с сохраняющимся режимом , который позволяет очень легко обрабатывать события или манипулировать художественными работами.с анимацией JavaScript или SMIL и все перерисовки позаботятся о вас.

В общем, я бы рекомендовал использовать HTML5 Canvas, если вам:

  • требуется контроль над эффектами на уровне пикселей(например, размытие или смешивание )
  • имеют очень большое количество точек данных, которые будут представлены один раз (и, возможно, панорамированы), но в остальном являются статическими

Используйте SVG, если вы:

  • хотите, чтобы сложные объекты, нарисованные на экране, были связаны с событиями (например, перемещайтесь по точке данных, чтобы увидеть подсказку)
  • хотите, чтобы результат печатался хорошов высоком разрешении
  • необходимо анимировать формы различных частей графика независимо
  • будет включать в ваш текст текст, который вы хотите проиндексировать с помощью Search engine
  • хочет использовать XML и / или XSLT для вывода
5 голосов
/ 09 мая 2011

Canvas не нужен, если вы не хотите тяжелой манипуляции / анимации или собираетесь иметь более 10000 диаграмм.Подробнее об анализе производительности здесь.

Важно также провести различие: построение диаграмм и построение диаграмм - это две разные вещи.Отображение нескольких гистограмм сильно отличается от (например) создания диаграмм потоковых диаграмм с 10 000+ подвижными, связанными, потенциально анимированными объектами.

Каждый элемент SVG является элементом DOM и добавляет 10 000 или 100 000 узловк DOM вызывает невероятное замедление.Но добавление такого количества элементов в Canvas вполне выполнимо и может быть довольно быстрым.

На случай, если вас это смутило: RaphaelJS (на мой взгляд, лучшая библиотека SVG для построения графиков) использует слово canvas, ноэто никак не связано с элементом HTML <canvas>.

0 голосов
/ 28 сентября 2013

В последние два года я предпочитал использовать svg, так как я в основном имею дело с относительно небольшими наборами данных для построения круговых диаграмм, столбчатых диаграмм или карт.

Однако одно преимущество, которое я нашел с canvas,возможность сохранять диаграмму как изображение благодаря методу toDataURL .Я не нашел эквивалента для svg, и кажется, что лучший способ сохранить клиентскую часть диаграммы svg - сначала преобразовать его в canvas (например, используя canvg ).

...