Лучшие веб-технологии для построения динамических диаграмм

Question

Мне нужно построить специально разработанную гистограмму, которая отображает некоторые простые данные. Ниже приведены мои требования. Может ли кто-нибудь предложить лучшие веб-технологии для моих требований.

• высокая совместимость с браузером
• умение рисовать фигуры
• способность заполнять фигуры градиентами
• возможность иметь события onclick и onmouseover для различных фигур (столбцы на графике).

Спасибо, ребята. Я думал об использовании SVG, но искал предложения.

Answer 1

Как насчет Рафаэль - это SVG / VML . Там написано:

Совместимость браузера:

Raphaël в настоящее время поддерживает Firefox 3.0+, Safari 3.0+, Opera 9.5+ и Internet Explorer 6.0+.

Возможность рисовать фигуры

круг, прямоугольник, эллипс, изображение, текст, путь

Возможность заливки фигур градиентами

да

Возможность проводить события onclick и onmouseover

да

... каждый графический объект, который вы create также является объектом DOM, поэтому вы можно прикрепить обработчики событий JavaScript или измените их позже.

Все в справочнике

Кроме того, есть плагин gRaphael , который облегчает создание диаграмм.

Answer 2

Простые данные - Google Charts API или Google Visualization API может подойти вам.

Подробную информацию обо всех функциях диаграмм с изображениями можно найти в списке функций диаграммы

Вы также можете взглянуть на сравнение API диаграмм и API визуализации.

Answer 3

Я хотел бы поделиться jquery.jqplot.js. Он имеет множество опций jQuery, но зависит от других плагинов, таких как syntaxhighliter и т. Д.

Answer 4

Привет, надеюсь, эта ссылка поможет вам. Я нашел ее, когда искал решение, похожее на то, что вы ищете:

http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart

Я пытаюсь gRaphael, но у меня трудности с поиском документации. Вы должны прочитать код и использовать взорванный вместо min.js

Answer 5

Я рекомендую использовать Adobe Flex. Ниже приведен пример того, насколько простым может быть создание круговой диаграммы во Flex:

   <mx:Panel title="Pie Chart">
 <mx:PieChart id="myChart" 
    dataProvider="{expenses}" 
    showDataTips="true"
 >
    <mx:series>
       <mx:PieSeries 
            field="Amount" 
            nameField="Expense" 
            labelPosition="callout"
       />
    </mx:series>
 </mx:PieChart>
 <mx:Legend dataProvider="{myChart}"/>

По вашим критериям:

• высокая совместимость с браузерами: Flex используется более чем в 95% всех браузеров и ведет себя одинаково во всех браузерах. Больше не нужно проверять, работает ли ваше веб-приложение, например, Firefox, Chrome и т. Д., Потому что любой браузер с флеш-плеером совместим.
• способность рисовать фигуры: величайшая сила Flash - способность рисовать. Графики полностью настраиваемые и скины, чтобы получить нужный вам вид.
• Возможность заполнять фигуры градиентами - это легко сделать, установив атрибуты стиля или пользовательский скин.
• возможность иметь события onclick и onmouseover для различных фигур - см. эту ссылку , чтобы узнать о некоторых простых способах взаимодействия пользователей с диаграммами.

Answer 6

Другой кандидат, конечно, JQuery SVG - если вы уже знакомы с jquery, вы можете предпочесть этот.

Есть сравнение JQuery SVG и Raphaël на SO: jQuery SVG vs. Raphael