Back to Top
Font size: +

Создание графиков и диаграмм на JavaScript

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

Есть несколько способов добавить график или диаграмму на веб-страницу. Первый, о котором вы, вероятно, уже подумали, это нарисовать его в любом графическом редакторе. Но это не самый удобный и быстрый вариант. Куда проще и быстрее сделать график на JavaScript, где всего то придется задать необходимые параметры, вид и поместить его на страницу.

В этой статье, мы расскажем вам о 10 сервисах и инструментах, которые помогут в создании графиков и диаграмм на JavaScript. Другие способы создания вы найдете в рубрике «Построение графиков».

BluffBluff
Чтобы нарисовать линейный график с помощью этого сервиса нужно всего лишь скопировать несколько строчек кода, задать нужные параметры и добавить текст. Код настолько прост и понятен, что разобраться в нем вы сможете буквально за несколько секунд.

PlotKitPlotKit
С помощью PlotKit можно строить диаграммы и графики, которые будут корректно отображаться во всех браузерах. На сайте вы найдете документацию, примеры видов графиков и краткое руководство (с описанием всех параметров и настроек), чтобы быстро начать работу.

JavaScript Graph Plotting ToolJavaScript Graph Plotting Tool
Этот сервис позволяет делать великолепные визуальные функций. Вводите уравнение, например 2*sin(4*x)^(x+4), нажимаете «Enter» и функция готова. После этого вам остается только скопировать url и вставить его на свою страницу.

jQuery диаграммыjQuery диаграммы
Мощнейший инструмент для построения таблиц, графиков и диаграмм на jQuery. На сайте вы найдете примеры всех видов графиков, а так же подробное описание параметров и этапов настройки.

FlotFlot
jQuery библиотека для построения графиков от Google. На этом можно больше ничего не писать, все уже и так понятно (: Но все же отметим, что сервис предлагает огромное количество красивых примеров с гибкой и простой настройкой.

Chart Animation ScriptChart Animation Script
Позволяет создавать диаграммы и таблицы гистограмм данных. Для построения нужно ввести необходимые данные и нажать на кнопку «Calculate». Далее скопировать код и скачать небольшой скрипт. При желании все данные можно вводить в самом коде.

ProtoChartProtoChart
Сервис предоставляет 6 видов диаграмм (круговая диаграмма, линейный график, динамическая диаграмма и 3 вида гистограмм). Есть описание настроек, параметров и подробные примеры всех видов диаграмм.

JavaScript LibraryRaphaël
Raphaël — это небольшая JavaScript библиотека, которая значительно упрощает работу при создании графиков и диаграмм. Это самый мощный инструмент из всех представленных в этом обзоре. Вам будет проще посмотреть возможности библиотеки самим, чем читать описание о ее возможностях.

PlotrPlotr
Библиотека для построения диаграмм на Mootools. Отличный инструмент, который представляет информацию и красивом и понятном виде. А для его настройки нужно только изменить или добавить значения.

Canvas 3D GraphCanvas 3D Graph
Возможности этого сервиса позволяют строить 3D графики. Из функционала стоит выделить простую настройку, быструю работу скрипта и возможность построения графиков косинусного и синусного видов.

Комментарии (15)

 

Дмитрий / 16 Декабрь 2009 в 19:22

В свое время, лет пять назад, пытался сам делать свои графики.

Не приятно был удивлен, что JS не имеет графических функций и что все типа Line рисуются точками. Сейчас приятно удивился, что есть много хороших библиотек для элементарного построения графиков.

ProBlogger / 16 Декабрь 2009 в 21:20

Спасибо за списочек. Особенно понравился Canvas 3D Graph. (:

Richkeeper / 16 Декабрь 2009 в 22:29

Очень полезный список, но только не согласен с тем, что нарисовать и вставить рисунок тяжелее, чем вбивать в java.

Илья Федотов / 16 Декабрь 2009 в 23:23

Richkeeper, не согласен с вами.

Нам необходимо только задать значения и подписать линии или области на графике. Все остальное сделают за нас. А вот, при создании графика с чистого листа придется не только его рисовать, но рассчитывать точный процент значений. Сколько нужно будет потратить на это времени? Явно больше, чем просто вбить значения. Да и красиво нарисовать график или диаграмму не каждому под силу.

Roosti4 / 2 Март 2010 в 13:49

Большое человеческое Спасибо!
Самому найти никак не удавалось.

Кирилл / 9 Апрель 2010 в 15:01

Для себя выбрал в качестве основного инструмента диаграммы на основе jQuery. Качественно, быстро и удобно.

Max / 21 Июнь 2010 в 16:24

Xорошая подборка, мне больше нравится Flot.

Saymon / 23 Июнь 2010 в 01:25

Отличная подборка! В данный момент, я именно это и искал. Спасибо буду пользоваться.

Taz / 5 Октябрь 2010 в 12:10

Open Flash Chart — ещё одна мощная и функциональная библиотека.

Webworker / 20 Февраль 2011 в 01:35

Забыли упомянуть Google Chart. Такая фишка тоже есть.

Magy / 24 Февраль 2011 в 10:25

Скажите, а возможно ли с помощью JavaScript создание графиков подобных этим: bifin, stock?

Илья Федотов / 24 Февраль 2011 в 10:34

Magy, первые два графика в первом примере реализовать на JavaScript точно получится, а вот график во втором примере — точно нет.

Magy / 26 Март 2011 в 13:00

Как мне тогда нарисовать такой график курсов?

Илья Федотов / 26 Март 2011 в 13:55

Magy, с помощью flash (именно с помощью этой технологии они сделаны). Попробуйте поискать готовые примеры или аналоги. Уверен, что подобные графики можно найти.

Влад / 14 Март 2015 в 01:15

15 лучших библиотек с диаграммами от JavaScript.

Комментирование этой статьи закрыто ...

Креативные логотипы. Часть 1