В этой статье мы будем создавать интерактивный график, используя CSS3 и jQuery . Мы будем использовать популярную библиотеку для jQuery - Flot. Flot – это библиотека (на чистом javascript), предназначенная для рисования графиков, и используемая в jQuery. Этот плагин прост, но в то же время достаточно мощен, чтобы создавать красивые и интерактивные графики. Для большей информации о библиотеке обратитесь к официальной документации по flot.
Для начала создадим разметку HTML для графика. Создадим блок с классом graph-wrapper . Внутри этого блока расположим два блока. Первый блок с классом graph-info , будет содержать легенду графиков и кнопки для переключения между внешним видом графиков. Второй блок содержит графики (линейный и столбиковый).
HTML Visitors Returning Visitors jQuery и библиотека FlotДавайте подключим javascript. Сперва подключим библиотеку jquery (например, от google). Вы можете использовать ту же ссылку или загрузить файл c библиотекой jQuery на ваш сервер. Затем загрузите файлы Flot и подключите jquery.flot.min.js.
HTML $(document).ready(function () { // Graph scripts here }); Данные для графикаДанные для графика представляют собой массив вида: . Мы также установим пользовательские опции для каждого типа данных.
jQuery var graphData = [{ // Visits data: [ , , , , , , , , , ], color: "#71c73e" }, { // Returning Visits data: [ , , , , , , , , , ], color: "#77b7c5", points: { radius: 4, fillColor: "#77b7c5" } } ]; Загружаем графикиСейчас мы будем загружать два графика, один линейный, другой столбиковый. Оба имеют несколько пользовательских параметров (цвет, тень и т.д.). Также оба используют данные из переменной graphData .
jQuery // Линейный $.plot($("#graph-lines"), graphData, { series: { points: { show: true, radius: 5 }, lines: { show: true }, shadowSize: 0 }, grid: { color: "#646464", borderColor: "transparent", borderWidth: 20, hoverable: true }, xaxis: { tickColor: "transparent", tickDecimals: 2 }, yaxis: { tickSize: 1000 } }); // Bars $.plot($("#graph-bars"), graphData, { series: { bars: { show: true, barWidth: .9, align: "center" }, shadowSize: 0 }, grid: { color: "#646464", borderColor: "transparent", borderWidth: 20, hoverable: true }, xaxis: { tickColor: "transparent", tickDecimals: 2 }, yaxis: { tickSize: 1000 } }); Стили для блока-обертки и его потомковПредварительно сбросим стили по умолчанию для всех элементов в блоке-родителе графиков (хорошая практика начинать верстку сайта с подключений сброса стилей).
CSS /* Resets */ .graph-container, .graph-container div, .graph-container a, .graph-container span { margin: 0; padding: 0; } Добавим градиент и закругленные углы обертке, кнопкам и подсказкам. CSS /* Gradinet and Rounded Corners */ .graph-container, #tooltip, .graph-info a { background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f9f9f9)); background: -webkit-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: -o-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: linear-gradient(to bottom, #ffffff 0%,#f9f9f9 100%); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }Наконец в следующем шаге мы добавим позиционирование блоку-родителю, а также назначим ему ширину, высоту и отступы. Не стесняйтесь экспериментировать этими значениями в зависимости от ваших предпочтений по дизайну и размеров графиков.
CSS /* Graph Container */ .graph-container { position: relative; width: 550px; height: 300px; padding: 20px; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.1); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,.1); box-shadow: 0px 1px 2px rgba(0,0,0,.1); } .graph-container > div { position: absolute; width: inherit; height: inherit; top: 10px; left: 25px; } .graph-info { width: 590px; margin-bottom: 10px; } 
Давайте начнем с добавления базовых стилей для ссылок. Для легенд графиков создадим небольшой круг с таким же цветом как у самих графиков (линейный/столбиковый). Чтобы создать круг будем использовать псевдо-селектор:before . Этот селектор позволит нам вставить контент до содержимого элемента, к которому он добавляется.
CSS .graph-info a { position: relative; display: inline-block; float: left; height: 20px; padding: 7px 10px 5px 30px; margin-right: 10px; text-decoration: none; cursor: default; } CSS /* Color Circles */ .graph-info a:before { position: absolute; display: block; content: ""; width: 8px; height: 8px; top: 13px; left: 13px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .graph-info .visitors { border-bottom: 2px solid #71c73e; } .graph-info .returning { border-bottom: 2px solid #77b7c5; } .graph-info .visitors:before { background: #71c73e; } .graph-info .returning:before { background: #77b7c5; }Затем добавим стили двум кнопкам, которые позволяют нам переключаться между линейным и столбиковым графиком.
Наконец предотвратим схлопывание блоков.
CSS /* Clear Floats */ .graph-info:before, .graph-info:after, .graph-container:before, .graph-container:after { content: ""; display: block; clear: both; } Переключатель графиковНа этом шаге добавим событие клика для кнопок “столбиковый” и “линейный”. При загрузке спрячем столбиковый график, затем при клике по “столбиковой” кнопке делаем график видимым. Чтобы увидеть линейный график, пользователь должен кликнуть по “линейной” кнопке.
jQuery $("#graph-bars").hide(); $("#lines").on("click", function (e) { $("#bars").removeClass("active"); $("#graph-bars").fadeOut(); $(this).addClass("active"); $("#graph-lines").fadeIn(); e.preventDefault(); }); $("#bars").on("click", function (e) { $("#lines").removeClass("active"); $("#graph-lines").fadeOut(); $(this).addClass("active"); $("#graph-bars").fadeIn().removeClass("hidden"); e.preventDefault(); }); ТекстДобавляем шрифт и стили для текста.
CSS #tooltip, .graph-info a { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; font-size: 12px; line-height: 20px; color: #646464; } .tickLabel { font-weight: bold; font-size: 12px; color: #666; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }Спрячем стили для первого и последнего значения по оси y:
CSS .yAxis .tickLabel:first-child, .yAxis .tickLabel:last-child { display: none; } ПодсказкаДобавим подсказку внутрь элемента body. Подсказка будет блоком с id равным tooltip . Позиция для подсказки будет вычисляться на основе позиции точек графика. Подсказка будет показываться лишь при наведении курсора на точки графиков.
jQuery function showTooltip(x, y, contents) { $("" + contents + "").css({ top: y - 16, left: x + 20 }).appendTo("body").fadeIn(); } var previousPoint = null; $("#graph-lines, #graph-bars").bind("plothover", function (event, pos, item) { if (item) { if (previousPoint != item.dataIndex) { previousPoint = item.dataIndex; $("#tooltip").remove(); var x = item.datapoint, y = item.datapoint; showTooltip(item.pageX, item.pageY, y + " visitors at " + x + ".00h"); } } else { $("#tooltip").remove(); previousPoint = null; } });Затем добавим подсказке абсолютное позиционирование, отступы, границы и установим display в none .
CSS #tooltip { position: absolute; display: none; padding: 5px 10px; border: 1px solid #e1e1e1; } 
На этом все. Мы закончили, используя CSS3 и плагин flot, настраивать графики. Успехов.
С точки зрения взаимодействия, Флот, безусловно, приблизит вас к графике Flash, как можно ближе к jQuery . Несмотря на то, что вывод графика довольно гладкий и великолепно выглядящий, вы также можете взаимодействовать с точками данных. Я имею в виду, что вы можете иметь возможность навести курсор на точку данных и получить визуальную обратную связь от значения этой точки на графике.
Версия trunk для флота поддерживает круговые диаграммы.
Возможность масштабирования флота.
Кроме того, у вас также есть возможность выбрать фрагмент графика, чтобы вернуть данные для определенной "зоны". В качестве дополнительной функции для этого "зонирования" вы также можете выбрать область на графике и увеличить масштаб, чтобы увидеть точки данных немного ближе. Очень круто.
Sparklines Ограничения: Pie, Line, Bar, CombinationSparklines - мой любимый мини-графический инструмент. Действительно отлично подходит для графиков стиля панели инструментов (подумайте о панели инструментов Google Analytics при следующем входе в систему). Поскольку theyre настолько крошечный, они могут быть включены в строку (как в примере выше). Еще одна приятная идея, которая может использоваться во всех графических плагинах, - это возможности самообновления. Их демо-версия Mouse-Speed показывает вам мощь живого графика в лучшем виде.
Диаграмма запросов 0.21 Ограничения: Area, Line, Bar и комбинации этихДиаграмма jQuery 0.21 - это не самый красивый плагин для построения диаграмм, там он должен быть указан. Его довольно простой в функциональности, когда дело доходит до графиков, которые он может обрабатывать, однако он может быть гибким, если вы можете потратить некоторое время и усилия на него.
Добавление значений в диаграмму относительно просто:
ChartAdd({ "label" : "Leads", "type" : "Line", "color" : "#008800", "values" : ["100","124","222","44","123","23","99"] });
jQchart Ограничения: Бар, ЛинияjQchart является нечетным, они встроены в анимационные транзисторы и функции перетаскивания в диаграмму, однако его немного неуклюжие - и, казалось бы, бессмысленные. Он генерирует красивые диаграммы, если вы правильно настроите CSS , но там лучше.
TufteGraph Ограничения: Bar и Stacked BarTuftegraph продает себя как "красивые гистограммы, которые вы покажете своей матери". Он приближается, Флот красивее, но Tufte делает себя очень легким. Хотя с этим и заканчиваются ограничения - есть несколько вариантов выбора, так что вы получаете то, что вы указали. Посмотрите на карту быстрого выигрыша.
- Перевод
Практически невозможно представить себе информационную панель без диаграмм и графиков. Они быстро и эффективно отображают сложные статистические данные. Более того, хорошая диаграмма также улучшает общий дизайн вашего сайта.
В этой статье я покажу вам некоторые из лучших 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 версий.
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
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й версии.
EJS Chart предоставляется в бесплатной и платной версиях. Бесплатная версия имеет ограничение, не позволяющее вам использовать более 1 графика на странице и более двух (числовых) последовательностей на графике. Ознакомьтесь с ценовыми подробностями .
uvCharts
uvCharts – JavaScript библиотека с открытым исходным кодом, заявляется о наличии более 100 конфигурационных опций. У неё имеются графики 12 различных стандартов прямо из коробки.
UvCharts построен на D3.js библиотеке. Этот проект обещает устранить все сложные нюансы кодинга D3.js и обеспечить лёгкую реализацию графиков стандартного вида. uvCharts генерируется посредством SVG, HTML и CSS.
Заключение Теперь выбор наилучшей диаграммной библиотеки для своих будущих проектов остаётся только за вами. Разработчики, которым нужен полный контроль над графиками, определённо выберут D3.js Практически все вышеуказанные библиотеки обзавелись хорошей поддержкой на форумах Stackoverflow.Надеюсь вам понравилась эта статья. Хорошего дня.
Теги: Добавить метки
Здравствуйте, уважаемые читатели a! Диаграммы являются одним из лучших способов отображения данных и гораздо более информативными, чем таблицы. В этой статье рассмотрим пример построения диаграмм с помощью отличного javascript плагина — Chart.js
. Для построения диаграмм, гистограмм, линейных графиков, круговых диаграммы и много другого плагин использует . В качестве примера использования chart.js
рассмотрим набор из 3 элементов, один будет показывать количество покупателей вымышленного продукта в течение 6 месяцев — это будет график, второй покажет, из каких стран клиенты — это будет круговая диаграмма и наконец мы будем использовать гистограмму, чтобы показать прибыль за этот период.
Первое, что нужно сделать, это загрузить Chart.js . Остается только подключить его к странице. Допустим файлы html и js находятся в одном каталоге, тогда в общем виде разметка страницы выглядит так:
1 |
|
Как Вы наверняка заметили подключение библиотеки jQuery не обязательно, однако если она необходима для иных целей можно смело подключать, конфликтов возникнуть не должно.
Использование Рисуем графикЧтобы нарисовать линейную диаграмму, нам нужно создать графический элемент HTML, в котором можно будет с помощью Chart.js сделать график:
Задаем размеры элемента и указываем идентификатор.
1 | var
buyers =
document.getElementById
("buyers"
)
.getContext
("2d"
)
;
|
С помощью класса Chart определяем линейную диаграмму.
Теперь задаем параметры и данные для отображения:
1 | var
countries=
document.getElementById
("countries"
)
.getContext
("2d"
)
;
|
Для более «точечной» настройки также можно использовать опции.
Влад Мержевич
На сайтах иной раз приходится использовать разные диаграммы, что позволяют наглядно и доступно донести данные до пользователя. Раньше подобные графики делали в Excel, а затем вставляли на сайт картинкой. Но мы ведь живём в век информационных технологий, поэтому хочется вставить диаграмму быстро, просто, да ещё чтобы она была при этом интерактивной и красивой. И вот пришёл Гугл и дал нам такой сервис.
Набор возможных графиков доступен на этой странице. Для каждого графика есть множество параметров, которые позволяют настроить всё по своему вкусу: цвета, положение, заголовки, анимацию и многое другое. Можно обойтись и минимальным набором, если нет желания вдаваться в эти тонкости или когда полностью устраивает стандартный вид графика.
Рассмотрю только два типа графиков - круговую и линейную диаграмму. Остальные типы подключаются по аналогии и разобравшись как добавлять один график, уже легче работать и с другими.
Круговая диаграммаТакая диаграмма напоминает торт, разрезанный на разного размера куски. Общая сумма всех частей составляет 100%, части делят круг пропорционально своим значениям.
В примере 1 показан код для отображения состава воздуха в виде круговой диаграммы.
Пример 1. Круговая диаграмма
Круговая диаграмма google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Газ", "Объём"], ["Азот", 78.09], ["Кислород", 20.95], ["Аргон", 0.93], ["Углекислый газ", 0.03] ]); var options = { title: "Состав воздуха", is3D: true, pieResidueSliceLabel: "Остальное" }; var chart = new google.visualization.PieChart(document.getElementById("air")); chart.draw(data, options); }
Результат примера показан на рис. 1.
Рис. 1. Вид круговой диаграммы
В том месте документа, куда мы добавляем диаграмму, вставляем следующий код.
Ширину и высоту диаграммы задаём через стили и добавляем идентификатор для работы скрипта. Этот же идентификатор должен быть указан в document.getElementById .
Параметры диаграммы состоят из двух блоков: собственно данные для отображения (переменная data ) и настройки (переменная options ). Первая строка в data задаёт названия последующих колонок и хотя она никак не выводится, без неё отображение происходит некорректно. В options пишется заголовок диаграммы, также можно указать трёхмерность и другие настройки, все они являются необязательными и если не заданы, то принимаются по умолчанию.
Диаграмма получается интерактивной, её части подсвечиваются если навести на них курсор или на легенду.
Примеры, список параметров и описание круговой диаграммы доступны по этому адресу: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
Гистограмма - это столбчатая диаграмма, которая удобна для сравнения разных значений между собой. В качестве примера возьмём добычу нефти в XIX веке в России и США (рис. 2). На оси абсцисс (горизонтальная ось) нанесены годы, на оси ординат (вертикальная ось) - добыча нефти в тысячах тонн. Высота прямоугольников соответствует указанному значению.
Рис. 2. Гистограмма
Принцип создания этого типа диаграммы аналогичен предыдущему - добавляем тег , связываем его со скриптом, в котором хранятся данные для графика и параметры отображения (пример 2).
Пример 2. Гистограмма
Гистограмма google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Год", "Россия", "США"], ["1860", 1.3, 70], ["1885", 2000, 3120], ["1901", 12170, 9920] ]); var options = { title: "Добыча нефти", hAxis: {title: "Год"}, vAxis: {title: "Тыс. тонн"} }; var chart = new google.visualization.ColumnChart(document.getElementById("oil")); chart.draw(data, options); }
Для начала добавляем тег и указываем ему желаемую ширину и высоту с помощью стилей. Также важен идентификатор через который скрипт будет вставлять выбранный график в элемент . Сам скрипт в сравнении с предыдущим примером сохраняет свою структуру и состоит из двух редактируемых частей - собственно данные для отображения на графике и различные его настройки. Через параметры hAxis и vAxis добавим для наглядности заголовки осей.
РезюмеУдобно, что сервис ориентирован на пользователей разного уровня подготовки. Можно скопировать прилагающиеся примеры и сразу же получить готовый график стандартного вида. Те пользователи, что станут досконально разбираться во множестве параметров, будут вознаграждены графиками сделанными по их вкусу и подобию дизайна сайта.
Сами графики выводятся достаточно оперативно, к тому же вызываемые файлы при первой загрузке кэшируются, поэтому последующее отображение графиков на сайте происходит быстрее. Поддерживаются все браузеры, включая старые версии Internet Explorer.
Документация сервиса на русский язык не переведена и доступна только на английском, что способно отпугнуть некоторых пользователей. На это есть только одна мантра - учите языки.
