Google Charts — Обзор

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

Характеристики

Ниже приведены основные функции библиотеки Google Charts.

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

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

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

• Легковесная библиотека ядра loader.js, чрезвычайно легкая библиотека.

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

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

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

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

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

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

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

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

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

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

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

Легковесная библиотека ядра loader.js, чрезвычайно легкая библиотека.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Диаграммы Санки, Точечные диаграммы, Ступенчатые диаграммы, Таблица, Временные шкалы, Древовидная карта, Трендовые линии

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

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

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

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

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

Комбинации

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

3D-графики

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

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

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

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

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

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

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

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

Лицензия

Google Charts является открытым исходным кодом и бесплатна для использования. Перейдите по ссылке: Условия использования .

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

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

Установите Google Charts

Существует два способа использования Google Charts.

• Загрузить — загрузите его локально с https://developers.google.com/chart и используйте его.

• Доступ к CDN — у вас также есть доступ к CDN. CDN предоставит вам доступ по всему миру к региональным дата-центрам, которые в этом случае размещаются на Google Chart https://www.gstatic.com/charts .

Загрузить — загрузите его локально с https://developers.google.com/chart и используйте его.

Доступ к CDN — у вас также есть доступ к CDN. CDN предоставит вам доступ по всему миру к региональным дата-центрам, которые в этом случае размещаются на Google Chart https://www.gstatic.com/charts .

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

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

<head>
   <script src = "/googlecharts/loader.js"></script>
</head>

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

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

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

<head>
   <script src = "https://www.gstatic.com/charts/loader.js"></script>
</head>

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

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

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

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

googlecharts_configuration.htm

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
   </body>
</html>

Здесь контейнер div используется для хранения диаграммы, построенной с использованием библиотеки Google Chart. Здесь мы загружаем последнюю версию API-интерфейса corecharts, используя метод google.charts.load.

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

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

// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);

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

заглавие

Настройте параметры диаграммы.

// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
   'width':550,
   'height':400};

Таблица данных

Настройте данные для отображения на графике. DataTable — это специальная таблица со структурированной коллекцией, которая содержит данные диаграммы. Столбцы таблицы данных представляют легенды, а строки представляют соответствующие данные. Метод addColumn () используется для добавления столбца, где первый параметр представляет тип данных, а второй параметр представляет легенду. Метод addRows () используется для добавления строк соответственно.

// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
   ['Firefox', 45.0],
   ['IE', 26.8],
   ['Chrome', 12.8],
   ['Safari', 8.5],
   ['Opera', 6.2],
   ['Others', 0.7]
]);

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

// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);

пример

Ниже приведен полный пример —

googlecharts_configuration.htm

Live Demo

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Browser');
            data.addColumn('number', 'Percentage');
            data.addRows([
               ['Firefox', 45.0],
               ['IE', 26.8],
               ['Chrome', 12.8],
               ['Safari', 8.5],
               ['Opera', 6.2],
               ['Others', 0.7]
            ]);
               
            // Set chart options
            var options = {'title':'Browser market shares at a specific website, 2014', 'width':550, 'height':400};

            // Instantiate and draw the chart.
            var chart = new google.visualization.PieChart(document.getElementById ('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

google.charts.setOnLoadCallback(drawChart);

//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Fruit', 'Jane', 'John', 'Average'],
               ['Apples', 3, 2, 2.5],
               ['Oranges', 2, 3, 2.5],
               ['Pears', 1, 5, 3],
               ['Bananas', 3, 9, 6],
               ['Plums', 4, 2, 3]      
            ]);
              
            // Set chart options
            var options = {
               title : 'Fruits distribution',
               vAxis: {title: 'Fruits'},
               hAxis: {title: 'Person'},
               seriesType: 'bars',
               series: {2: {type: 'line'}}
            };

            // Instantiate and draw the chart.
            var chart = new google.visualization.ComboChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['orgchart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();   
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');

            // For each orgchart box, provide the name, manager, and tooltip to show.
            data.addRows([
               [{v:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
               [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
               ['Alice', 'Robert', ''],
               ['Bob', 'Jim', 'Bob Sponge'],
               ['Carol', 'Bob', '']
            ]);			

            // Set chart options
            var options = {allowHtml:true};
                  
            // Instantiate and draw the chart.
            var chart = new google.visualization.OrgChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

//table chart
var chart = new google.visualization.Table(document.getElementById('container'));

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['table']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('number', 'Salary');
            data.addColumn('boolean', 'Full Time Employee');
            data.addRows([
               ['Mike',  {v: 10000, f: '$10,000'}, true],
               ['Jim',   {v:8000,   f: '$8,000'},  false],
               ['Alice', {v: 12500, f: '$12,500'}, true],
               ['Bob',   {v: 7000,  f: '$7,000'},  true]
            ]);

            var options = {
               showRowNumber: true,
               width: '100%', 
               height: '100%'
            };
                  
            // Instantiate and draw the chart.
            var chart = new google.visualization.Table(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript" src = "https://www.google.com/jsapi">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['treemap']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            var data = google.visualization.arrayToDataTable([
               ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
               ['Global',    null,                 0,                               0],
               ['America',   'Global',             0,                               0],
               ['Europe',    'Global',             0,                               0],
               ['Asia',      'Global',             0,                               0],
               ['Australia', 'Global',             0,                               0],
               ['Africa',    'Global',             0,                               0],  
               
               ['USA',       'America',            52,                              31],
               ['Mexico',    'America',            24,                              12],
               ['Canada',    'America',            16,                              -23],
               
               ['France',    'Europe',             42,                              -11],
               ['Germany',   'Europe',             31,                              -2],
               ['Sweden',    'Europe',             22,                              -13],   
               
               ['China',     'Asia',               36,                              4],
               ['Japan',     'Asia',               20,                              -12],
               ['India',     'Asia',               40,                              63],                  
               
               ['Egypt',     'Africa',             21,                              0],          
               ['Congo',     'Africa',             10,                              12],
               ['Zaire',     'Africa',             8,                               10]
            ]);
            var options = {      
               minColor: '#f00',
               midColor: '#ddd',
               maxColor: '#0d0',
               headerHeight: 15,
               fontColor: 'black',
               showScale: true
            };
                  
            // Instantiate and draw the chart.
            var chart = new google.visualization.TreeMap(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>