Графическое отображение данных в реальном времени на линейной диаграмме с html5

Ответ 1

Существует несколько графических библиотек: gRaphael, Highcharts и тот, который упоминается другими. Эти библиотеки довольно просты в использовании и хорошо документированы (скажем, 1 на шкале сложности).

AFAIK, эти библиотеки не являются "реальными", потому что они не дают возможности добавлять новые точки "на лету". Чтобы добавить новую точку, вам нужно перерисовать полный график. Но я думаю, что это не проблема, потому что перерисовка графика выполняется быстро. Я сделал некоторые попытки с gRaphael, и я не заметил никаких проблем с этим подходом. Если вы обновляете скорость 10 с, которая должна работать нормально (но это может зависеть от сложности ваших диаграмм).

Если перерисовать полный график является проблемой, вам, возможно, придется разработать диаграмму самостоятельно с векторной графикой lib, например Raphael или paper.js. Это будет немного сложнее, чем использование графической библиотеки, но должно быть осуществимо. (Скажем 5 по шкале сложности).

Когда вы получаете данные по фиксированному интервалу, вы можете использовать обычную ajax lib. jQuery в порядке для меня, но есть и другие варианты. Это может быть не лучший выбор для нефиксированного интервала, и в этом случае вам, возможно, придется посмотреть на что-то вроде socket.io, но это имеют последствия и на стороне сервера.

Примечание1: Raphael, gRaphael и Highcharts - это не просто HTML5, а SVG/VML, но я думаю, что это тоже приемлемый выбор.

Примечание2: кажется, что Highchart не требует перерисовки диаграммы при вставке новых точек. См. http://www.highcharts.com/documentation/how-to-use#live-charts

Ответ 2

Я предлагаю Smoothie Charts.

Он очень прост в использовании, легко и широко настраивается и отлично справляется с потоковой передачей данных в реальном времени.

Здесь есть конструктор, который позволяет вам исследовать параметры и генерировать код.

Отказ от ответственности: я являюсь автором библиотеки.

Ответ 3

Несколько вещей, которые могут вам помочь:

Canvas Express - мощная графическая библиотека: http://canvasxpress.org/

Здесь вы можете найти учебное пособие по переводу собственных графов на основе уравнений: http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/

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

Если вы будете knouo свой путь aroudn javascript и ajax, тогда это будет средней сложностью. Если вы этого не сделаете, вам, вероятно, придется опубликовать еще несколько вопросов о Stack Ovreflow, чтобы помочь вам с частями, за которыми вы застряли.

Ответ 4

Я считаю, что это именно то, что вы ищете:

http://www.highcharts.com/demo/dynamic-update

Открытый исходный код (хотя лицензия требуется для коммерческих сайтов), перекрестное устройство/браузер, быстро.

Ответ 5

Flotr2 и Envision - это параметры, Flotr2 имеет пример в реальном времени на странице doco, с которой я связан. Envision немного сложнее начать, поэтому попробуйте Flotr2.

Ответ 6

Чтобы завершить эту тему, я бы предложил вам изучить:

d3.js

Это библиотека, которая помогает с тоннами визуализации javascript. Однако кривая обучения довольно крутая.

nvd3.js

Библиотека, которая упрощает создание некоторых визуализаций d3.js(с ограничениями, конечно).

Ответ 7

Вы также можете посмотреть CanvasJS Chart, который построен поверх HTMLvas Canvas Element. Он работает очень быстро и может обновляться каждые 50-100 миллисекунд без проблем с памятью.

[Полное раскрытие: я являюсь частью команды]

Ответ 8

Самый простой способ - использовать plotti.co - микросервис, который я создал именно для этого. Это зависит от того, как вы получаете данные, но общий шаблон использования включает изображение SVG в ваш html, например

<object data="http://plotti.co/FSktKOvATQ8H/plot.svg" type="image/svg+xml"/>

и подавая ваши данные в GET-запрос на ваш хэш (или используя метод JavaScript (new Image(1,1)).src=... с той же или любой другой страницы), как это:

http://plotti.co/FSktKOvATQ8H?d=1,2,3

настройка локально также проста:

Ответ 9

Вот суть, которую я обнаружил для диаграмм реального времени в ChartJS:
https://gist.github.com/arisetyo/5985848

ChartJS выглядит простым и удобным.

Также есть FusionCharts, более сложная библиотека для корпоративного использования, с демонстрацией реального времени здесь:
http://www.fusioncharts.com/explore/real-time-charts

ИЗМЕНИТЬ Я также начал использовать Rickshaw для графиков реального времени, и он прост в использовании и довольно настраиваемым: http://code.shutterstock.com/rickshaw/

Ответ 10

Этот поток, возможно, очень старый. Но хочу поделиться этими результатами для тех, кто видит эту тему. Ран сравнение. Flotr2, ChartJS, асинхронно. Flotr2 кажется самым быстрым. Протестировано это путем передачи новой точки данных каждые 50 мс до 1000 точек данных. Flotr2 был самым быстрым для меня, хотя он, по-видимому, регулярно перерисовывает диаграммы.

http://jsperf.com/async-charts-test/2

Ответ 11

Вы получаете данные с сервера, обновляете свой ранее доступный набор данных, а затем, возможно, используете одну из свободно доступных библиотек для рисования графика [например: http://www.rgraph.net/]

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

Ответ 12

http://www.rgraph.net/ отлично подходит для графика и диаграмм.

Ответ 13

Вы также можете дать Meteor Charts попробовать, он очень быстрый (html5 холст), имеет множество учебников, а также хорошо документирован. Живые обновления работают очень хорошо. Вы просто обновляете модель и запускаете chart.draw() для повторного отображения графа сцены. Вот демо:

http://meteorcharts.com/demo

Ответ 14

Дополнение от 2015 года Насколько я знаю, до сих пор нет ориентированной на время строки линейной диаграммы lib. Я имею в виду график, в котором поведение "запрашивает новые точки за каждый N секунд", "очищает старые данные", вы можете настроить "декларативный" способ.

Вместо этого есть графит api http://graphite-api.readthedocs.org/en/latest/ для серверной части и количество подключаемых к нему клиентских плагинов. Но на самом деле они довольно ограничены, отсутствуют расширенные функции, которые нам нравятся: скроллер данных, диаграммы дальности, сегментация axeX на фазах и т.д.

Кажется, существует фундаментальная разница между задачами "показать мне диаграмму достижения" и иметь "график реального времени".