Какую библиотеку элементов управления на основе холста HTML5 я должен использовать прямо сейчас?

Ответ 1

Прежде всего, я не думаю, что вы найдете решения от крупных компаний для библиотек Javascript. Люди, использующие Javascript, не привыкли платить большие суммы за готовые js-библиотеки для предприятий;).

Я расскажу вам о возможностях:

• Highcharts - отличное решение, которое может быть после. Я использовал его с большим успехом в одном проекте. Он имеет документацию и активно разрабатывается на GitHub. Он прост в использовании, довольно хорошо смотреть (не стоит недооценивать внешний вид "функция" ) и является интерактивным: вы можете связывать/присоединяться к событиям, которые срабатывают по таким элементам, как "наведите указатель мыши на панель" или "щелкните по точке", Он стоит 80 долларов за один сайт для коммерческого использования (некоммерческое использование бесплатное).
• Ext JS 4. Еще одно из готовых решений - недавно выпущенная в апреле 2011 года 4-я версия популярной библиотеки Javascript Ext JS. Эта четвертая версия теперь поддерживает плагиновую диаграмму (т.е. Не Flash, а только собственные технологии, такие как SVG и VML, поэтому она работает кросс-браузер. Если вы привыкли к настольным или корпоративным функциям, которые вы обычно не находите в библиотеке Javascript такие как окна, менеджеры макетов, MVC, перетаскивание, панели инструментов, меню, формы и т.д., это определенно для вас. Ознакомьтесь с примерами здесь.
• gRaphaël - еще одна отличная библиотека и находится под лицензией MIT (бесплатно для коммерческого использования!). Он выглядит немного более "Flash-y" и более дружелюбен к разработчикам/интенсивным. Таким образом, вам придется самому написать много кода (это не полномасштабное решение, например Highcharts), но если вы свободно владеете jQuery, вы будете чувствовать себя как дома:). Сила - это способность кодировать все, что угодно, и вы можете делать с ней много анимаций, например, в jQuery. Все элементы на графике являются узлами SVG, поэтому вы можете присоединять события к каждому из них и делать некоторые мощные вещи. Демонстрации стоит проверить.
• Flot. Как сказал alexn, вы можете использовать флот, но я использовал его один раз и не очень любил его. Я не знаю, что именно не было для меня, это субъективная вещь. Я не очень люблю это, но это только я. Посмотрите сами.
• Другие библиотеки, такие как RGraph или Zingchart. Я не использовал ни одного из них, так что это чисто из того, что я вижу: они выглядят так, как будто они находятся в зачаточном состоянии/не отполированы. Я надеюсь, что они улучшатся, но посмотрите на них в любом случае и выберите своего победителя.

Но вы сказали, что хотите использовать элементы управления на основе холста. Почему это? Это потому, что холст продается по HTML5. См., Highcharts и gRaphaël не основаны на холсте, но я думал, что это то, что вы хотели, поэтому я их поместил. Способ работы gRaphaël - это (Highcharts работают одинаково под капотом, но скрыты разработчиком): gRaphaël дает вам API (например, piechart()), который затем создает множество элементов SVG (думайте о них как <div> , но с более сложными формами и графическими фильтрами), которые затем нарисованы. Вы также можете установить обработчики событий для этих элементов. Но поскольку IE не поддерживает SVG (это шокер), библиотека переводит эти вызовы API для создания VML для IE.

Но холст отличается. "Элементов" нет, вы просто рисуете линии и фигуры, но вы не можете просто привязываться к своим событиям с обработчиками событий. Так что для меня SVG лучше (вы должны увидеть некоторые графические фильтры, которые SVG способен, например, размытие), и я думаю, что библиотеки более зрелые.

Но не верьте мне на слово;). Проверьте их и скажите мне, что вы думаете.

Ответ 2

Flot

alt text http://people.iola.dk/olau/flot/flot-screenshot.png

Это хороший контроль диаграммы. Flot фактически используется для отображения вашей репутации здесь, в Stack Overflow.

Ответ 3

как насчет диаграммы google        http://code.google.com/apis/chart/ "Инструменты диаграммы Google являются мощными, простыми в использовании и бесплатными. Попробуйте нашу богатую галерею интерактивных графиков и инструментов данных. Начать Круговая диаграмма - просмотр источника "

Ответ 4

Я нахожусь в команде ZingChart. Мы визуализируем графики в HTML5 Canvas, SVG и Flash (и VML для старого IE-резервного).

Если у вас есть вопросы, вы можете связаться с нашей командой при поддержке zingchart.com с любыми вопросами или http://twitter.com/zingchart.

-Эндрю