Canvas и SVG — два основных решения для рендеринга на основе браузера, и пользователи иногда сталкиваются с трудностями при выборе библиотеки диаграмм. Но когда вы запутались, вы действительно понимаете преимущества и недостатки этих двух вещей?
ECharts 4.0 представляет решение для рендеринга с двумя движками для Canvas и SVG. Пользователи могут использовать элемент конфигурации для переключения одним щелчком мыши, став первым известным нам инструментом визуализации, поддерживающим двойное ядро. Тот же интерфейс, те же визуальные эффекты рендеринга, разные чудеса!
Итак, для каких сценариев подходят Canvas и SVG? В этой статье подробно рассказывается о производительности рендеринга, которую мы предоставляем для тестирования нескольких платформ, нескольких объемов данных, нескольких типов диаграмм и других измерений, а также даются рекомендуемые решения для различных сценариев.
Прежде всего, опубликуйте общую картину заключения -
На рисунке зеленый цвет указывает на то, что рекомендуется использовать SVG, а красный — на то, что рекомендуется использовать Canvas. Чем больше стрелок ↑, тем сильнее рекомендация. ситуации.
Как мы должны интерпретировать картинку выше? В реальных сценариях использования выводы могут быть противоположными для нескольких измерений одной и той же диаграммы (например, SVG ↑↑↑, когда имеется много диаграмм, и Canvas ↑, когда объем данных также велик).В это время, с одной стороны, необходимо обратиться к стрелке, чтобы определить, что оказывает большее влияние.С другой стороны, если требования к производительности действительно относительно высоки, вы можете обратиться к этому выводу, чтобы сделать более подробный протестировать самостоятельно.
Поскольку свойства самой диаграммы и вариативность платформы отображения могут быть очень разнообразными, трудно делать выводы непосредственно на основе определенного измерения. Что может сделать эта статья, так это сообщить вам некоторые детерминистические выводы, насколько это возможно (например, SVG предпочтительнее для мобильных платформ), в качестве официального пункта, чтобы дать вам относительно четкое направление. В процессе фактического использования, если пользователи сталкиваются с узкими местами в производительности, они могут дополнительно тестировать и улучшать в соответствии с этим.
Кроме того, следует отметить, что все выводы этой статьи основаны на тестировании реализации версии ECharts 4.0, и методы реализации различных инструментов визуализации не обязательно могут быть полностью адаптированы. После оптимизации производительности на более позднем этапе могут быть вызваны и другие изменения.
Ниже мы проиллюстрируем некоторые важные выводы.
Предпочтительна мобильная платформа SVG
На мобильных устройствах (особенно на недорогих устройствах Android) Canvas может работать очень плохо из-за ограничений памяти и ресурсов ЦП, в то время как SVG имеет большие преимущества по сравнению с ним.
На Samsung Note 3 и Redmi 1s, которые мы тестировали, линейная диаграмма с 10 точками данных, начальная анимация FPS, визуализируемая с помощью Canvas, была 20 и 5; с рендерингом SVG можно было достичь 44 и 20. Разница хорошо ощутима.
SVG также часто превосходит Canvas на iOS, просто потому, что конфигурация iOS относительно лучше, это преимущество менее значимо. Например, на протестированном нами iPhone 7 линейная диаграмма с 10 точками данных отображала 60 кадров в секунду как в SVG, так и в Canvas. Разница проявляется только тогда, когда объем данных достигает 1000, SVG и Canvas составляют 60 и 32 кадра в секунду соответственно.
Поэтому мы настоятельно рекомендуем использовать SVG для рендеринга на мобильных платформах.
SVG предпочтительнее, когда есть много диаграмм
Когда имеется большое количество диаграмм, занятая память сильно влияет на то, застряла ли страница или нет. В этом случае SVG показывает очень явное преимущество.
«Количество диаграмм слишком много» обычно требует более десяти диаграмм по сравнению с компьютером, и однозначные числа также будут отражать разницу по сравнению с мобильным телефоном. Для крайних случаев, таких как 100 диаграмм, объем памяти Canvas может быть более чем в десять раз больше, чем у SVG.
Когда вы чувствуете, что страница прокручиваемого экрана застревает, это может быть вызвано большим использованием памяти.В это время вы можете рассмотреть возможность использования рендеринга SVG.
Используйте SVG при экспорте небольших файлов в высоком разрешении.
Файл SVG, экспортируемый с помощью рендеринга SVG, меньше, но он может сохранять вектор бесконечно четким и увеличенным. Мы получили отзывы от пользователей о том, что часто возникает необходимость вставлять диаграммы в PDF-файлы.На данный момент, если вставить SVG, это может не только сделать изображения более четкими, но и уменьшить размер PDF.
Дизайнеры также могут использовать экспортированный SVG для вторичного редактирования.
Некоторые специальные эффекты рендеринга поддерживаются только Canvas.
За исключением некоторых специальных визуализаций, которые могут зависеть от Canvas: например,эффект бликов,Тепловая карта с эффектами смешиванияИ т. д., большинство функций SVG поддерживается. Кроме того, в текущей версии SVG еще не реализованы функции форматированного текста и материала.
Эффект бликов:
Тепловая карта с эффектами смешивания:
Когда объем данных особенно велик, рекомендуется использовать Canvas для рендеринга.
Если объем данных относительно велик (> 1000) и взаимодействует с большим количеством графики с высокой частотой, рекомендуется использовать рендеринг Canvas. В сочетании с прогрессивным рендерингом, представленным в ECharts 4.0, вы можете повысить производительность.
Как указать рендеринг в Canvas или SVG
ECharts по умолчанию использует Canvas для рендеринга. Если вы хотите использовать рендеринг SVG, код ECharts должен включать модуль рендеринга SVG.
- электронные картыГотовые файлысередина,Обычное изданиеа такжеполная версияСредство визуализации SVG уже включено и может быть использовано из коробки. а такжеЛайтНе включено.
- еслиЭлектронные диаграммы пользовательской сборки в Интернете, вам нужно поставить галочку «Отображение SVG» внизу страницы.
- еслиОффлайн пользовательская сборка EChartsДолжны быть введены в модули SVG Renderer, а именно:
import 'zrender/lib/svg/svg';
Затем мы можем в коде при инициализации экземпляра диаграммыВходящие параметрыВыберите тип рендерера:
// 使用 Canvas 渲染器（默认）
var chart = echarts.init(containerDom, null, {renderer: 'canvas'});
// 等价于：
var chart = echarts.init(containerDom);
// 使用 SVG 渲染器
var chart = echarts.init(containerDom, null, {renderer: 'svg'});
Это очень просто? Спешите использовать его~\(^o^)/~