Графики и диаграммы – 2. Веб-графики на CSS/AJAX/Javascript

В предыдущей записи я начал обзор средств построения графиков для веб. Там речь шла о разнообразных flash-компонентах, позволяющих визуализировать ваши данные. Пришло время продолжить – сегодня вашему вниманию 16 средств для построения графиков при помощи CSS/AJAX/Javascript. Никаких серверных скриптов и никакого flash – только javscript, CSS и динамический HTML. Этот обзор дополняет предыдущий, завершая тем самым мини-цикл, посвященный построению client-side графиков и диаграмм.

1. PlotKit – Javascript Chart Plotting

PlotKit – свободно распространяемый скрипт, основанный на Mochikit и предназначенный для отрисовки разнообразных диаграмм. Существует два режима работы:

• при помощи html-объекта canvas с поддержкой браузеров Safari 2+, Opera 9+, Firefox 1.5+ и IE 6 в режиме эмуляции canvas
• SVG (в Opera 9+, Firefox 1.5+ с ограничениями и IE6 с поддержкой Adobe SVG)

2. Plotr

Легкий (12Кб) свободно распространяемый скрипт, основанный на предыдущем – PlotKit. Не требует наличи MochiKit, ради чего, собственно, и задумывался (правда, добавился Prototype ). В отличие от PlotKit, использует только html canvas. Декларируется работа в следующих браузерах: Firefox 1.5+, Safari 2.0+, Opera 9.0+ и IE6+ в режиме эмуляции html canvas.

3. Flot

Свободно распространяемый плагин для jQuery, предназначенный для построения графиков из различных наборов данных на лету на стороне клиента. Фишка – в простоте использования (все настройки являются опциональными), привлекательном внешнем виде и интерактивных примочках, типа увеличения на лету. Несмотря на простоту в использовании, Flot достаточно продвинут для работы в сложных Web2.0 приложениях.

Плагин должен работать на всех свежих браузерах, отрисовка производится при помощи тега canvas везде, кроме IE. Там используется javascript-эмуляция – excanvas.

Под катом – еще 13 javascript-графиков.

4. Timepedia Chronoscope

Chronoscope – cредство для визуализации событий на временной оси, разрабатываемое Timepedia. Распространяется как бесплатно, так и на коммерческой основе с дополнительной техподдержкой покупателей. Сверхзадача разработчиков – создать интерфейс, подобный по функционалу сервису Google Maps, но не для гео-данных а для событий, распределенный по времени. Разработка находится в процессе, поэтому, например, в IE графики еще не отображаются корректно.

5. Timeplot

Еще один DHTML/AJAX скрипт, позволяющий визуализировать события, распределенные по времени. Шикарный набор функций, возможность оснащения графиков всплывающими подсказками и пошаговое руководство к действию на сайте авторов – все включено. Функционал виден на скриншоте ниже.

6. Javascript Diagram Builder

Свободно распространяемый скрипт, позволяющий рисовать разнообразные графики при помощи примитивов. Незаменим для тех, кому требуется публиковать графики математических зависимостей. В отличие от многих перечисленных в этом обзоре скриптов, работает в старых браузерах (IE4+, Opera5+). Кроме клиентского скрипта, предлагается php-скрипт, позволяющий строить графики, отдавая их посетителю как сформированное изображение.

7. Emprise JavaScript Charts

Коммерческое решение (формально имеется бесплатная версия, но она с водяным знаком и слабо функциональна). Роскошный функционал и все возможные опции по взаимодействию с пользователем – масштабирование, подсказки, обновление при помощи AJAX. Декларируется полная поддержка следующих браузеров:

Windows

• Internet Explorer 7
• Internet Explorer 6
• Firefox 1.5+
• Mozilla 5+
• Netscape 9+
• Opera 9+

Macintosh

• iPhone 1.0
• Safari 2+
• Camino 1.0.4
• Firefox 1.5+

Стоимость – от $100 до $1000.

8. Ajax MGraph

Легкий плагин для prototype, позволяющий легко и ненапряжно построить весьма изящную столбчатую диаграмму (по-моему, они называются гистограммами; если неправ – поправьте в комментариях =)) Имеется возможность выводить значение конкретной категории и снабжать график статистической информацией и текстовым примечанием (html работает).

9. CSS Vertical Bar Graphs

CSS-гистограмма от Эрика Майера. Крайне изящное css-решение, основанное исключительно на позиционировании элементов списков. Настоятельно рекомендуется к подробнейшему изучению как образец работы с CSS.

10. Apples to Oranges: CSS for Bar Graphs

Еще одно CSS-решение для построения разнообразных гистограмм.

11. Dynamic Pie Chart with CSS

Круговая диаграмма – любой внешний вид, любой размер, любой цвет. Сначала, правда, ее придется нарисовать =)) Чистый CSS, причем очень элегантно исполнено. Внимательно посмотрите на скриншот, чтобы понять как оно работает.

12. Real World Bar Graphics with some CSS

Теперь – CSS-гистограммы из Камбоджи. Берем html-таблицу (с данными, да!), рисуем столбик, перемешиваем это все с CSS – и – вуаля! Результат на скриншоте. На мой взгляд, квинтэссенция всего обзора: визуализация табличных данных прямо в таблице. =)

13. SAC Simple Accessible Charts

Жосские CSS-трюки от горячих немецких парней. На этот (очередной) раз – с html-списками.

<ul class="chart"><li>Ants<span style="background-position: center -35">: </span><strong>35%</strong></li><li>Bisons<span style="background-position: center -40">: </span><strong>40%</strong></li>

<li>Crocodile<span style="background-position: center -87">: </span><strong>87%</strong></li>

<li>Dingo<span style="background-position: center -45">: </span><strong>45%</strong></li>

<li>Emu<span style="background-position: center -23">: </span><strong>23%</strong></li>

</ul>

14. Vertical Bar Graphs with CSS and PHP

Это – опять CSS. И опять списки. Забавно выглядит и весьма функционально. В отличие от рассмотренных CSS-решений, позволяет накладывать несколько графиков, что делает скрипт значительно более приближенным к реальным задачам, чем несколько предыдущих.

15. An accessible bar chart

И снова – здравствуйте =) Сначала рисуем столбцы, потом запихиваем их в таблицу, прокачанную CSS. Получаем весьма симпатичную горизонтальную гистограмму, предложенную авторами сайта про стандарты-шмандарты.

16. Stu Nicholls definition list bar chart

Stu Nicholls играет в CSS. Надо заметить, игры весьма изящные – вот такой xhtml:

<dl><dt>Browser usage (%) - July 2005</dt>

<dd class="p670"><b>IE.6 = 67% </b></dd>

<dd class="p67"><b>IE.5 = 6.7% </b></dd>

<dd class="p12"><b>Opera = 1.2% </b></dd>

<dd class="p197"><b>Firefox = 19.7% </b></dd>

<dd class="p26"><b>Mozilla = 2.6% </b></dd>

<dd class="p08"><b>NN7 = 0.8% </b></dd>

</dl>

позволяет получить вот такой график:

За CSS позволю себе отправить дотошного читателя на сайт Stu Nicholls =)

Вот, пожалуй и все на сегодня. И на эту неделю – тоже =) Прошу комментировать активнее – иначе возникает ощущение, что моя писанина никому нафиг не нужна =) Да, не забывайте подписываться на RSS.

Похожих записей нет.