Подтвердить что ты не робот

Поиск библиотеки javascript-диаграмм, которая может нарисовать ~ 200 000 точек на участке рассеяния

Я создаю веб-приложение, интерфейс которого включает в себя большой график рассеяния, чтобы дать пользователю обзор его данных. График рассеяния имеет около 200 000 точек. В настоящее время я использую серверную часть библиотеки Java JFreeChart, которая отлично справляется с графикой сюжета - для ее рендеринга требуется всего лишь секунда.

Чтобы сделать мое приложение более интерактивным, я хотел бы перейти на использование Javascript для рисования клиентской части диаграммы. Это позволило бы включить интерактивную фильтрацию точек, всплывающих подсказок, точек с кликом и т.д. Я экспериментировал с графическими картами Google, но для этого требуется возраст для рендеринга и остановки браузера.

Кто-нибудь знает о библиотеке графиков Javascript, которая может справиться с таким большим набором данных? Или я должен отказаться от идеи и придерживаться JFreeChart? Я не против, если сама страница займет какое-то время (это неизбежно, учитывая большой объем данных, которые нужно передать), но мне нужно, чтобы график обновлялся в разумные сроки в ответ на ввод пользователя.

4b9b3361

ОТВЕТЫ

Ответ 1

Мое предложение поступило бы на Highcharts и Highcharts Stocks (http://www.highcharts.com).

Вы можете найти демо-версию с 5200 точками данных, с масштабированием, всплывающими подсказками и взаимодействием: http://www.highcharts.com/stock/demo/data-grouping, а диаграмма занимает около 90 мс до опираясь на мою (довольно быструю) машину.

Однако очень большие наборы данных, скорее всего, будут вызывать большие проблемы с производительностью, будь то при передаче по сети, потреблении памяти, времени отображения и т.д. Кроме того, 200 тыс. точек данных составляют около 1 точки данных/пикселя на 600 * 400 графических или 400 точек данных на столбе, это просто не имеет смысла. Может быть, некоторые группировки и/или фильтрации будут полезны.

Ответ 2

Для тех из вас, кто сегодня смотрит на этот вопрос, DC.js - это мощная библиотека для составления диаграмм больших наборов данных, которая построена на D3.js. Он имеет несколько типов диаграмм, включая диаграммы рассеяния, бар и линейные графики. Они запускают библиотеку Square crossfilter для сопоставления данных перед печатью.

Ответ 3

В качестве промежуточного или альтернативного решения рассмотрите возможность развертывания JFreeChart через Java-Web-Start. Этот пример предлагает способы интерактивного обновления отображения диаграммы.

Ответ 4

Если у вас есть роскошь не для IE7 или IE8, то для большого количества точек данных вы можете попытаться использовать вашу графическую карту через webgl. Я еще не пробовал, но three.js выглядит интересным.

Ответ 5

Как указывали другие,

Создание такого интерактивного сюжета с высоким node в ограниченном пространстве практически бесполезно - точки будут неприметными и сюжет будет, по меньшей мере, перенаселенным.

Вы можете использовать текущее окно просмотра и текущий уровень масштабирования, чтобы ограничить то, что вам нужно показать

Группирование и разбиение уровня масштабирования

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

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

Текущее окно просмотра/вывод только данных, которые находятся в окне просмотра

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

Не ограничивайте себя построением библиотек

График рассеяния довольно прост для реализации в любой библиотеке Canvas/SVG, которая позволяет выполнять основные операции рисования фигур/точек. Поскольку это довольно продвинутый прецедент, я бы отказался от идеи ограничить себя библиотеками, которые позволяют построив и посмотрим вокруг общих библиотек, которые разрешают чертежи SVG/Canvas.

Сумасшедшая идея, но я бы попробовал:

Существует библиотека, которая использует WebGL для 2D-чертежей на холсте HTML5 (она использует графическую карту, а также процессор для рисования графика), называемый Pixi.js.

Он ориентировался на разработку игры в основном, но это было бы шлепанцем, чтобы рисовать с ним разброс, масштабировать и разрешать события щелчка на ваших точках.

Ответ 6

Возможно, вам захочется поэкспериментировать с библиотеками диаграмм, построенными на raphael.js. Не уверены в их производительности рендеринга, но они отличные библиотеки html5. Стоит попробовать.

http://g.raphaeljs.com/