Kwert-soft.ru

IT Софт для ПК
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Построение графиков в javascript

9 библиотек на Javascript для построения интерактивных графиков и диаграмм

Если Вашим покупателям или же клиентам нужно передать какую либо отчётность, а так же некоторые сравнения, Вам очень сильно помогут самые обычные графики. В общем они и созданы для этого. Чтобы как всегда облегчить Вам задачу поисков, представляю Вам подборку из 9 библиотек различных графиков на Javascript. Данные графики достаточно функциональны, а так же имеют красивую анимацию, которая будет приятна любому пользователю.

Большущее спасибо http://www.hongkiat.com и рекомендую к просмотру:

1. Плагин графика — Chart.js

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

2. Chartist.JS

Большая библиотека графиков с поддержкой адаптивного дизайна. Так же в графиках используется SVG.

3. c3js

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

4. Флот

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

5. Echart

Это огромная и обширная библиотека графиков и диаграмм созданная китайцами. Она поддерживает огромное количество информации.

6. Peity

Простая библиотека с помощью которой Вы очень просто и быстро можете добавить на веб страницу обычный график или какую нибудь диаграмму.

7. DC JS

Ещё одна отличная библиотека, которая делает то, что от неё и требуется. Присутствует красивая анимация, функциональность и простота установки.

8. Google Chart

Вы можете создавать интерактивные графики с помощью API Google. Так же есть галереи с уже созданными диаграммами, чтобы посмотреть на что возможна данная библиотека.

9. NVD3

Простая в установке и настройке библиотека графиков и диаграмм. Просто взяли и установили.

15 лучших JavaScript-библиотек для построения диаграмм и сводных таблиц

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

В этой статье я покажу вам некоторые из лучших JavaScript библиотек для построения диаграмм/схем (и сводных таблиц). Эти библиотеки помогут вам в создании красивых и настраиваемых графиков для ваших будущих проектов.

Хотя большинство библиотек являются бесплатными и свободно распространяемыми, для некоторых из них есть платные версии с дополнительным функционалом.

D3.js – документы, ориентированные на данные

Сегодня, когда мы задумываемся о графиках, то первое, что приходит в голову – это D3.js Являясь open source проектом, D3.js, вне всякого сомнения, дарит много полезных возможностей, которых не хватает большинству существующих библиотек. Такие возможности как “Enter and Exit”, мощные переходы, и синтаксис, схожий с jQuery или Prototype, делают его одной из лучших JavaScript библиотек для создания графиков и диаграмм. В D3.js они генерируются посредством HTML, SVG и CSS.

В отличие от многих других JavaScript библиотек, D3.js не поставляется с заранее созданными графиками прямо из коробки. Однако вы можете взглянуть на перечень графиков, созданных на D3.js, чтобы получить общее представление.

D3.js не работает должным образом со старыми браузерами, такими как IE8. Но вы всегда можете применить такие плагины как aight plugin для кроссбраузерной совместимости.

D3.js ранее широко использовался на таких вебсайтах как NYTimes, Uber и Weather.com

Google Charts

Google Charts – JavaScript библиотека, которую я регулярно использую для простого и лёгкого создания графиков. Предоставляет множество предварительно созданных диаграмм, таких как комбинированные гистограммы, столбчатые диаграммы, календарные графики, секторные диаграммы, гео схемы, и др.

В Google charts также имеется множество конфигурационных настроек, которые помогают изменить внешний вид графика. Графики формируются с помощью HTML5/SVG добы обеспечить кроссбраузерную совместимость и кроссплатформенную портируемость на IPhone, IPad и Android. Также содержит VML для поддержки старых IE версий.

Вот замечательный список с примерами, построенными на Google charts.

ChartJS

ChartJS наделяет графики красивым плоским дизайном. Он использует HTML5 canvas для рендеринга. Поддержка для старых браузеров, таких как IE7/8, добавляется с помощью полифилла.

Графики ChartJS отзывчивы по умолчанию. Они отлично работают на мобильных устройствах и планшетах. Благодаря 6 основным разновидностям графиков прямо из коробки (core, столбчатый, кольцевой, лепестковый, линейчатый и полярный), ChartJS определённо является одной из наиболее впечатляющих open source библиотек для построения графиков и диаграмм, за последнее время.

Читать еще:  Исправление пунктуационных ошибок в тексте онлайн

Chartlist.js

Chartlist.js предоставляет красивые отзывчивые графики. Также как и ChartJS, Chartlist.js является результатом труда сообщества, которое разочаровалось в дорогих диаграммных библиотеках JavaScript. Он использует SVG для рендеринга графиков/схем. Может управляться и конфигурироваться посредством CSS3 media queries и Sass. Также, примите к сведению, что замечательная анимация, предоставляемая Chartlist.js, будет работать только в современных браузерах.

