рисовать граф состояний в режиме реального времени в HTML5/JavaScript

Question

фон:

У меня есть набор зависимостей, которые формируют «технологический процесс». Каждая зависимость - это узел, который имеет определенное состояние (например, незанятый, ожидающий, загрузка, полный, ...)

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

У меня уже есть способ вывести обновления состояния с моего сервера рабочих процессов на мой сайт.

Вопрос:

Есть ли что-либо встроенный, что HTML5 позволит сделать выше (построить график и его изменения состояния)? Есть ли внешняя библиотека, которую я должен использовать?

должны работать в Chrome (не заботятся о других браузерах)

Было бы неплохо, чтобы он автоматически изложил тоже так читаем ...

Answer 1

мая JointJS решить вашу проблему.

http://www.jointjs.com/

JointJS современный HTML 5 JavaScript библиотека для визуализации и взаимодействия с диаграммами и графиками. Его можно использовать для создания либо статических диаграмм, либо, что более важно, полностью интерактивных инструментов диаграмм и разработчиков приложений. JointJS упрощает создание визуальных инструментов различного вида.

Есть несколько хороших примеров здесь http://jointjs.com/demos/fsa

Answer 2

Вы также можете проверить D3.js

Это обеспечивает JavaScript API для взаимодействия с SVG элементов для рисования все, что вы хотите, но особенно выделяется на связывая данные с различными свойствами рисованных элементов.

Плюс, документация отличная, и есть тонны и тонны примеров.