Для чего нужен google charts

Это все, что вам нужно, чтобы начать .

Диаграммы представлены как классы JavaScript, а Google Charts предоставляет множество типов диаграмм, которые вы можете использовать. Внешний вид по умолчанию, как правило, будет всем, что вам нужно, и вы всегда можете настроить диаграмму в соответствии с внешним видом вашего веб-сайта. Диаграммы очень интерактивны и отображают события , которые позволяют вам соединить их для создания сложных информационных панелей или других функций, интегрированных с вашей веб-страницей . Диаграммы визуализируются с использованием технологии HTML5/SVG для обеспечения кросс-браузерной совместимости (включая VML для более старых версий IE) и кросс-платформенной переносимости на iPhone, iPad и Android. Вашим пользователям никогда не придется возиться с плагинами или любым программным обеспечением. Если у них есть веб-браузер, они могут видеть ваши графики.

Все типы диаграмм заполняются данными с помощью класса DataTable , что позволяет легко переключаться между типами диаграмм, когда вы экспериментируете, чтобы найти идеальный внешний вид. DataTable предоставляет методы для сортировки, изменения и фильтрации данных и может быть заполнен непосредственно с вашей веб-страницы, базы данных или любого поставщика данных, поддерживающего протокол источника данных инструментов для работы с диаграммами . (Этот протокол включает язык запросов, подобный SQL, и реализуется Google Spreadsheets, Google Fusion Tables и сторонними поставщиками данных, такими как SalesForce. Вы даже можете реализовать протокол на своем собственном веб-сайте и стать поставщиком данных для других служб.)

Готовы создать свой первый график? Посетите быстрый старт .

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

Отправить отзыв

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons "С указанием авторства 4.0", а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Последнее обновление: 2023-10-13 UTC.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лицензия

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-страницу, используя следующий скрипт —

  src = "/googlecharts/loader.js"> 

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

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

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

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

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

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

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

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

googlecharts_configuration.htm

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

Здесь контейнер 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

   Google Charts Tutorial   type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">   type = "text/javascript"> google.charts.load('current', packages: ['corechart']>);    id = "container" style = "width: 550px; height: 400px; margin: 0 auto">   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);   

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

google.charts.setOnLoadCallback(drawChart);

Результат

Google Charts — Area Charts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Google Charts — Bubble Charts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

пример

googlecharts_combination_chart.htm

   Google Charts Tutorial   type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">   type = "text/javascript"> google.charts.load('current', packages: ['corechart']>);    id = "container" style = "width: 550px; height: 400px; margin: 0 auto">   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);   

Результат

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Google Charts — Карты

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

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

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

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

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

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

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

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

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

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

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

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

пример

googlecharts_organization_chart.htm

   Google Charts Tutorial   type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">   type = "text/javascript"> google.charts.load('current', packages: ['orgchart']>);    id = "container" style = "width: 550px; height: 400px; margin: 0 auto">   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
President
'>,'', 'President'], [v:'Jim', f:'Jim
Vice President
'>,'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);   

Результат

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

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

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

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

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

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

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

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

Google Charts — Sankey Charts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   Google Charts Tutorial   type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">   type = "text/javascript"> google.charts.load('current', packages: ['table']>);    id = "container" style = "width: 550px; height: 400px; margin: 0 auto">   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);   

Результат

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

пример

googlecharts_treemap.htm

   Google Charts Tutorial   type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">   type = "text/javascript" src = "https://www.google.com/jsapi">   type = "text/javascript"> google.charts.load('current', packages: ['treemap']>);    id = "container" style = "width: 550px; height: 400px; margin: 0 auto">   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);   

Результат

Google Charts — Графики Trendlines

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

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

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

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