n3-charts

Если Вы – AngularJS разработчик, то n3-charts определённо вам покажется необычайно полезным и интересным. n3-charts создан поверх D3.js и AngularJS. Он предоставляет множество стандартных графиков в виде настраиваемых AngularJS директив.
Ознакомьтесь с перечнем графиков, созданных с помощью на n3-charts.

Ember Charts

EmberCharts – ещё один великолепный open source репозиторий, построенный на D3.js и Ember.js Предоставляет легко настраиваемые графики временного ряда, гистограммы, секторные диаграммы и диаграммы рассеяния. Использует SVG для рендеринга графиков.

Smoothie Charts

Если вы имеете дело с потоком данных в реальном времени, то вам может пригодиться Smoothie Charts. Для рендеринга графика здесь используется элемент HTML5 canvas. Это библиотека на чистом JavaScript, которая предоставляет такие опциональные возможности для графиков реального времени как задержка и вспышка цвета.

Chartkick

Chartkick – JavaScript библиотека для построения графиков/схем в Ruby приложениях. Предоставляет все основные типы диаграмм, такие как секторная, столбчатая, гистограмма, комбинированная гистограмма, гео, временная и диаграмма кратного ряда. Диаграммы генерируются через SVG.

MeteorCharts

Вы ещё не пробовали работать с Meteor v 1.0? Ладно, MeteorCharts поможет вам в создании красивых диаграмм для Meteor приложений. Для рендеринга графиков предоставляется возможность выбора любой из этих технологий: HTML5 canvas, WebGL, SVG и даже DOM.
Это замечательный генератор графиков, который позволяет вам выбрать его тип, тему, а затем выполнить генерацию. Бесплатен для использования в некоммерческих проектах. Подсчитать стоимость коммерческой лицензии можно здесь.

Highcharts JS

Highcharts JS – ещё одна весьма популярная библиотека для построения графиков. Комплектуется большим количеством анимации разнообразного типа, способной привлечь множество внимания к вашему сайту. Как и другие библиотеки, HighchartsJS содержит множество предварительно созданных диаграмм: сплайновых, фигурных, комбинированных, столбчатых, гистограмм, круговых, точечных и пр.

Одно из самых больших преимуществ применения HighchartsJS – совместимость со старыми браузерами, такими как Internet Explorer 6. Стандартные браузеры используют SVG для рендеринга графиков. В устаревшем IE графики строятся через VML.

Хотя HighchartsJS и бесплатен для персонального использования, вам необходимо приобрести лицензию для коммерческого применения.

Fusioncharts

Fusioncharts – одна из наиболее старых JavaScript библиотек, которая была впервые выпущена в 2002 году. Графики генерируются посредством HTML5/SVG и VML для лучшей портируемости и совместимости.

В отличие от множества библиотек, Fusioncharts предоставляет возможность парсинга как JSON данных, так и XML. Вы также можете экспортировать эти графики в 3 разных формата: PNG, JPG и PDF.

Fusioncharts хорошо совместим со старыми браузерами, такими как IE6. И по этой причине он стал одной из наиболее предпочитаемых библиотек во множестве торговых организаций.

Вы можете бесплатно использовать версию Fusioncharts с водяным знаком как в личных так и в коммерческих проектах. Однако, вам необходимо приобрести лицензию, чтобы избавиться от водяного знака.

Flot – JavaScript библиотека для JQuery, позволяющая создавать графики/диаграммы. Одна из старейших и наиболее популярных диаграммных библиотек.

Flot поддерживает линейчатые, точечные, гистограммы, столбчатые и любые комбинации из этих видов диаграмм. Также совместим со старыми браузерами, такими как IE 6 и Firefox 2.

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

amCharts

amCharts, несомненно, одна из наиболее красивых диаграммных библиотек. Она в полной мере разделилась на 3 независимых вида: JavaScript Charts, Maps Charts (amMaps) и Stock charts.

amMaps – мой любимый из этих трёх, что указаны выше. Предоставляет такие возможности, как теплокарты, рисование линий, добавление текста на карту, загрузка иконок или фотографий в верхнюю часть вашей карты, изменение масштаба и пр.
amCharts использует SVG для рендеринга графиков который работает только в современных браузерах. Графики могут не правильно отображаться в IE ниже 9й версии.

