Как я могу использовать JavaScript для рисования диаграмм?

Question

Я новичок в мире JavaScript, и я не нашел хорошей основы для рисования диаграмм в JavaScript.Это для школьного проекта, так что у меня мало времени на развитие, но я хочу многому научиться, хе-хе.По сути, я хочу сделать простой веб-редактор рабочего процесса;(вы можете увидеть мой макет ниже), и я хочу сделать что-то вроде этого http://www.diagram.ly/,, очевидно, не так сложно.

Я использую основные лица для общего интерфейса, но я понятия не имею, какрисовать вещи на холсте, я думал, что JQuery подойдет, даже Mootools, но я просто не уверен, знаете ли вы какие-нибудь хорошие JavaScript-фреймворки для рисования диаграмм (подойдут базовые фигуры и коннекторы)?

У меня естьпровел небольшое исследование и нашел это: ui.ajax.org/#demos/elements.flowchart, как вы думаете, я могу заставить его работать с JSF?

Answer 1

Я бы рекомендовал взглянуть на Рафаэль

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

Answer 2

Библиотека Flowchart.js может помочь в создании некоторых базовых диаграмм.

Этот первый фрагмент определит шесть элементов в блок-схеме, включая начальный и конечный круги.

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

Этот второй фрагмент определяет связи между элементами.

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

Answer 3

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

Answer 4

используйте graphiti , что обеспечивает именно то, что вы хотите

Answer 5

Возможно, вы захотите посмотреть на processing.js: http://processingjs.org/