Highcharts — Обзор

Highcharts — это библиотека диаграмм на основе чистого JavaScript, предназначенная для улучшения веб-приложений путем добавления возможности интерактивного построения диаграмм. Он поддерживает широкий спектр графиков. Графики создаются с использованием SVG в стандартных браузерах, таких как Chrome, Firefox, Safari, Internet Explorer (IE). В устаревшем IE 6 VML используется для рисования графики.

Особенности библиотеки Highcharts

Давайте теперь обсудим несколько важных особенностей библиотеки Highcharts.

• Совместимость — работает без проблем на всех основных браузерах и мобильных платформах, таких как Android и iOS.

• Поддержка мультитача — поддерживает мультитач на платформах с сенсорным экраном, таких как Android и iOS. Идеально подходит для iPhone / iPad и смартфонов / планшетов на базе Android.

• Бесплатное использование — с открытым исходным кодом и бесплатное использование в некоммерческих целях.

• Легковесная — библиотека ядра highcharts.js размером почти 35 КБ — чрезвычайно легкая библиотека.

• Простые конфигурации — использует json для определения различных конфигураций диаграмм и очень прост в освоении и использовании.

• Динамический — позволяет изменять график даже после генерации графика.

• Несколько осей — Не ограничено осями x, y. Поддерживает несколько осей на графиках.

• Настраиваемые всплывающие подсказки — всплывающая подсказка появляется, когда пользователь наводит курсор мыши на любую точку графика. Highcharts предоставляет встроенный форматер всплывающей подсказки или форматера обратного вызова для программного управления подсказкой.

• Поддержка DateTime — специально обрабатывать дату и время. Обеспечивает многочисленные встроенные средства управления над категориями с указанием даты.

• Экспорт — Экспорт диаграммы в формат PDF / PNG / JPG / SVG с помощью функции экспорта.

• Печать — печать диаграммы с использованием веб-страницы.

• Zoomablity — поддерживает масштабирование диаграммы для более точного просмотра данных.

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

• Поворот текста — поддерживает вращение надписей в любом направлении.

Совместимость — работает без проблем на всех основных браузерах и мобильных платформах, таких как Android и iOS.

Поддержка мультитача — поддерживает мультитач на платформах с сенсорным экраном, таких как Android и iOS. Идеально подходит для iPhone / iPad и смартфонов / планшетов на базе Android.

Бесплатное использование — с открытым исходным кодом и бесплатное использование в некоммерческих целях.

Легковесная — библиотека ядра highcharts.js размером почти 35 КБ — чрезвычайно легкая библиотека.

Простые конфигурации — использует json для определения различных конфигураций диаграмм и очень прост в освоении и использовании.

Динамический — позволяет изменять график даже после генерации графика.

Несколько осей — Не ограничено осями x, y. Поддерживает несколько осей на графиках.

Настраиваемые всплывающие подсказки — всплывающая подсказка появляется, когда пользователь наводит курсор мыши на любую точку графика. Highcharts предоставляет встроенный форматер всплывающей подсказки или форматера обратного вызова для программного управления подсказкой.

Поддержка DateTime — специально обрабатывать дату и время. Обеспечивает многочисленные встроенные средства управления над категориями с указанием даты.

Экспорт — Экспорт диаграммы в формат PDF / PNG / JPG / SVG с помощью функции экспорта.

Печать — печать диаграммы с использованием веб-страницы.

Zoomablity — поддерживает масштабирование диаграммы для более точного просмотра данных.

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

Поворот текста — поддерживает вращение надписей в любом направлении.

Поддерживаемые типы диаграмм

Библиотека Highcharts предоставляет следующие типы диаграмм —

Линейные графики

Используется для построения графиков на основе линий / сплайнов.

Диаграммы области

Используется для рисования площадных графиков.

Круговые диаграммы

Используется для рисования круговых диаграмм.

Точечные диаграммы

Используется для рисования разбросанных диаграмм.

Пузырьковые диаграммы

Используется для рисования пузырьковых диаграмм.

Динамические Графики

Используется для рисования динамических диаграмм, где пользователь может изменять диаграммы.

Комбинации

Используется для рисования комбинаций различных графиков.

3D-графики

Используется для рисования трехмерных диаграмм.

Угловые Датчики

Используется для построения диаграмм типа спидометра.

Тепловые карты

Используется для рисования тепловых карт.

Древовидные карты

Используется для рисования древовидных карт.

В наших последующих главах мы подробно обсудим каждый тип вышеупомянутых диаграмм с примерами.

Лицензия

Highcharts является открытым исходным кодом и может свободно использоваться в некоммерческих целях. Чтобы использовать Highcharts в коммерческих проектах, перейдите по ссылке — Лицензия и Ценообразование.

Highcharts — Настройка среды

В этой главе мы обсудим, как настроить библиотеку Highcharts для использования в разработке веб-приложений.

Highcharts требует jQuery в качестве зависимости. Сначала мы установим библиотеку jQuery, а затем библиотеку Highcharts.

Установите jQuery

Есть два способа использовать jQuery.

• Скачать — скачать его локально с jQuery.com и использовать его.

