в рубрику JavaScript
27 октября 2008
22
3.6 из 5
JavaScript решения для построения графиков

JavaScript решения для построения графиков

Когда-то давно мы уже писали о различных решениях для построения графиков на сайтах. В тот раз это были в основном flash решения.

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

Итак, давайте рассмотрим 8 отличных скриптов JavaScript для построения графиков.

Raphaël

Raphael

Для работы библиотека использует SVG/VML. Работает в Firefox 3.0+, Safari 3.0+, Opera 9.5+ и Internet Explorer 6.0+.

Flot

Flot

 

Библиотека Flot постоена на jQuery и разработана в IOLA. Легкая в использовании, она имеет несколько дополнительных функций, таких как увеличение при помощи мыши (кликните и тащите нужную область) и возможность определения координат клика.

Flotr

Flotr

Flotr, написанная Басом Веннекером из Solutoire.com, это скрипт для графиков, идея которого была взята из Flot. Это решение основано на Prototype и использует excanvas.js. Поддерживаются многие современные браузеры, в том числе Internet Explorer 6.

fgCharting плагин для jQuery

fgCharting jQuery

fgCharting это плагин jQuery. Его отличительной особенностью является то, что он строит графики, вытаскивая данные из HTML таблицы. Самый простой вариант использования предпологает только одну строчку кода.

PlotKit

PlotKit

PlotKit основан на Mochikit и является рерайтом проекта CanvasGraph.js. Библиотка имеет поддержку SVG.

Диаграммы на JavaScript

JavaScript Diagram Builder

Поддерживает несколько типов диаграмм, в том числе столбцы, точки, линии и прочее.

Emprise JavaScript Charts

Emprise JavaScript Charts

Движок для графиков под Dojo

The Dojo Charting Engine

Автор: Павел Марковнин

Павел Марковнин

Сооснователь Временно.нет. Интересуется онлайн бизнесом, дизайном, юзабилити и клиентским программированием. Участвует в разработке нескольких интернет-проектов.

Иногда пишет в Твиттер, но чаще на Временно.нет.

Профиль в Google+ — Павел Марковнин.

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 22

GIN
Спасибо за подборку. Flotr симпотичные графики строит. А кстати из php решений для рисования графиков лично мне очень нравится pChart.
#
GIN
Zodios
Спасибо за интересный обзор, правда не хватает информации по поддержке форматов импорта и платностибесплатности библиотеке и какие ограничения накладываются.
cody
Понравился flot, возможность выделять точки на графике, отлавливать события.
#
cody
Андрей [Sam] Несвой
То что надо. Исправьте опечатку в названии статьи "для постоения графиков".
#
Андрей [Sam] Несвой
Big_Shark
Есть еще бесплатное api от google для построения графиков!
#
Big_Shark
Михаил
Спасибо, давно искал!
#
Михаил
Rodriguez
Спасибо за подборку!
#
Rodriguez
Сергей
SVG рулит, такими темпами в скором времени можно будет позабыть про Flash, но.. не работает в ИЕ6
#
Сергей
doubled
А есть скрипты или flash для построения графов? :)
#
doubled
Grin
doubled, скорее всего есть, просто нужно знать более четкие требования и искать решения уже под них
#
Grin
Grin
Сергей, есть такая библиотека Рафаэль, которая позволяет использовать вектор на вебе (в осле тоже)
#
Grin
Сергей
Насколько известно мне, формат SVG IE6 не поддерживает. Однако да, есть ещё и формат VML который подружился с ИЕ больше чем SVG. И он действительно реализован в рафаэле, но удобнее и проще работать всё таки с VML. Ещё один повод перейти на FF тем кто этого ещё не сделал)
#
Сергей
Сергей
правлюсь) удобней конечно же с SVG)
#
Сергей
mizhgan
Спасибо за обзор, как раз искал нечто подобное. И повторю вопрос о библиотеках, отрисовывающих графы. Очень необходима такая штука, для отрисовки ненаправленных графов на плоскости. Желательно в эстетически удобоваримом виде =) Может кто либо озадачивался подобным и что-то уже нашел, поделитесь.
ANDRU
Еще бы инструкции по работе с ними на русском найти
#
ANDRU
ilya_compman
А почему никто не вспомнил про API Google Chart? ;)
Magy
Скажите, а возможно ли с помощью Javascript cоздание графиков подобных этим:
http://www.bifin.ru/informers
http://www.conus.kiev.ua/stock.html
#
Magy
sofcase
Забыли про отличную библиотеку Highcharts.
dzantiev
недавно написал подобный плагин, графики строятся на HTML5 если кому то интересно вот ссылка graph.prootime.ru
Gondor
canvas рулит
http://html5insight.ru/post/9135528558/html5-canvas-and-svg
#
Gondor
serge78rus
Компонент отрисовки графиков на HTML5 canvas JSChart

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a> 
function foo() { ... }
 <pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a> 
function foo() { ... }
 <pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler