Учебники

Google Charts – Краткое руководство

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 предоставляет следующие типы диаграмм —

Sr.No. Тип диаграммы и описание
1

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

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

2

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

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

3

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

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

4

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

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

5

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

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

6

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

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

7

Комбинации

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

8

3D-графики

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

9

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

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

10

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

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

11

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комбинации

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

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>

Следующий код вызывает функцию drawChart для рисования графика, когда библиотека Google Chart полностью загружена.

google.charts.setOnLoadCallback(drawChart);

Результат

Проверьте результат.

Google Charts — Area Charts

Диаграммы площадей используются для построения диаграмм площадок. В этом разделе мы собираемся обсудить следующие типы диаграмм на основе областей.

Sr.No. Тип диаграммы и описание
1 Основная площадь

Основная диаграмма области

2 Площадь с отрицательными значениями

Диаграмма площади, имеющая отрицательные значения.

3 Сложенная область

Диаграмма с областями, сложенными друг на друга.

4 Процентная площадь

Диаграмма с данными в процентах.

5 Площадь с пропущенными точками

Диаграмма с отсутствующими точками в данных.

6 Перевернутые оси

Площадь с использованием перевернутых осей.

Основная диаграмма области

Диаграмма площади, имеющая отрицательные значения.

Диаграмма с областями, сложенными друг на друга.

Диаграмма с данными в процентах.

Диаграмма с отсутствующими точками в данных.

Площадь с использованием перевернутых осей.

Google Charts — Гистограммы

Гистограммы используются для рисования гистограмм. В этом разделе мы собираемся обсудить следующие типы гистограмм.

Sr.No. Тип диаграммы и описание
1 Базовый Бар

Основная гистограмма

2 Сгруппированная гистограмма

Сгруппированная гистограмма.

3 С накоплением бар

Гистограмма, имеющая планку, наложенную друг на друга.

4 Отрицательный Сложенный бар

Гистограмма с отрицательным стеком.

5 Процент с накоплением бар

Гистограмма с данными в процентах.

6 Столбчатая диаграмма материала

Гистограмма, вдохновленная дизайном материалов.

7 Гистограмма с метками данных

Гистограмма с метками данных.

Основная гистограмма

Сгруппированная гистограмма.

Гистограмма, имеющая планку, наложенную друг на друга.

Гистограмма с отрицательным стеком.

Гистограмма с данными в процентах.

Гистограмма, вдохновленная дизайном материалов.

Гистограмма с метками данных.

Google Charts — Bubble Charts

Пузырьковые диаграммы используются для рисования пузырьковых диаграмм. В этом разделе мы собираемся обсудить следующие типы пузырьковых диаграмм.

Sr.No. Тип диаграммы и описание
1 Основной пузырь

Базовая пузырьковая диаграмма.

2 Пузырьковая диаграмма с метками данных

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

Базовая пузырьковая диаграмма.

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

Google Charts — Календарные диаграммы

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

Sr.No. Тип диаграммы и описание
1 Основной календарь

Базовая календарная диаграмма.

2 Календарь с индивидуальными цветами

Индивидуальная календарная диаграмма.

Базовая календарная диаграмма.

Индивидуальная календарная диаграмма.

Google Charts — Свечной график

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

Sr.No. Тип диаграммы и описание
1 Основной Подсвечник

Базовая свечная диаграмма.

2 Подсвечник с индивидуальными цветами

Индивидуальная Диаграмма Подсвечника.

Базовая свечная диаграмма.

Индивидуальная Диаграмма Подсвечника.

Google Charts — Столбчатые диаграммы

Столбчатые диаграммы используются для построения столбцовых диаграмм. В этом разделе мы собираемся обсудить следующие типы диаграмм на основе столбцов.

Sr.No. Тип диаграммы и описание
1 Основная колонка

Основной столбец диаграммы.

2 Сгруппированный столбец

Сгруппированный столбец диаграммы.

3 Колонка с накоплением

Столбчатая диаграмма, в которой столбцы располагаются друг над другом.

4 Отрицательный столбец с накоплением

Столбчатая диаграмма с отрицательным стеком.

5 Столбец с накоплением в процентах

Столбчатая диаграмма с данными в процентах.

6 Таблица столбцов материалов

Столбчатая диаграмма, вдохновленная дизайном материалов.

7 Столбчатая диаграмма с метками данных

Столбчатая диаграмма с метками данных.

Основной столбец диаграммы.

Сгруппированный столбец диаграммы.

Столбчатая диаграмма, в которой столбцы располагаются друг над другом.

Столбчатая диаграмма с отрицательным стеком.

Столбчатая диаграмма с данными в процентах.

Столбчатая диаграмма, вдохновленная дизайном материалов.

Столбчатая диаграмма с метками данных.

Google Charts — комбинированная диаграмма

