Производительность линейных графиков

Я пытаюсь добиться максимальной производительности своих линейных диаграмм с помощью LightningChart JS. Из примера производительности я узнал максимальное количество баллов, которое я могу запустить с помощью тестера производительности составляет 10 серий x 1 миллион точек каждая. Я настраиваю его так:  Настройка диаграммы JavaScript для 10 x 1 миллион точек .

Я могу запустить его со скоростью 30-40 обновлений в секунду. Выполняется тест мониторинга прокрутки 10 x 1 M точек данных Два вопроса:

  1. Есть ли простой способ проверить это с большим количеством баллов? Есть онлайн-демонстрация / тестер для этого?
  2. Есть ли общие рекомендации по оптимизации настроек производительности с помощью этой диаграммы молнии JavaScript?

person Keira    schedule 16.01.2020    source источник


Ответы (1)


Тест с большим количеством очков

В настоящее время нет ни одного онлайн-тестера, который набирает больше баллов, чем это. Но исходный код для тестера, который вы использовали, доступен на GitHub: https://github.com/Arction/lcjs-performance-tester В репозитории есть хорошие инструкции, как запустить его локально.

Чтобы добавить тест с большим количеством баллов, вы можете отредактировать файл content/src/tests/default.js и добавить новый тест с количеством баллов, с которым вы хотели бы тестировать. Допустим, вы хотите иметь 10 серий по 2 миллиона очков в каждой. Вы могли бы добавить

{
    key: '2M',
    label: '2 M points',
    code: (thickness) => ScrollingProgressiveLine(2 * 1000 * 1000, seriesCount, thickness.thickness, `${seriesCount} Scrolling Line Series 2 000 000 points each ${thickness.label}`),
    defaultSelected: false
},

после строки 718, между тестами 1M и 10M. Последний тест в этом списке исключается из фактического выполнимого теста.

Существует также демонстрационный пример, который можно использовать, чтобы увидеть, сколько точек может отображать диаграмма при сохранении 60 кадров в секунду. https://arction.github.io/lcjs-showcase-streamingData/

Оптимизация производительности

  1. Set DataPattern based on the data you are using when creating a new series.
    • For line series it's set with dataPattern property in line series options. chart.addLineSeries({dataPattern: DataPatterns.horizontalProgressive})
  2. Disable animations.
  3. Disable mouse interactions.
  4. Disable Auto Cursor.
person Snekw    schedule 16.01.2020
comment
Большое спасибо. Может быть, у вас может быть инициализатор / конструктор, чтобы этот режим OptimalPerformance уже был установлен, без необходимости явно устанавливать их? Просто мысль. - person Keira; 17.01.2020