Если ваш веб-сайт требует большого объема данных, вам нужно будет легко визуализировать эти данные, обычно с помощью библиотеки JavaScript-диаграмм. Тем не менее, таких библиотек насчитывается несколько десятков, и все они имеют немного разные возможности, так как узнать, какой из них лучше всего подходит для вас?
В этой статье я собираюсь представить AnyChart в виде 10 стильных, но простых в реализации примеров. Я покажу, как AnyChart отлично подходит для ваших нужд визуализации данных и с какой легкостью он может обрабатывать данные практически в любом формате.
Вы можете найти все примеры CodePen из этой статьи в нашей коллекции AnyChart на CodePen .
Почему AnyChart выделяется из толпы
Следующие пункты иллюстрируют, почему AnyChart является серьезным соперником на графике сцены. Они далеки от маркетинга, просто простые и простые факты.
AnyChart хорошо известна
AnyChart — это коммерческая библиотека , но она бесплатна для любого некоммерческого использования. Он очень хорошо зарекомендовал себя и был на рынке более 10 лет . Изначально AnyChart на основе Flash перешел на чистый JavaScript с визуализацией SVG / VML.
AnyChart API очень гибок и позволяет вам изменять практически любой аспект диаграммы на лету во время выполнения.
AnyChart — это семейство продуктов
AnyChart обычно представляет собой набор библиотек JS-диаграмм или, если хотите, семейство продуктов. Он включает в себя следующее:
- AnyChart — предназначен для создания интерактивных диаграмм всех основных типов
- AnyStock — предназначен для визуализации больших наборов данных на основе даты / времени
- AnyMap — для географических карт и мест
- AnyGantt — для решений по управлению проектами и ресурсами (диаграммы Ганта, ресурсов, PERT)
Однако эти библиотеки можно рассматривать как одну большую библиотеку диаграмм JavaScript (HTML5). Все они используют один и тот же API, все диаграммы настроены практически одинаково, у них общие темы , настройки и способы загрузки данных .
AnyChart открыт
Ранее в этом году AnyChart открыл исходный код для этих библиотек. Здесь важно отметить, что AnyChart не был полностью открытым исходным кодом — ни Apache, ни MIT, ни любая другая лицензия такого рода не была представлена. Но это все еще хорошая новость, если вы выбираете библиотеку для долгосрочного проекта. Кроме того, рендеринг AnyChart основан на полностью JavaScript-библиотеке JavaScript с открытым исходным кодом GraphicsJS , поддерживаемой AnyChart, но открытой для любых запросов и модификаций сообщества. Вы можете узнать больше о GraphicsJS в этой статье SitePoint .
Как руководитель отдела исследований и разработок в AnyChart, я мог бы целый день говорить об этой библиотеке, но теперь пришло время заняться делом.
И работа: быстрый старт с AnyChart
Чтобы начать использовать AnyChart на своей HTML-странице, вам нужно сделать всего три простых вещи. Первые два включают ссылку на файл JavaScript библиотеки и предоставляют элемент HTML уровня блока. Вот пример HTML-шаблона, который вы можете использовать:
<html lang="en"> <head> <meta charset="utf-8" /> <style> html, body, #container { width: 100%; height: 100%; } </style> <title>AnyChart Basic Example</title> </head> <body> <div id="container"></div> <script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script> <script> // AnyChart code here </script> </body> </html> Третий — это добавление кода 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 , а значение обычно помещается в поле value .
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 вы можете использовать ранее представленные методы Array of Array и Array of Object , но дополнительно указывать имена ваших рядов. Движок 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, созданной из массива массивов (в CodePen):
Несколько серий: массив объектов
Теперь давайте посмотрим, как вы можете создать многосерийную диаграмму, используя массив объектов.
Примечание: когда вы используете такие объекты, вы можете применять любые имена полей для значений.
Вот как это можно сделать:
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 — использовать таблицу, которая уже существует на странице. Это может быть чрезвычайно эффективным способом визуализации ключевых моментов в остальном скучном списке фигур. Чтобы это работало, вам нужно включить скрипт адаптера данных вместе с библиотекой диаграмм.
Тогда есть два варианта: вы можете извлекать данные из таблиц, созданных с помощью <table> или тегов <div> и CSS. Давайте посмотрим на оба.
Табличный тег
Если вы решите реализовать опцию тега table , ваш код может выглядеть следующим образом:
<table id="htmlTable"> <!-- Normal table markup here --> </table> <!-- Include the AnyChart library and data adapter --> <script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script> <script src="https://cdn.anychart.com/js/latest/data-adapter.min.js"></script>
Со следующим 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(); });
И вот как это выглядит на практике. Довольно аккуратно, я уверен, что вы согласитесь.
Данные отображаются с использованием регулярной разметки
Теперь давайте посмотрим, как это работает, когда вы создаете таблицу с тегами <div> и CSS:
<div class="table"> <div class="heading"> <div class="cell"> <p>Date</p> </div> ... </div> <div class="row"> <div class="cell"> <p>01/01</p> </div> ... </div> </div> <!-- Include the AnyChart library and data adapter --> <script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script> <script src="https://cdn.anychart.com/js/latest/data-adapter.min.js"></script>
Со следующим 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. Для этого (и следующих примеров) требуется скрипт адаптера данных, упомянутый ранее.
anychart.onDocumentReady(function() { // JSON data var json = { "chart": { "type": "column", "title": "AnyChart: Data from JSON", "series": [{ "seriesType": "Spline", "data": [ {"x": "P1", "value": "128.14"}, {"x": "P2", "value": "112.61"}, {"x": "P3", "value": "163.21"}, {"x": "P4", "value": "229.98"}, {"x": "P5", "value": "90.54"} ] }, { "seriesType": "Column", "data": [ {"x": "P1", "value": "90.54"}, {"x": "P2", "value": "104.19"}, {"x": "P3", "value": "150.67"}, {"x": "P4", "value": "120.43"}, {"x": "P5", "value": "200.34"} ] }], "container": "container" } }; // set JSON data chart = anychart.fromJson(json); // draw chart chart.draw(); });
Работа с данными XML
А если вам не нравится JSON, вы можете придерживаться XML, потому что диаграммы AnyChart также не имеют проблем с данными в формате XML. Как и в случае с JSON, AnyChart также предоставляет свои собственные XML-схемы . XML также хорошо подходит, когда вы собираетесь хранить настройки и данные в целом. И снова, AnyChart имеет несколько доступных методов сериализации XML, которые могут быть полезны при экспорте.
Вот пример кода многосерийной полярной диаграммы, созданной из настроек XML:
anychart.onDocumentReady(function() { // XML settings and data var xml = '<?xml version="1.0" encoding="utf-8"?>' + '<anychart xmlns="https://cdn.anychart.com/schemas/latest/xml-schema.xsd">' + '<chart type="polar" container="container">' + '<series_list>'+ '<series series_type="area">' + '<data>' + '<point x="0" value="0"/>'+ '<point x="50" value="100"/>'+ '<point x="100" value="0"/>'+ '</data>'+ '</series>'+ '<series series_type="line" stroke="red">' + '<data>' + '<point x="50" value="0"/>'+ '<point x="100" value="100"/>'+ '<point x="50" value="0"/>'+ '</data>'+ '</series>'+ '</series_list>'+ '<x_scale maximum="100"/>'+ '</chart>'+ '</anychart>'; // Set settings and data as XML chart = anychart.fromXml(xml); // draw chart chart.draw(); });
Вы можете взглянуть на пример XML-настроек AnyChart на CodePen :
Работа с данными, хранящимися в формате 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дляEyeshadows,249980 Eyeliner,213210 Eyebrow pencil,170670 Nail polish,143760 Pomade,128000 Lip gloss,110430 Mascara,102610 Foundation,94190 Rouge,80540 Powder,53540для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 (на CodePen) для иллюстрации:
Если поля в вашем CSV-файле упорядочены по-другому, данные могут быть загружены в набор данных и переназначены (я объясню, как это работает, в следующей статье, посвященной более сложному использованию библиотеки AnyChart). Вы также можете настроить разделители во время загрузки данных в набор данных.
Вывод
В этой статье я познакомил вас с JavaScript-библиотекой AnyChart. Я обрисовал его сильные стороны и продемонстрировал, как легко использовать его возможности для создания сложных и визуально привлекательных диаграмм всего за несколько строк кода. Я также продемонстрировал несколько способов передачи данных в AnyChart — от жестко закодированных структур данных до возможности загрузки более сложных файлов по сети.
Как уже упоминалось, я являюсь руководителем отдела исследований и разработок в AnyChart и был бы рад услышать любые отзывы, вопросы или идеи по улучшению, которые вы можете иметь в комментариях.
Полезные ссылки
- AnyChart Официальный сайт
- AnyChart Документация
- AnyChart API
- AnyChart Playground
- Официальный сайт GraphicsJS
- GraphicsJS Статья на SitePoint
Если вам понравилась эта статья, вам также может понравиться наш скринкаст « Создание иллюстрации в Sketch и ее экспорт в формате SVG на SitePoint Premium».