Каков наилучший подход к созданию графических диаграмм в браузере?

Question

Я начал новый проект с открытым исходным кодом, направленный на обеспечение качественного опыта управления проектами. Для этого мне нужен доступ к набору инструментов для работы с диаграммами (Flash не на столе) и, в частности, к диаграмме Ганта. Я сделал свою домашнюю работу и ходил по магазинам по сети, и я более или менее пришел к выводу, что то, что я хочу, не существует, по крайней мере, не бесплатно. Так что, скорее всего, мне придется написать это с нуля.

Если бы я собирался создать диаграмму Ганта, с которой люди могли бы взаимодействовать (что, я предполагаю, означает отличную поддержку DOM), то какую технологию я бы использовал? Должен ли я пойти с SVG? Или HTML5 Canvas? Что-то другое? Ваши предложения очень ценятся.

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

Answer 1

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

JS Опция:

• http://www.jsgantt.com/
• http://code.google.com/p/flot/

Перспективные модули Perl:

• http://cpansearch.perl.org/src/DARNOLD/DBD-Chart-0.82/dbdchart.html
• http://search.cpan.org/~awestholm/Project-Gantt-1.03/Gantt.pm

---

Обновление:

За последние несколько лет были достигнуты удивительные успехи в плане интерактивных / веб-диаграмм Незадолго до того, как был задан ваш вопрос, была создана D3.js , которая стала общепринятой библиотекой, которая использует SVG для реализации визуализаций. Вот базовый пример и более продвинутая реализация с использованием D3. Заметка; Диаграмма Ганта все еще находится в зачаточном состоянии; D3, скорее всего, еще вернется к нему в будущем.

Аргумент Canvas против SVG был рассмотрен много раз. Вы должны прочитать эту статью Microsoft; Как выбрать между Canvas и SVG для вашего сайта . По сути, если у вас есть много элементов, которые вы должны отобразить, Canvas будет работать намного лучше. Если доступность является приоритетом, SVG лучше.

С точки зрения работы с Canvas и SVG, холст кажется более гибким и, безусловно, более функциональным с WebGL, но SVG более транспортабелен. У них обоих есть свои достоинства.

Answer 2

Если вы собираетесь создать свой собственный, я бы порекомендовал библиотеку SVG Raphaël , которая позволяет довольно легко рисовать вещи с использованием SVG.Также просто сделать обработчики событий мыши и другие вещи, которые вы могли бы использовать, чтобы сделать их интерактивными.

У меня не было большого опыта создания интерактивной графики с canvas, но мой инстинкт в том, что это будеттрудно обрабатывать события мыши, поскольку у вас нет «элементов» для добавления прослушивателей событий.