16 декабря 2009
Создание графиков и диаграмм на JavaScript
Использование графиков и диаграмм имеет очень широкое применение. С их помощью можно показать много информации в удобном и понятном виде, и соответственно быстрее понять и разобраться в ней.
Есть несколько способов добавить график или диаграмму на веб-страницу. Первый, о котором вы, вероятно, уже подумали, это нарисовать его в любом графическом редакторе. Но это не самый удобный и быстрый вариант. Куда проще и быстрее сделать график на JavaScript, где всего то придется задать необходимые параметры, вид и поместить его на страницу.
В этой статье, мы расскажем вам о 10 сервисах и инструментах, которые помогут в создании графиков и диаграмм на JavaScript. Другие способы создания вы найдете в рубрике «Построение графиков».
Bluff
Чтобы нарисовать линейный график с помощью этого сервиса нужно всего лишь скопировать несколько строчек кода, задать нужные параметры и добавить текст. Код настолько прост и понятен, что разобраться в нем вы сможете буквально за несколько секунд.
PlotKit
С помощью PlotKit можно строить диаграммы и графики, которые будут корректно отображаться во всех браузерах. На сайте вы найдете документацию, примеры видов графиков и краткое руководство (с описанием всех параметров и настроек), чтобы быстро начать работу.
JavaScript Graph Plotting Tool
Этот сервис позволяет делать великолепные визуальные функций. Вводите уравнение, например 2*sin(4*x)^(x+4), нажимаете «Enter» и функция готова. После этого вам остается только скопировать url и вставить его на свою страницу.
jQuery диаграммы
Мощнейший инструмент для построения таблиц, графиков и диаграмм на jQuery. На сайте вы найдете примеры всех видов графиков, а так же подробное описание параметров и этапов настройки.
Flot
jQuery библиотека для построения графиков от Google. На этом можно больше ничего не писать, все уже и так понятно (: Но все же отметим, что сервис предлагает огромное количество красивых примеров с гибкой и простой настройкой.
Chart Animation Script
Позволяет создавать диаграммы и таблицы гистограмм данных. Для построения нужно ввести необходимые данные и нажать на кнопку «Calculate». Далее скопировать код и скачать небольшой скрипт. При желании все данные можно вводить в самом коде.
ProtoChart
Сервис предоставляет 6 видов диаграмм (круговая диаграмма, линейный график, динамическая диаграмма и 3 вида гистограмм). Есть описание настроек, параметров и подробные примеры всех видов диаграмм.
Raphaël
Raphaël — это небольшая JavaScript библиотека, которая значительно упрощает работу при создании графиков и диаграмм. Это самый мощный инструмент из всех представленных в этом обзоре. Вам будет проще посмотреть возможности библиотеки самим, чем читать описание о ее возможностях.
Plotr
Библиотека для построения диаграмм на Mootools. Отличный инструмент, который представляет информацию и красивом и понятном виде. А для его настройки нужно только изменить или добавить значения.
Canvas 3D Graph
Возможности этого сервиса позволяют строить 3D графики. Из функционала стоит выделить простую настройку, быструю работу скрипта и возможность построения графиков косинусного и синусного видов.
Комментарии (16)
Дмитрий / 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.
Иван / 9 Июль 2019 в 15:36
Визуально многие к сожалению уже устарели, но зато появились новые: Chart.js, Chartist.js, ApexCharts. Есть ещё одна лёгкая библиотека: liteChart.