Бесплатная версия amCharts будет оставлять обратную ссылку на этот вебсайт в верхней части каждого графика. Коммерческие лицензии слегка дороже большинства платных библиотек на рынке.

EJSChart

EJS Chart заявляют о своём практичном решении для предприятий. Графики выглядят аккуратней и читабельней чем большинство других из более старых библиотек. Также имеется совместимость с IE6+ и другими старыми браузерами. Ознакомьтесь с этим списком примеров.

Читать еще:  Java string charset

EJS Chart предоставляется в бесплатной и платной версиях. Бесплатная версия имеет ограничение, не позволяющее вам использовать более 1 графика на странице и более двух (числовых) последовательностей на графике. Ознакомьтесь с ценовыми подробностями здесь.

uvCharts

uvCharts – JavaScript библиотека с открытым исходным кодом, заявляется о наличии более 100 конфигурационных опций. У неё имеются графики 12 различных стандартов прямо из коробки.

uvCharts построен на D3.js библиотеке. Этот проект обещает устранить все сложные нюансы кодинга D3.js и обеспечить лёгкую реализацию графиков стандартного вида. uvCharts генерируется посредством SVG, HTML и CSS.

Заключение

Теперь выбор наилучшей диаграммной библиотеки для своих будущих проектов остаётся только за вами. Разработчики, которым нужен полный контроль над графиками, определённо выберут D3.js Практически все вышеуказанные библиотеки обзавелись хорошей поддержкой на форумах Stackoverflow.

Если вы ищите инструменты для генерации уже готовых графиков, то перейдите к статье 5 Инструментов Для Создания Удивительных Онлайн Графиков. Вы также можете прочесть Создание Простых Линейных и Столбчатых Диаграмм с Помощью D3.js, для того чтобы начать знакомство с D3.js. Также у нас есть выпуски, посвящённые GoogleCharts с AngularJS.

Надеюсь вам понравилась эта статья. Хорошего дня.

Красивый JS график на сайт: лёгкая библиотека для ваших проектов

Для одного сайта было необходимо создать интерактивный график. Нет ничего проще! Однако исходный дизайн представлял собой богатый набор кривых, градиентов и теней. При этом нужно было найти лёгкое решение, с возможностью гибкого управления внешним видом. Для этой задачи я перебрал несколько готовых библиотек:

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

В этой статье хочу представить вашему вниманию простенькую библиотеку для создания вот таких линейных графиков. Вес библиотеки получился сравнительно небольшим: всего 18 kB в сжатом состоянии. Данная библиотека основана на оригинальном скрипте dopyo. На всякий случай приведу ссылку dopyo.js

В библиотеке liteChart я постарался убрать повторяющийся код (скрипт стал легче), добавил градиенты, заливки, улучшил визуальное отображение и ещё кое-что по мелочам. Вот что получилось:

Пример графика

Если вам необходимо ещё более простое решение, рекомендую воспользоваться онлайн сервисом для создания графика. Вам не понадобится подключать дополнительные скрипты. Просто введите данные, получите код диаграммы и вставьте на свой сайт. Профит! А кому нужно более гибкое управление, читайте дальше.

Лёгкий старт

Шаг 1:

Скачайте библиотеку и подключите её к своему проекту:

Не имеет значения где вы её подключите, но лучше, если в «подвале» страницы. Думаю, нет смысла объяснять почему.

Шаг 2:

Создайте контейнер, где будет выводиться график и задайте ему уникальный идентификатор:

Шаг 3:

Заполняем график и вставляем его в контейнер:

Функция-конструктор liteChart принимает 2 параметра:

id (String) — обязательный
Уникальный идентификатор графика

settings (Object)
Объект содержащий данные о настройках графика. В приведённом выше примере параметр settings пустой, а значит используются настройки по умолчанию, — предустановленные.

Настройки графика

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

Анимация animate

show (true/false)
Включить или выключить анимацию.
По умолчанию: true

duration (число)
Продолжительность анимации в секундах.
По умолчанию: 0.5

Оси координат axisX и axisY

show (true/false)
Показывать или отключить ось координаты.
По умолчанию: true

color (String)
Задаёт цвет оси координат. Можно использовать цвета hex, rgb или rgba.
По умолчанию: #e9edf1

width (число)
Толщина оси координат в пикселах.
По умолчанию: 2

value (String)
Дополнительная подпись к значениям оси координат.
По умолчанию: null

minValue (число)
Минимальная величина оси координаты. Если значения values передаваемые в метод addLegend меньше установленного значения minValue, график обрезается. Если установлено 0, ось координат рассчитывается автоматически.
По умолчанию: 0

