Наверняка Вы сталкивались с тем, когда надо начинать проект с самого нуля, а базового пустого шаблона нет. Ну естсесвенно Вам лень его писать самому с нуля, по этому приготовь пальцы на ctrl+с.
Если ваш сайт интенсивно работает с данными и вам нужно будет легко визуализировать эти данные, как правило, с помощью библиотеки графиков JavaScript. Однако таких библиотек существует несколько десятков, и все они имеют несколько разные возможности.
В этой статье мы рассмотрим AnyChart с помощью 10 стильных, но простых в использовании примеров. AnyChart отлично подходит для Ваших потребностей в визуализации данных и простоты, с которой он может обрабатывать данные практически в любом формате.
Почему AnyChart
AnyChart — коммерческая библиотека, она бесплатна для любого некоммерческого использования. Очень хорошо зарекомендовала себя и находится на рынке уже более 10 лет. Первоначально использовался Flash-based AnyChart, но потом перешел на чистый JavaScript с SVG / VML-рендерингом.
API AnyChart очень гибкий и позволяет изменять практически любой аспект диаграммы «на лету» во время выполнения.
AnyChart — семейство продуктов
AnyChart — предназначен для создания интерактивных графиков всех основных типов
AnyStock — предназначен для визуализации больших наборов данных на основе даты / времени
AnyMap — для карт географии и мест
AnyGantt — для решений по управлению проектами и ресурсами (Gantt, ресурс, диаграммы PERT)
Однако эти библиотеки можно рассматривать как одну большую библиотеку диаграмм JavaScript (HTML5). Все они имеют один и тот же API, все диаграммы сконфигурированы практически одинаково, они имеют общие темы, настройки и способы загрузки данных.
Быстрый запуск с AnyChart
Чтобы начать использовать AnyChart на вашей HTML-странице, вам нужно сделать всего три простых вещи. Первые два включают ссылку на файл JavaScript библиотеки и предоставление элемента HTML на уровне блока.
Вот образец HTML-шаблона, который вы можете использовать:
AnyChart Basic Example
Третий — это добавление кода JavaScript, который создает простую интерактивную диаграмму столбцов одной серии:
anychart.onDocumentLoad(function() {
// create chart and set data
var chart = anychart.column([
["Winter", 2],
["Spring", 7],
["Summer", 6],
["Fall", 10]
]);
// set chart title
chart.title("AnyChart Basic Sample");
// set chart container and draw
chart.container("container").draw();
});
И это все! Вот что у нас получилось.
Легко, правда? Но все становится проще и гибче в AnyChart, когда дело доходит до установки данных. Перейдем к следующему разделу, чтобы более подробно рассмотреть это.
Получение данных в AnyChart
Одна из особенностей, которая делает AnyChart, заключается в том, что он может работать с данными в самых разных форматах. Какой из них вы выберете, в конечном счете, будет зависеть от поставленной задачи (и в некоторой степени ваших личных предпочтений), но гибкий подход AnyChart делает его очень подходящим для практически любого проекта.
Данные из массива
Фактически, вы уже видели первый способ в разделе «Быстрый старт с AnyChart» выше. Используя этот метод, вы объявляете свои данные в виде массива массивов, а AnyChart делает все остальное. Этот метод является кратким, а также простым в форматировании и использовании.
anychart.onDocumentLoad(function() {
// create chart and set data
// as Array of Arrays
var chart = anychart.pie([
["Peter", 5],
["John", 7],
["James", 9],
["Jacob", 12]
]);
chart.title("AnyChart: Array of Arrays");
chart.container("container").draw();
});
Обратите внимание, что изменение типа диаграммы так же просто, как изменение вызова метода из anychart.column () на anychart.pie (). Я буду демонстрировать различные типы диаграмм в этой статье, но вы можете найти полный обзор здесь: Типы диаграмм и комбинации.
Массив объектов
Второй способ очень похож на первый — установка данных в виде массива объектов. Фактически, он менее компактен, но все еще очень прост в форматировании, чтении и понимании. Кроме того, этот формат позволяет вам настраивать отдельные точки из ваших данных, которые также могут обрабатываться другими способами, но только с дополнительными сопоставлениями.
Примечание: когда вы используете данные в объектах в подобной ситуации, используйте соответствующие имена для полей аргументов и значений. Об этом вы можете найти в документации AnyChart для каждого типа диаграммы. В большинстве случаев аргумент равен x, и значение обычно помещается в поле значения.
anychart.onDocumentLoad(function() {
// create chart and set data
// as Array of Objects
// the biggest point is marked with individually conigured marker
var chart = anychart.line([
{x: "Winter", value: 5},
{x: "Spring", value: 9, marker: {enabled: true, type: "star5", fill: "Gold"}},
{x: "Summer", value: 7},
{x: "Fall", value: 1}
]);
chart.title("AnyChart: Array of Objects");
chart.container("container").draw();
});
Создание диаграмм нескольких рядов
Графики с несколькими сериями представляют собой диаграммы, которые позволяют отображать максимумы и минимумы множества наборов данных, а также сравнивать их. При создании нескольких диаграмм серии с AnyChart вы можете использовать ранее введенные методы, но дополнительно укажите имена вашей серии. Двигатель AnyChart позаботится обо всем остальном.
anychart.onDocumentLoad(function() {
// create chart and set data
// as Array of Arrays
var chart = anychart.line()
chart.data({header: ["#", "Euro (€)", "USD ($)", "Pound (£)"],
rows:[
["Winter", 5, 7, 4],
["Spring", 7, 9, 6],
["Summer", 9, 12, 8],
["Fall", 12, 15, 9]
]});
chart.title("AnyChart: Multi-Series Array of Arrays");
chart.legend(true);
chart.container("container").draw();
});
Несколько рядов: массив объектов
Теперь давайте посмотрим, как вы можете создать диаграмму с несколькими сериями, используя массив объектов.
Примечание. При использовании таких объектов вы можете применять любые имена полей для значений.
Вот как это можно сделать:
anychart.onDocumentLoad(function() {
// create chart and set data
// as Array of Objects
var chart = anychart.column();
chart.data({header: ["#", "Euro (€)", "USD ($)", "Pound (£)"],
rows:[
{x: "Winter", usd: 5, eur: 4, pound: 3},
{x: "Spring", usd: 3, eur: 3, pound: 3},
{x: "Summer", usd: 2, eur: 5, pound: 3},
{x: "Fall", usd: 4, eur: 2, pound: 3}
]});
chart.title("Array of Objects");
chart.legend(true);
chart.container("container").draw();
});
Отображение данных из таблицы HTML
Другой способ загрузки данных в AnyChart — использовать таблицу, которая уже существует на странице. Это может быть чрезвычайно эффективным способом визуализации ключевых точек другого скучного списка цифр. Чтобы сделать эту работу, вам нужно будет добавить сценарий адаптера данных вместе с библиотекой диаграмм.
Затем есть два варианта: вы можете извлекать данные из таблиц, созданных с тегом
, или с тегами
и CSS. Давайте посмотрим на обоих.
Тег таблицы Если вы решите реализовать параметр тега таблицы, ваш код может выглядеть так:
Со следующим JavaScript:
anychart.onDocumentLoad(function() {
// create chart and set data
var chart = anychart.column();
// parse table
var tableData = anychart.data.parseHtmlTable("#htmlTable");
chart.data(tableData);
chart.legend(true);
// set chart container and draw
chart.container("container").draw();
});
И вот на что это похоже на практике.
Отображаемые данные с использованием обычной разметки
Теперь давайте посмотрим, как это работает при создании таблицы с тегами
и CSS:
Date
...
01/01
...
Со следующим JavaScript:
anychart.onDocumentLoad(function() {
// create a chart and set the data
var chart = anychart.column();
var tableData = anychart.data.parseHtmlTable(
".table", ".row", ".cell p", ".heading .cell p", ".title"
);
chart.data(tableData);
chart.legend(true);
// set chart container and draw
chart.container("container").draw();
});
Вы видите, что можно установить селектора CSS для строк, заголовков и заголовков таблицы. В принципе, вам не нужно настраивать саму таблицу — вы можете настроить сценарий и получить данные из разметки.
Работа с данными JSON
В диаграммах AnyChart нет проблем с обработкой данных в чистом формате JSON. Фактически AnyChart работает так хорошо с JSON, что даже предоставляет свои собственные схемы JSON. JSON — отличный формат данных, если, например, вы хотите сохранить настройки и данные вместе. AnyChart также имеет ряд методов сериализации JSON, которые могут помочь в экспорте.
Таким образом, вы создадите диаграмму комбинаций столбцов и сплайнов из данных JSON. В этом (и следующих примерах) требуется сценарий адаптера данных, упомянутый ранее.
И если вам не нравится JSON, вы можете придерживаться XML, поскольку диаграммы AnyChart также не имеют проблем с данными в формате XML. Как и в JSON, AnyChart также предоставляет свои собственные XML-схемы. XML также хорошо подходит, когда вы собираетесь хранить настройки и данные в целом. И снова, AnyChart имеет ряд методов сериализации XML, которые могут быть полезны при экспорте.
Вот пример кода полярной диаграммы с несколькими сериями, созданной из настроек XML:
anychart.onDocumentReady(function() {
// XML settings and data
var xml = '' +
'' +
'' +
''+
'' +
'' +
''+
''+
''+
''+
''+
'' +
'' +
''+
''+
''+
''+
''+
''+
''+
''+
'';
// Set settings and data as XML
chart = anychart.fromXml(xml);
// draw chart
chart.draw();
});
Работа с данными в формате CSV
Последнее, что я хотел бы продемонстрировать — это то, как вы можете работать с данными, хранящимися в формате CSV. AnyChart поддерживает это из коробки, с некоторыми дополнительными параметрами конфигурации (например, что используется в качестве разделителя). CSV является широко известным и часто используемым форматом. Он хорош для больших наборов данных и обеспечивает возможность экономии полосы пропускания. Вы можете загружать данные из CSV (как показано ниже), отображать их и затем внедрять в свои диаграммы.
Самый простой способ загрузить CSV-файл в диаграмму JS AnyChart — это если файл фактически разделен запятой, содержит аргумент в первом столбце и не имеет заголовка, то есть выглядит примерно так:
Eyeshadows,249980
Eyeliner,213210
Eyebrow pencil,170670
Nail polish,143760
Pomade,128000
Lip gloss,110430
Mascara,102610
Foundation,94190
Rouge,80540
Powder,53540
Загрузка такого CSV-файла в диаграмму:
anychart.onDocumentReady(function () {
anychart.data.loadCsvFile("https://cdn.anychart.com/charts-data/data_csv.csv", function (data) {
// create chart from loaded data
chart = anychart.bar(data);
// set title
chart.title("AnyChart from CSV File");
// draw chart
chart.container("container").draw();
});
});
Если поля в вашем файле CSV упорядочены по-другому, данные могут быть загружены в набор данных и переназначены (я объясню, как это работает в следующей статье, посвященной более продвинутому использованию библиотеки AnyChart). Вы также можете настраивать разделители во время загрузки данных в набор данных.
Вывод
В этой статье я познакомил вас с библиотекой диаграмм AnyChart JavaScript. Я изложил свои сильные стороны и продемонстрировал, насколько легко использовать свою силу для создания сложных и визуально привлекательных графиков всего в нескольких строках кода. Я также продемонстрировал ряд способов получения данных в AnyChart, начиная от жестко кодированных структур данных и заканчивая возможностью загрузки более сложных файлов по сети.
Согласно Buzz Angle Music, в первом квартале 2017 года в США было потреблено всего 83 миллиарда аудиопотоков. Это на 61,2% больше, чем в предыдущем квартале. Между тем продажи музыки упали на 23,8%.
Одним из преимуществ потоковой передачи является то, что аудитория может наслаждаться своей любимой музыкой в режиме онлай, не беспокоясь о памяти на своих устройствах. Все больше людей, особенно молодое поколение, обнаруживают это удобство, поскольку интернетом пользуются все больше и больше.
1. MediaElement.js
В настоящее время один из лучших медиа-плееров с открытым исходным кодом для сайтов. MediaElement.js поддерживает как видео, так и аудио и способен воспроизводить медиафайлы из своих и сторонних источников, таких как SoundCloud, YouTube, DailyMotion, Vimeo и Twitch. Он может быть настроен с использованием ванильного JavaScript, jQuery, Node, Meteor, Require.js и React
Причина, по которой я оценил этот медиаплеер, — это то, что он все еще активно развивается. Это означает, что проблемы будут устранены быстрее, и, скорее всего, они будут обновлены с последними стандартами HTML5 и поддержкой браузера.
SoundManager 2 создан для упрощения аудио на настольные и мобильные платформы. Он имеет мощный API, который использует HTML5 аудио, где поддерживается, и, при необходимости, возвращается обратно в Flash. Он не имеет внешних зависимостей и может использоваться с другими фреймворками JavaScript, такими как jQuery. Документация является высшей отметкой, что позволяет разработчикам настраивать ее для своих нужд. Он поддерживает списки воспроизведения и множество скинов доступны из сборки. Некоторые из этих веб-сайтов используют Last.fm и BeatsMusic.
Развитие этого аудиоплеера замедлилось, но сообщество с открытым исходным кодом отлично справляется с решением проблем, о которых сообщают пользователи. Sound Manager 2 действительно хорошо разработан и по-прежнему совместим с последними стандартами браузера. В настоящее время он поддерживает все основные браузеры, включая IE6, Safari и Android.
Если вы ищете версию jPlayer, которая не имеет зависимости от jQuery, тогда вам повезло (то есть, если вы разработчик React). В настоящее время он поддерживает как аудио, так и видео. Поддерживаются современные браузеры от IE9 и всех современных мобильных платформ. Это означает, что старые браузеры, такие как IE6 и IE7, не поддерживаются (неважно). Он не использует Flash как резерв, так как iOS и Chrome официально отказались от поддержки.
Проект, похоже, был запущен несколько месяцев назад, и он уже получил 520 загрузок за последний месяц. Из представленной демонстрации все функции, как представляется, работают правильно как на настольных, так и на мобильных устройствах. В настоящее время плейлисты не поддерживаются. Это будет реализовано в следующем пакете с именем react-jPlaylist.
Будучи проектом React, это, очевидно, ограничивает использование в других интерфейсных JavaScript-фреймах, таких как Vue.js. Однако у него есть огромное количество настраиваемых функций, что делает его идеальным для создания нового современного веб-сайта для потоковой передачи музыки.
Этот чрезвычайно популярный аудиоплеер HTML5 приносит замечательное количество возможностей пользователям. Он поддерживает широкий спектр функций и выглядит так, как показано на странице предварительного просмотра, включая полноэкранное слайд-шоу.
Поддерживает всплывающие окна, позволяющие посетителям продолжить просмотр вашего сайта без прерывания аудиопотока. Несколько экземпляров аудиоплеера также поддерживаются на одной странице.
Это плагин WordPress, который преобразует ваш стандартный сайт WordPress в музыкальный сайт. Он полностью реагирует и имеет возможность добавлять плейлисты и треки на страницу. Он также поддерживает всплывающие окна для воспроизведения без прерывания воспроизведения. Вы можете добавить FullWidth Audio Player внизу на любую страницу WordPress или опубликовать с помощью коротких кодов. SoundCloud также поддерживается.
Это отзывчивый, готовый сетчатки, аудиоплеер HTML5, который поставляется с 3 скинами из сборки. Поддерживаются все мобильные и современные браузеры, включая IE7 +. Он поддерживает воспроизведение аудио с YouTube, а также SoundCloud. Разработчики могут настраивать пользовательский интерфейс игрока через SASS или CSS. Разработчик компонента также предоставил версию WordPress.
Это аудио и видеопроигрыватель для тех, кто хотел бы развлекать своих онлайн-посетителей стильным аудиоплеером. Он реагирует и поддерживает все современные браузеры и мобильные платформы. Он имеет обширный API, который поддерживает YouTube, SoundCloud, Podcasts, Official.fm, SHOUTcast и Icecast. Он также поддерживает внешние источники, такие как Google Диск и Amazon S3.
На момент написания этого проекта недавно был обновлен этот проект. Качество поддержки кажется наивысшим, поскольку разработчик очень быстро решает проблемы по мере их возникновения.
JPlayer 2 — это аудио и видео плагин jQuery с поддержкой HTML5 и Adobe Flash в качестве резервного. Он поддерживает все основные браузеры, включая IE6 +, Safari, Chrome, Mozilla, IOS, Android и Blackberry. Его документация обширна, что позволяет разработчикам настраивать ее на свои нужды. В нем есть поддержка плейлистов, и несколько тем предоставляются из коробки. Он используется такими организациями, как Pandora, BBC и Aljazeera.
К сожалению, этот большой плагин пренебрегал сообществом open-source. Проблемы накопились и быстро отстают от современных стандартов браузера. Однако есть хорошие новости. Планы для jPlayer 3 уже ведутся. Цель состоит в том, чтобы принести ряд улучшений, включая удаление зависимости jQuery, что позволяет использовать ее в других средах.
Gear — это аудио-плеер с поддержкой HTML без звука, основанный на jQuery, с потрясающим пользовательским интерфейсом. Он имеет гладкую анимацию SVG, уникальный эквалайзер холста и поддержку SoundCloud. Он имеет мобильный отзывчивый дизайн, плейлист JSON, круговой трекбэк и пристыкованный мини-плеер.
Кстати, SoundManager 2 зачисляется как один из проектов, используемых для создания этого прекрасного аудиоплеера.
TPlayer — это плеер на основе jQuery для WordPress. Он поддерживает воспроизведение аудиофайлов MP3, а также потоковую передачу из SoundCloud, SHOUTcast и Icecast. Он имеет большой дизайн UX на планшетных и смартфонных устройствах и включает в себя анимацию SVG.
Этот список дает вам некоторые из лучших открытых и коммерческих аудиоплееров, доступных в настоящее время. Несмотря на то, что название этой статьи относится к аудиоплееру jQuery, обычно происходит переход на удаление зависимости jQuery от исходного кода. Это позволит интегрировать аудиоплеер в рамки JavaScript, где jQuery не требуется.
Выбирая аудиоплеер для вашего сайта, вы должны быть заинтересованы в том, как часто он получает обновления. Это происходит потому, что браузеры обновляются, что иногда ломает некоторые функции, используемые аудиоплеером.
Коммерческие аудиоплееры HTML5 отлично подходят, если они содержат целевые функции, необходимые для вашего сайта. Обычно они поставляются с несколькими скинами, а также возможностью настраивать еще больше с помощью CSS. Абоненты с открытым исходным кодом HTML5 тоже великолепны, если у вас ограниченный бюджет или вы просто хотите поэкспериментировать. Лицензия с открытым исходным кодом позволяет полностью настраивать функции, добавляя новый код или сторонние библиотеки, чтобы создать новый тип аудиоплеера с уникальными функциями.
Этот список не может быть всеобъемлющим, но я надеюсь, что, по крайней мере, он дает вам представление о том, что доступно там. У вас есть плагин, чтобы рекомендовать? Я пропустил ваш любимый аудиоплеер? Дай мне знать в комментариях!
Обсудить проект
закрыть