2010-12-14

Графики на SVG/VML

программирование, JavaScript, ztools

Мне никак дает покоя Google Charts...

Наиболее популярными библиотеками для построения графиков на сегодняшний день являются JPGraph и Google Charts. Решение от Google - замечательное, удобное, простое, графики очень симпатичные. Однако, все графики генерируются на чужом сервере (речь идет о графиках построенных через URL API). Пользователю разрешается создать ограниченное количество графиков а потом его могут забанить. Конечно, это количество большое, но меня немного смущает сама возможность быть забаненным из за превышения количества показов. Кроме того, сервер гугла я не контролирую и никто не может гарантировать, что этот сервис будет работать вечно, или что завтра на моих графиках не появится реклама, или внешний вид этих графиков не будет изменен на тот, который мне не нравится.

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

JPGpaph дает возможность создавать графические изображения на своем сервере, но все равно это — графические изображения, со всеми присущими графическим изображениям ограничениями.

У растровых графиков есть один недостаток — их полная неинтерактивность. На растровый график невозможно добавить эффекты анимации при наведении мышкой, нельзя добавить гиперссылки (imagemap не в счет). Так как изначально природа графиков векторная — лучшим решением будет использовать векторный движёк вместо растрового. У вектора есть несколько неоспоримых преимуществ - не нужно передавать изображения по сравнительно узким каналам связи - передается только сама информация для построения графика, при этом рендеринг изображения происходит на машине клиента.

На сегодняшний день в вебе наиболее популярными являются несколько технологий - Adobe Flash, Microsoft Silverlight и Canvas/SVG/VML. Выбирая между Canvas и SVG я отдаю предпочтение последнему так как эта технология позволяет создавать по настоящему интерактивные эффекты и ближе к VML используемому в браузерах от Microsoft.

Используя ztools создал несколько компонентов для построения различных графиков и диаграмм:

 

Конечно, эти компоненты еще не совершенны, это даже не бета версия. Но уже лучше чем ничего. Главным отличием от аналогичных являются: открытость исходного кода, простота, и (надеюсь) удобство использования. Замечания, пожелания, багрепорты и фичреквесты приветствуются.

 

 

комментарии:

 
Гриша (анонимный пользователь) | 2011-01-10

Прежде чем использовать какие то новые возможности javacsript, не плохо убедится, а поддерживаются ли эти возможности данным браузером. Хороший фреймворк для определения возможностей браузера has.js. Небольшое описание есть тут: <a href="http://www.clearboth.ru/article/javascript-feature-detection-with-hasjs.html">Определение возможностей JavaScript с помощью has.js</a>

RSS комментариев

Для того чтобы каждый раз не представляться можно войти как зарегистрированный пользователь.

Имя*

разрешены только теги br, font, span, p, strong, u, p, blockquote, a, div, img - остальные будут безжалостно удаляться

разное (183)
howto (124)
программирование (108)
гад-же-ты (75)
мысли (42)
PHP (41)
JavaScript (39)
вебмастеринг (37)
linux (28)
гондураша (28)
юмор (25)
полезное (21)
движок (17)
Android (17)
софт (15)
деньги (14)
видео (13)
кино (13)
музыка (10)
беспредел (10)
путешествия (10)
интернет (9)
diy (9)
ztools (8)
книги (8)
умный дом (8)
занимательная физика (8)
языки (7)
хостинг (7)
Nokia 5800 (7)
lifehack (6)
css (6)
вебдизайн (6)
apple (5)
arduino (5)
связной (5)
прелоадер (5)
козлы (5)
oDesk (5)
занимательная юриспруденция (4)
кухня (4)
Python (4)
аниме (4)
svn (4)
рестораны (3)
энергия (3)
synphony (3)
software (3)
фото на документы (2)
webmastering (2)
Java (2)
Ruby on Rails (2)
спорт (2)
bash (2)
движек (2)
гитара (2)
дурдом (1)
C++ (1)
годнурас (1)
микросервисы (1)
SEO (1)
programming (1)
технологии (1)
наука (1)
сайты (1)
авторское право (1)
восстановить (1)
Поиск по блогу:

Valid XHTML 1.0 Strict