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

Question

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

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

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

Answer 1

Как насчет Raphaël - это SVG/VML. Он говорит: совместимость

Browser:

Рафаель в настоящее время поддерживает Firefox 3.0+, Safari 3.0+, Opera 9.5+ и Internet Explorer 6.0+.

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

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

Возможность заполнения формы с градиентами

да

Ability иметь события onclick и onmouseover

да:

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

Все в reference

На вершине этого, есть плагин под названием gRaphael который делает создание диаграмм легче.

Answer 2

Простые данные - Google Charts API или Google Visualization API могут вас устроить.

Детали для всех особенностей диаграмм изображения можно найти на Chart feature list

Вы также можете посмотреть на comparison Чартов API и API визуализации.

Answer 3

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

Там в сравнение JQuery SVG и Рафаэле на SO: jQuery SVG vs. Raphael

Answer 4

Я рекомендую использовать 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 и т. Д., Потому что любой браузер, у которого есть флеш-плеер, совместим.
• способность рисовать фигуры: наибольшая сила вспышки - способность рисовать. Графики полностью настраиваемые и масштабируемые для достижения нужного вам вида.
• Возможность заполнения фигур градиентами - легко сделать, установив атрибуты стиля или пользовательский скин.
• возможность иметь события onclick и onmouseover для разных фигур - см. this link для некоторых простых способов создания пользовательских взаимодействий с диаграммами.

Answer 5

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

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

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

Answer 6

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