Комбинированная диаграмма помогает отображать каждую серию как отдельный тип маркера из следующего списка: линия, область, бары, свечи и ступенчатая область. Чтобы назначить тип маркера по умолчанию для серии, используйте свойство seriesType. Свойство Series должно использоваться для указания свойств каждого ряда в отдельности. Мы уже видели конфигурацию, используемую для рисования этой диаграммы, в главе Синтаксис конфигурации Google Charts . Итак, давайте посмотрим на полный пример.

Конфигурации

Мы использовали класс ComboChart для отображения диаграммы на основе комбинации.

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

пример

googlecharts_combination_chart.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 = 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>

Результат

Проверьте результат.

Google Charts — Гистограмма

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

Sr.No. Тип диаграммы и описание
1 Основная гистограмма

Основная диаграмма гистограммы.

2 Контроль цвета

Индивидуальный цвет гистограммы.

3 Контролирующие ковши

Индивидуальные таблицы гистограмм.

4 Несколько серий

Гистограмма Диаграмма с несколькими рядами.

Основная диаграмма гистограммы.

Индивидуальный цвет гистограммы.

Индивидуальные таблицы гистограмм.

Гистограмма Диаграмма с несколькими рядами.

Google Charts — Линейные диаграммы

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

Sr.No. Тип диаграммы и описание
1 Основная линия

Основной линейный график.

2 С видимыми точками

Диаграмма с видимыми точками данных.

3 Настраиваемый цвет фона

Диаграмма с настроенным цветом фона.

4 Настраиваемый цвет линии

Диаграмма с настроенным цветом линии.

5 Настраиваемые метки осей и тиков

Диаграмма с настроенными осями и метками.

6 Crosshairs

Линейные диаграммы, показывающие перекрестие в точке данных при выборе.

7 Настраиваемый стиль линии

Диаграмма с настроенным цветом линии.

8 Графики с изогнутыми линиями

Диаграмма с плавными кривыми линиями.

9 Линия материалов

Линейный график, вдохновленный дизайном материалов.

10 Top X Line Chart

Линейная диаграмма, вдохновленная дизайном материала, с осью X в верхней части диаграммы.

Основной линейный график.

Диаграмма с видимыми точками данных.

Диаграмма с настроенным цветом фона.

Диаграмма с настроенным цветом линии.

Диаграмма с настроенными осями и метками.

Линейные диаграммы, показывающие перекрестие в точке данных при выборе.

Диаграмма с настроенным цветом линии.

Диаграмма с плавными кривыми линиями.

Линейный график, вдохновленный дизайном материалов.

Линейная диаграмма, вдохновленная дизайном материала, с осью X в верхней части диаграммы.

Google Charts — Карты

Google Map Chart использует Google Maps API для отображения карты. Значения данных отображаются в виде маркеров на карте. Значения данных могут быть координатами (лат-длинные пары) или фактическими адресами. Карта будет соответственно масштабирована, чтобы в нее вошли все идентифицированные точки.

Sr.No. Тип диаграммы и описание
1 Основная карта

Основная карта Google.

2 Карта с использованием широты / долготы

Карта с указанием местоположений с использованием широты и долготы.

3 Настройка маркеров

Индивидуальные маркеры на карте.

Основная карта Google.

Карта с указанием местоположений с использованием широты и долготы.

Индивидуальные маркеры на карте.

Google Charts — организационная структура

Организационная диаграмма помогает в отображении иерархии узлов, используемой для изображения отношений старшего / подчиненного в организации. Например, Семейное древо — это тип организационной диаграммы. Мы уже видели конфигурацию, используемую для рисования этой диаграммы, в главе Синтаксис конфигурации Google Charts . Итак, давайте посмотрим на полный пример.

Конфигурации

Мы использовали класс OrgChart для отображения организационной диаграммы.

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

пример