maxValue (число)
Максимальная величина оси координаты. Если значения values передаваемые в метод addLegend больше установленного значения maxValue, график обрезается. Если установлено 0, ось координат рассчитывается автоматически.
По умолчанию: 0

Смещение графика по eventCoord

x и y (число)
Смещение графика по осям x и y.
По умолчанию: 0

Читать еще:  Java lang runtimeexception что это

Заполнение поля диаграммы fill

fill (null, «origin» или «gradient»)
Задаёт способ заполнения поля диаграммы. Выбирается одно из 3 значений: null — без заполнения, «origin» — сплошная заливка, «gradient» — градиентная заливка.
По умолчанию: «gradient»

Сетка координат gridX и gridY

show (true/false)
Показывать или отключить сетку координат.
По умолчанию: true

interval (число)
Не описано…
По умолчанию: 0

fill (число)
Не описано…
По умолчанию: 1

stroke (String)
Задаёт цвет линий сетки координат. Можно использовать цвета hex, rgb или rgba.
По умолчанию: «#e9edf1»

width (число)
Задаёт толщину линий сетки координат.
По умолчанию: 2

dasharray (число/строка)
Управляет видом пунктирной обводки линий сетки координат.
По умолчанию: «0 10.04»

linecap (строка)
Свойство определяет как будут выглядеть концы линий сетки координат. Возможные значения: butt, round, square.
По умолчанию: «round»

Подписи к осям координат labels

show (true/false)
Показывать или отключить подписи к осям координат.
По умолчанию: true

fontColor (string)
Цвет подписей. Можно использовать цвета hex, rgb или rgba.
По умолчанию: «#c5c6d0»

fontSize (число)
Размер шрифта подписей.
По умолчанию: 12

fontFamily (string)
Шрифт подписей.
По умолчанию: «sans-serif»

fontWeight (string)
Толщина шрифта.
По умолчанию: «normal»

Настройки линий графика line

width (число)
Толщина линий графика.
По умолчанию: 3

style (string)
Тип линий графика. Одно из 2 значений: curve — изогнутые линии, straight — прямые линии.
По умолчанию: «curve»

shadow (true/false)
Отображать или скрыть тень от линии.
По умолчанию: true

dasharray (число/string)
Управляет видом пунктирной обводки линий графика.
По умолчанию: null

Настройки точек графика point

show (true/false)
Показывать или отключить точки.
По умолчанию: true

radius (число)
Величина радиуса точки.
По умолчанию: 5

strokeWidth (число)
Толщина обводки точки.
По умолчанию: 5

stroke (string)
Цвет обводки точки. Можно использовать цвета hex, rgb или rgba.
По умолчанию: «#ffffff»

Значения valueOnliteChart

show (true/false)
Отображать или скрыть значения над точками графика.
По умолчанию: false

Примеры

#1 График без кастомных настроек

Наш график будет выглядеть примерно так:

Пример графика по умолчанию

#2 Прямые линии с подписями по осям

#3 График со сплошной заливкой

Послесловие

Если вы разбираетесь в CSS, вы можете добавить анимации к линиям или изменить оформление графиков под свои потребности. Многие элементы имеют css классы и вы легко можете управлять внешним видом.

5 лучших jQuery плагинов для построения графиков

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

И так сразу приступим.

1. Flot

Flot — это один из немногих jQuery плагинов, который может выполнять функцию построения графиков. От простых и самых сложных.

Вот несколько из примеро:

2. Highcharts

Hightcharts — это простой в использовании скрипт для отображения диаграмм на сайте. Множество разных функций и дополнений.

3. Morris.js

Morris.js — это очередной плагин для отображения графиков на сайте, написанный на jQuery. Различие этого плагина от всех других в том, что он включает в себя более классические варианты цветов и диаграмм.

Все демо примеры вы можете посмотреть пройдя на глвную страницу сайта плагина.

4. CanvasJS jQuery

CanvasJS — это один из наилучших примеров отображения статической информации в виде графиков на сайте. Плагин использует canvas, для отображения всех данных.

5. Peity

Peity — это плагин, которые делает мини версии графиков и диаграмм на сайте. Если у вас мало места на сайте для отображение графических элементов, то этот плагин именно для вас.

Послесловие

На этом все, что касается построения графиков на JavaScript/jQuery. Многие из плагинов повторяются, но я старался отобрать только самое лучшее для вас.

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

Все плагины open source (в открытом доступе) и поэтому вы можете их использовать как угодно и где удобно — никаких запретов.

Если у вас остались какие-либо вопросы — пишите их ниже в комментарии.

Ссылка на основную публикацию
Adblock
detector