• Доступ к CDN — у вас также есть доступ к CDN. CDN предоставит вам доступ по всему миру к региональным дата-центрам; в этом случае Google хост. Это означает, что использование CDN переносит ответственность за размещение файлов с ваших собственных серверов на ряд внешних. Это также дает преимущество в том, что если посетитель вашей веб-страницы уже загрузил копию jQuery из той же CDN, ее не нужно будет повторно загружать.

Скачать — скачать его локально с jQuery.com и использовать его.

Доступ к CDN — у вас также есть доступ к CDN. CDN предоставит вам доступ по всему миру к региональным дата-центрам; в этом случае Google хост. Это означает, что использование CDN переносит ответственность за размещение файлов с ваших собственных серверов на ряд внешних. Это также дает преимущество в том, что если посетитель вашей веб-страницы уже загрузил копию jQuery из той же CDN, ее не нужно будет повторно загружать.

Использование загруженного jQuery

Включите файл jQuery JavaScript в HTML-страницу, используя следующий скрипт:

<head>
   <script src = "/jquery/jquery.min.js"></script>
</head>

Использование CDN

В этом руководстве мы используем CDN-версии библиотеки jQuery.

Включите файл jQuery JavaScript в HTML-страницу, используя следующий скрипт:

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
   </script>
</head>

Установить Highcharts

Ниже приведены два способа использования Highcharts.

• Скачать — скачать его локально с highcharts.com и использовать его.

• Доступ к CDN — у вас также есть доступ к CDN. CDN предоставит вам доступ по всему миру к региональным дата-центрам; в этом случае хост Highcharts — Code.Highcharts.Com.

Скачать — скачать его локально с highcharts.com и использовать его.

Доступ к CDN — у вас также есть доступ к CDN. CDN предоставит вам доступ по всему миру к региональным дата-центрам; в этом случае хост Highcharts — Code.Highcharts.Com.

Использование загруженных Highcharts

Включите JavaScript-файл Highcharts на HTML-страницу, используя следующий скрипт:

<head>
   <script src = "/highcharts/highcharts.js"></script>
</head>

Использование CDN

В этом уроке мы используем CDN-версии библиотеки Highcharts.

Включите JavaScript-файл Highcharts на HTML-страницу, используя следующий скрипт:

<head>
   <script src = "https://code.highcharts.com/highcharts.js"></script>
</head>

Highcharts — Синтаксис конфигурации

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

Шаг 1: Создать страницу HTML

Создайте страницу HTML с библиотеками jQuery и Highcharts.

HighchartsTestHarness.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      
      <script language = "JavaScript">
         $(document).ready(function() {
         });
      </script>
      
   </body>
</html>

Здесь контейнер div используется для хранения диаграммы, построенной с использованием библиотеки Highcharts.

Шаг 2. Создание конфигураций

Библиотека Highcharts использует очень простые конфигурации с использованием синтаксиса json.

$('#container').highcharts(json);

Здесь json представляет данные и конфигурацию json, которые библиотека Highcharts использует для построения диаграммы внутри контейнера контейнера с использованием метода highcharts (). Теперь мы настроим различные параметры для создания требуемой строки json.

заглавие

Настройте заголовок диаграммы.

var title = {
   text: 'Monthly Average Temperature'   
};

подзаголовок

Настройте подзаголовок диаграммы.

var subtitle = {
   text: 'Source: WorldClimate.com'
};

XAxis

Настройте тикер для отображения на оси X.

var xAxis = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
      ,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

YAxis

Настройте заголовок, линии графика, которые будут отображаться на оси Y.

var yAxis = {
   title: {
      text: 'Temperature (\xB0C)'
   },
   plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
   }]
};  

подсказка

Настройте всплывающую подсказку. Поставьте суффикс, который будет добавлен после значения (ось Y).

var tooltip = {
   valueSuffix: '\xB0C'
}

легенда

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

var legend = {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   borderWidth: 0
};

серии

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

var series = [
   {
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, 
   {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
   }, 
   {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   }, 
   {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }
];

Шаг 3: Сборка данных JSON

Объедините все конфигурации.

var json = {};

json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;

Шаг 4: Нарисуйте график

$('#container').highcharts(json);

пример

Рассмотрим следующий пример, чтобы лучше понять синтаксис конфигурации —

highcharts_configuration.htm

Live Demo

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text: 'Monthly Average Temperature'   
            };
            var subtitle = {
               text: 'Source: WorldClimate.com'
            };
            var xAxis = {
               categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            };
            var yAxis = {
               title: {
                  text: 'Temperature (\xB0C)'
               },
               plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
               }]
            };   

            var tooltip = {
               valueSuffix: '\xB0C'
            }
            var legend = {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'middle',
               borderWidth: 0
            };
            var series =  [{
                  name: 'Tokyo',
                  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                     26.5, 23.3, 18.3, 13.9, 9.6]
               }, 
               {
                  name: 'New York',
                  data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
                     24.1, 20.1, 14.1, 8.6, 2.5]
               }, 
               {
                  name: 'Berlin',
                  data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
                     17.9, 14.3, 9.0, 3.9, 1.0]
               }, 
               {
                  name: 'London',
                  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
                     16.6, 14.2, 10.3, 6.6, 4.8]
               }
            ];

            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;

            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>