Готов ли JavaScript для визуализации больших наборов данных?

Question

У нас есть некоторые данные (10-50 столбцов, сотни тысяч строк), которые мы обычно визуализируем в Excel в виде линейного графика или гистограммы с накоплением.
Пользователи хотят иметь возможность увеличивать и уменьшать масштаб графика, чтобы перейти к отдельным образцам, но такие операции действительно ставят Excel на колени.

Я думаю о встраивании данных в HTML-страницу со встроенным JavaScript для обработки визуализации в браузере. Нечто подобное lib JS для создания диаграмм flotr будет использоваться для диаграмм.

1. Это глупая идея?
2. Готов ли браузер к такой загрузке?
3. Это решенная проблема, которую я просто должен был погуглить более тщательно, прежде чем спрашивать?

Answer 1

Javascript, вероятно, готов к этому, так как сам Javascript стал довольно быстрым. По моему опыту, браузеры, как правило, не готовы работать с очень большими структурами DOM. По крайней мере, вы можете ожидать, что проведете много времени, пытаясь выяснить, почему дела идут медленно. Вы также обнаружите, что многие «стандартные» библиотеки javascript (на ум приходят prototype / jquery) не подходят для работы с «чрезмерно» большими структурами DOM.

Будьте готовы выяснить, что данная операция медленна на всех браузерах, но в конечном итоге она оказывается по 3-4 различным причинам в разных браузерах. Это основано на опыте работы с DOMs среднего размера. Хотя это, конечно, возможно, для достижения достойного результата потребуется немало усилий.

Answer 2

Я настоятельно рекомендую Адаму выполнить некоторые тесты и оптимизацию. Недавно я проделал некоторую работу по построению больших наборов данных с помощью Flot и испытал менее чем приемлемую производительность с Internet Explorer (например, весь браузер зависал на ~ 20 с на моем блоке разработчика во время построения графиков).

Flot использует элемент canvas для построения диаграмм, который поддерживается только в Internet Explorer 9+. Flot обеспечивает поддержку более старых версий Internet Explorer, используя библиотеку ExplorerCanvas . Эта библиотека использует VML , рисуя графику, манипулируя элементами VML через DOM.

Использование профилировщика сценариев Internet Explorer 8 Я обнаружил, что большую часть времени при рендеринге графика уходит на вызов собственного insertAdjacentHTML метода для создания элементов VML. Поскольку ничего не могло быть сделано для повышения производительности вызовов собственных методов, я вместо этого работал над уменьшением количества отображаемых точек данных (в свою очередь, уменьшением элементов VML, созданных в DOM) для получения приемлемой производительности.

Если вы не нуждаетесь или не заботитесь о поддержке более старых версий Internet Explorer, вы должны обнаружить, что Flot / Flotr вполне способен обрабатывать большие наборы данных. Но если вам нужно поддерживать эти версии, будьте готовы столкнуться с проблемами производительности при составлении диаграмм больших наборов данных.

Answer 3

Готов ли Javascript для визуализации больших наборов данных?

Да - язык находится в такой точке, где он без особых усилий, в правильной среде, обрабатывает значительные наборы записей и манипулирует ими, визуализирует их и т. Д. Сам язык в порядке.

Это глупая идея?

Нет, на самом деле вы можете рассчитывать практически на каждый компьютер, чтобы иметь возможность использовать этот способный кроссплатформенный язык.

Готов ли браузер к такой загрузке?

Некоторые из них могут быть - зависит от того, какую обработку и действия вы действительно предпринимаете. С Chrome, использующим быстрый движок javascript, и все больше и больше людей, полагающихся на него, война за скорость javascript зажигается. Я думаю, что это совершенно правильный сценарий использования.

Вам нужно быть готовым к бенчмаркингу и оптимизации, что означает копаться в кишках javascript. Пожалуйста, опубликуйте ваши результаты, чтобы можно было исправить недостатки.

-Adam