googlecharts_organization_chart.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: ['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>

Результат

Проверьте результат.

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

Круговые диаграммы используются для построения круговых диаграмм. В этом разделе мы собираемся обсудить следующие типы круговых диаграмм.

Sr.No. Тип диаграммы и описание
1 Основной пирог

Основная круговая диаграмма.

2 Пончик Диаграмма

Пончик Диаграмма.

3 3D круговая диаграмма

3D круговая диаграмма.

4 Круговая диаграмма с взорванными ломтиками

Круговая диаграмма с взорванными ломтиками.

Основная круговая диаграмма.

Пончик Диаграмма.

3D круговая диаграмма.

Круговая диаграмма с взорванными ломтиками.

Google Charts — Sankey Charts

Диаграмма Санки — это инструмент визуализации, который используется для отображения потока от одного набора значений к другому. Связанные объекты называются узлами, а соединения называются ссылками. Санки используются для отображения сопоставления «многие ко многим» между двумя доменами или несколькими путями через набор этапов.

Sr.No. Тип диаграммы и описание
1 Базовая диаграмма Санки

Базовая диаграмма Санки.

2 Многоуровневая диаграмма Санки

Многоуровневая диаграмма Санки.

3 Настройка диаграммы Санки

Индивидуальная диаграмма Санки.

Базовая диаграмма Санки.

Многоуровневая диаграмма Санки.

Индивидуальная диаграмма Санки.

Google Charts — точечные диаграммы

Диаграммы Санки, Точечные диаграммы, Ступенчатые диаграммы, Таблица, Временные шкалы, Древовидная карта, Трендовые линии используются для построения точечных диаграмм. В этом разделе мы собираемся обсудить следующие типы диаграмм на основе разброса.

Sr.No. Тип диаграммы и описание
1 Основной Scatter

Основная диаграмма рассеяния.

2 Материальная диаграмма разброса

Материальная диаграмма рассеяния.

3 Диаграмма рассеяния двойной оси Y

Материальная диаграмма рассеяния, имеющая двойную ось Y.

4 Диаграмма рассеяния верхней оси X

Материальная диаграмма рассеяния, имеющая ось X сверху.

Основная диаграмма рассеяния.

Материальная диаграмма рассеяния.

Материальная диаграмма рассеяния, имеющая двойную ось Y.

Материальная диаграмма рассеяния, имеющая ось X сверху.

Google Charts — Ступенчатые диаграммы

Диаграмма с пошаговой областью является диаграммой с шагом. Мы собираемся обсудить следующие типы ступенчатых диаграмм.

Sr.No. Тип диаграммы и описание
1 Базовая ступенчатая диаграмма

Таблица основных ступенек.

2 Ступенчатая диаграмма с накоплением

Диаграмма с накоплением ступенчатых областей.

3 Ступенчатая диаграмма 100%

100% Сложенная Ступенчатая Диаграмма.

Таблица основных ступенек.

Диаграмма с накоплением ступенчатых областей.

100% Сложенная Ступенчатая Диаграмма.

Google Charts — Table Chart

Таблица Table помогает в рендеринге таблицы, которая может быть отсортирована и разбита на страницы. Ячейки таблицы могут быть отформатированы с использованием строк форматирования или путем прямой вставки HTML в качестве значений ячейки. Числовые значения по умолчанию выровнены по правому краю; логические значения отображаются в виде галочек или крестиков. Пользователи могут выбирать отдельные строки с помощью клавиатуры или мыши. Заголовки столбцов могут быть использованы для сортировки. Строка заголовка остается фиксированной во время прокрутки. В таблице запускаются события, соответствующие взаимодействию с пользователем. Мы уже видели конфигурацию, используемую для рисования этой диаграммы, в главе Синтаксис конфигурации Google Charts . Итак, давайте посмотрим на полный пример.

Конфигурации

Мы использовали класс Table для отображения таблицы на основе диаграммы.

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

пример

googlecharts_table_chart.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: ['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>

Результат

Проверьте результат.

Google Charts — графики времени

Временные шкалы показывают, как набор ресурсов используется во времени. Мы собираемся обсудить следующие типы графиков шкалы времени.

Sr.No. Тип диаграммы / Описание
1 График основных временных шкал

График основных временных шкал

2 Временная шкала с метками данных

Временная шкала с метками данных

3 График времени без метки строки

График времени без метки строки

4 Раскраска графика времени

Индивидуальная временная диаграмма

График основных временных шкал

Временная шкала с метками данных

График времени без метки строки

Индивидуальная временная диаграмма

Google Charts — Диаграмма TreeMap

TreeMap — это визуальное представление дерева данных, где каждый узел может иметь ноль или более дочерних элементов и одного родительского элемента (кроме корневого). Каждый узел отображается в виде прямоугольника, может иметь размеры и цвет в соответствии со значениями, которые мы назначаем. Размеры и цвета оцениваются относительно всех других узлов на графике. Ниже приведен пример диаграммы древовидной карты. Мы уже видели конфигурацию, используемую для рисования этой диаграммы, в главе Синтаксис конфигурации Google Charts . Итак, давайте посмотрим на полный пример.

Конфигурации

Мы использовали класс TreeMap, чтобы показать диаграмму treemap.

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

пример

googlecharts_treemap.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" 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>

Результат

Проверьте результат.

Google Charts — Графики Trendlines

Линия тренда — это линия, наложенная на график, чтобы показать общее направление данных. Google Charts может автоматически генерировать трендовые линии для диаграмм Санки, точечных диаграмм, ступенчатых диаграмм, таблиц, временных шкал, TreeMap, Trendlines, линейчатых диаграмм, столбчатых диаграмм и линейных диаграмм. Мы собираемся обсудить следующие типы диаграмм трендовых линий.

График основных трендовых линий.

График экспоненциальной линии тренда.

Полиномиальная диаграмма трендов.