Построение графиков с помощью библиотеки  AnyChart с примерами

Если ваш сайт интенсивно работает с данными и вам нужно будет легко визуализировать эти данные, как правило, с помощью библиотеки графиков 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-шаблона, который вы можете использовать:

Третий — это добавление кода 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 — использовать таблицу, которая уже существует на странице. Это может быть чрезвычайно эффективным способом визуализации ключевых точек другого скучного списка цифр. Чтобы сделать эту работу, вам нужно будет добавить сценарий адаптера данных вместе с библиотекой диаграмм.

Затем есть два варианта: вы можете извлекать данные из таблиц, созданных с тегом