Google Charts - Краткое руководство
Google Charts- это библиотека диаграмм на основе чистого JavaScript, предназначенная для улучшения веб-приложений за счет добавления интерактивных возможностей построения диаграмм. Он поддерживает широкий спектр диаграмм. Диаграммы рисуются с использованием SVG в стандартных браузерах, таких как Chrome, Firefox, Safari, Internet Explorer (IE). В устаревшем IE 6 для рисования графики используется VML.
Особенности
Ниже приведены основные функции библиотеки Google Charts.
Compatability - Работает безупречно во всех основных браузерах и мобильных платформах, таких как Android и iOS.
Multitouch Support- Поддерживает мультитач на платформах с сенсорным экраном, таких как Android и iOS. Идеально подходит для смартфонов / планшетов на базе iPhone / iPad и Android.
Free to Use - Открытый исходный код и может использоваться бесплатно в некоммерческих целях.
Lightweight - основная библиотека loader.js, очень легкая библиотека.
Simple Configurations - Использует json для определения различных конфигураций диаграмм и очень прост в изучении и использовании.
Dynamic - Позволяет изменять график даже после его создания.
Multiple axes- Не ограничивается осями x, y. Поддерживает несколько осей на диаграммах.
Configurable tooltips- Всплывающая подсказка появляется, когда пользователь наводит курсор на любую точку графика. googlecharts предоставляет встроенное средство форматирования всплывающих подсказок или средство форматирования обратного вызова для программного управления всплывающей подсказкой.
DateTime support- Специально обрабатывайте дату и время. Предоставляет многочисленные встроенные средства управления категориями по дате.
Print - Распечатать диаграмму с помощью веб-страницы.
External data- Поддерживает динамическую загрузку данных с сервера. Обеспечивает контроль над данными с помощью функций обратного вызова.
Text Rotation - Поддерживает вращение этикеток в любом направлении.
Поддерживаемые типы диаграмм
Библиотека Google Charts предоставляет следующие типы диаграмм -
| Sr. No. | Тип диаграммы и описание |
|---|---|
| 1 | Line Charts Используется для рисования линейных / сплайновых диаграмм. |
| 2 | Area Charts Используется для рисования диаграмм по площади. |
| 3 | Pie Charts Используется для рисования круговых диаграмм. |
| 4 | Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines Используется для рисования разрозненных диаграмм. |
| 5 | Bubble Charts Используется для рисования пузырьковых диаграмм. |
| 6 | Dynamic Charts Используется для рисования динамических диаграмм, где пользователь может изменять диаграммы. |
| 7 | Combinations Используется для рисования комбинаций различных диаграмм. |
| 8 | 3D Charts Используется для рисования трехмерных диаграмм. |
| 9 | Angular Gauges Используется для рисования диаграмм типа спидометра. |
| 10 | Heat Maps Используется для рисования тепловых карт. |
| 11 | Tree Maps Используется для рисования древовидных карт. |
В следующих главах мы собираемся подробно обсудить каждый тип вышеупомянутых диаграмм с примерами.
Лицензия
Google Charts имеет открытый исходный код и бесплатен для использования. Перейдите по ссылке: Условия использования .
В этой главе мы обсудим, как настроить библиотеку Google Charts для использования при разработке веб-приложений.
Установить Google Charts
Есть два способа использовать Google Charts.
Download - Загрузите его локально с https://developers.google.com/chart и используйте это.
CDN access- У вас также есть доступ к CDN. Сеть CDN предоставит вам доступ по всему миру к региональным центрам обработки данных, которые в данном случае размещены в Google Chart.https://www.gstatic.com/charts.
Использование загруженной диаграммы Google
Включите файл 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 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>Вот containerdiv используется для хранения диаграммы, нарисованной с использованием библиотеки 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
<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);Результат
Проверьте результат.
Диаграммы с областями используются для построения диаграмм с областями. В этом разделе мы собираемся обсудить следующие типы диаграмм на основе областей.
| Sr. No. | Тип диаграммы и описание |
|---|---|
| 1 | Основная область
Базовая диаграмма с областями |
| 2 | Область с отрицательными значениями
Диаграмма с областями с отрицательными значениями. |
| 3 | Сложенная область
Диаграмма с областями, наложенными одна на другую. |
| 4 | Процентная площадь
График с данными в процентах. |
| 5 | Область с недостающими точками
График с пропущенными точками в данных. |
| 6 | Перевернутые оси
Площадь с использованием перевернутых осей. |
Гистограммы используются для построения гистограмм. В этом разделе мы собираемся обсудить следующие типы столбчатых диаграмм.
| Sr. No. | Тип диаграммы и описание |
|---|---|
| 1 | Базовый бар
Базовая гистограмма |
| 2 | Сгруппированная столбчатая диаграмма
Сгруппированная гистограмма. |
| 3 | Сложенный бар
Столбиковая диаграмма с наложенными друг на друга столбцами. |
| 4 | Отрицательная полоса с накоплением
Гистограмма с отрицательным стеком. |
| 5 | Полоса с накоплением в процентах
Гистограмма с данными в процентах. |
| 6 | Гистограмма материалов
Гистограмма, вдохновленная материальным дизайном. |
| 7 | Гистограмма с метками данных
Гистограмма с метками данных. |
Пузырьковые диаграммы используются для построения пузырьковых диаграмм. В этом разделе мы собираемся обсудить следующие типы пузырьковых диаграмм.
| Sr. No. | Тип диаграммы и описание |
|---|---|
| 1 | Базовый пузырь
Базовая пузырьковая диаграмма. |
| 2 | Пузырьковая диаграмма с метками данных
Пузырьковая диаграмма с метками данных. |
Календарные диаграммы используются для рисования действий в течение длительного периода времени, например месяцев или лет. В этом разделе мы собираемся обсудить следующие типы графиков на основе календаря.
| Sr. No. | Тип диаграммы и описание |
|---|---|
| 1 | Базовый календарь
Базовая календарная диаграмма. |
| 2 | Календарь с индивидуальными цветами
Индивидуальная календарная диаграмма. |
Графики свечей используются для отображения стоимости открытия и закрытия в зависимости от отклонения стоимости и обычно используются для представления акций. В этом разделе мы собираемся обсудить следующие типы графиков на основе свечей.
| Sr. No. | Тип диаграммы и описание |
|---|---|
| 1 | Базовый подсвечник
Базовый свечной график. |
| 2 | Подсвечник с индивидуальными цветами
Настроенный график свечей. |
Столбчатые диаграммы используются для построения столбцовых диаграмм. В этом разделе мы собираемся обсудить следующие типы столбчатых диаграмм.
| Sr. No. | Тип диаграммы и описание |
|---|---|
| 1 | Базовая колонка
Базовая столбчатая диаграмма. |
| 2 | Сгруппированный столбец
Сгруппированная столбчатая диаграмма. |
| 3 | Столбец с накоплением
Столбчатая диаграмма с наложенными друг на друга столбцами. |
| 4 | Отрицательный столбец с накоплением
Гистограмма с отрицательным стеком. |
| 5 | Столбец с накоплением в процентах
Столбчатая диаграмма с данными в процентах. |
| 6 | Таблица столбцов материала
Столбчатая диаграмма, вдохновленная материальным дизайном. |
| 7 | Столбчатая диаграмма с метками данных
Гистограмма с метками данных. |
Комбинированная диаграмма помогает отображать каждую серию как отдельный тип маркера из следующего списка: линия, область, столбцы, свечи и ступенчатая область. Чтобы назначить тип маркера по умолчанию для серии, используйте свойство seriesType. Свойство серии следует использовать для определения свойств каждой серии в отдельности. Мы уже видели конфигурацию, используемую для рисования этой диаграммы в главе Синтаксис конфигурации Google Charts . Итак, давайте посмотрим на полный пример.
Конфигурации
Мы использовали ComboChart класс для отображения комбинированной диаграммы.
//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));пример
googlecharts_combination_chart.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>
<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 автоматически выбирает количество сегментов за вас. Все сегменты имеют одинаковую ширину и высоту, пропорциональную количеству точек данных в сегменте. Гистограммы аналогичны столбчатым диаграммам в других аспектах. В этом разделе мы собираемся обсудить следующие типы диаграмм на основе гистограмм.
| Sr. No. | Тип диаграммы и описание |
|---|---|
| 1 | Базовая гистограмма
Базовая гистограмма. |
| 2 | Контроль цвета
Настраиваемый цвет диаграммы гистрограммы. |
| 3 | Управление бакетами
Настраиваемые сегменты диаграммы гистрограммы. |
| 4 | Несколько серий
Гистрограмма Диаграмма, имеющая несколько серий. |
Линейные диаграммы используются для построения линейных диаграмм. В этом разделе мы собираемся обсудить следующие типы линейных диаграмм.
| Sr. No. | Тип диаграммы и описание |
|---|---|
| 1 | Базовая линия
Базовый линейный график. |
| 2 | С видимыми точками
Диаграмма с видимыми точками данных. |
| 3 | Настраиваемый цвет фона
Диаграмма с настраиваемым цветом фона. |
| 4 | Настраиваемый цвет линии
График с настраиваемым цветом линии. |
| 5 | Настраиваемые метки осей и делений
Диаграмма с настраиваемыми осями и метками. |
| 6 | Перекрестие
Линейные диаграммы, показывающие перекрестие в точке данных при выборе. |
| 7 | Настраиваемый стиль линии
График с настраиваемым цветом линии. |
| 8 | Графики с изогнутыми линиями
График с плавными кривыми линиями. |
| 9 | График материала
Линейная диаграмма, вдохновленная материальным дизайном. |
| 10 | Верхняя X линейная диаграмма
Линейная диаграмма, вдохновленная материальным дизайном, с осью X в верхней части диаграммы. |
Карта Google Map Chart использует Google Maps API для отображения карты. Значения данных отображаются на карте в виде маркеров. Значения данных могут быть координатами (пары долгота-широта) или фактическими адресами. Карта будет соответствующим образом масштабирована, чтобы включить все идентифицированные точки.
| Sr. No. | Тип диаграммы и описание |
|---|---|
| 1 | Базовая карта
Базовая карта Google. |
| 2 | Карта с использованием широты / долготы
Карта с местоположениями, указанными с помощью широты и долготы. |
| 3 | Настройка маркеров
Настроенные маркеры на карте. |
Организационная диаграмма помогает в отображении иерархии узлов, используемых для изображения отношений высшего и подчиненного уровня в организации. Например, генеалогическое древо - это тип организационной диаграммы. Мы уже видели конфигурацию, используемую для построения этой диаграммы, в главе Синтаксис конфигурации диаграмм Google . Итак, давайте посмотрим на полный пример.
Конфигурации
Мы использовали OrgChart класс, чтобы показать диаграмму на основе организации.
//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));пример
googlecharts_organization_chart.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: ['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>Результат
Проверьте результат.
Круговые диаграммы используются для построения круговых диаграмм. В этом разделе мы собираемся обсудить следующие типы круговых диаграмм.
| Sr. No. | Тип диаграммы и описание |
|---|---|
| 1 | Обычный пирог
Базовая круговая диаграмма. |
| 2 | Пончиковая диаграмма
Пончиковая диаграмма. |
| 3 | 3D круговая диаграмма
3D круговая диаграмма. |
| 4 | Круговая диаграмма с разнесенными фрагментами
Круговая диаграмма с разнесенными фрагментами. |
Диаграмма Сэнки - это инструмент визуализации, который используется для изображения перехода от одного набора значений к другому. Связанные объекты называются узлами, а соединения - ссылками. Санки используются для отображения сопоставления «многие ко многим» между двумя доменами или несколькими путями через набор этапов.
| Sr. No. | Тип диаграммы и описание |
|---|---|
| 1 | Базовая диаграмма Санки
Базовая диаграмма Санки. |
| 2 | Многоуровневая диаграмма Санки
Многоуровневая диаграмма Санки. |
| 3 | Настройка диаграммы Санки
Индивидуальная диаграмма Санки. |
Диаграммы Сэнки, точечные диаграммы, диаграммы с шаговой областью, таблица, временные шкалы, TreeMap, линии тренда используются для построения диаграмм на основе точечной диаграммы. В этом разделе мы собираемся обсудить следующие типы диаграмм, основанных на разбросе.
| Sr. No. | Тип диаграммы и описание |
|---|---|
| 1 | Базовый разброс
Базовая диаграмма разброса. |
| 2 | Диаграмма разброса материалов
Диаграмма разброса материалов. |
| 3 | Диаграмма разброса по двойной оси Y
Диаграмма разброса материалов с двойной осью Y. |
| 4 | Точечная диаграмма верхней оси X
Диаграмма разброса материалов с осью X наверху. |
Пошаговая диаграмма с областями - это диаграмма с областями на основе шагов. Мы собираемся обсудить следующие типы ступенчатых диаграмм с областями.
| Sr. No. | Тип диаграммы и описание |
|---|---|
| 1 | Базовая ступенчатая диаграмма
Базовая ступенчатая диаграмма с областями. |
| 2 | Составная ступенчатая диаграмма
Диаграмма с накоплением ступенчатых областей. |
| 3 | 100% -ная ступенчатая диаграмма
100% составная ступенчатая диаграмма с областями. |
Табличная диаграмма помогает в отображении таблицы, которую можно сортировать и разбивать на страницы. Ячейки таблицы можно отформатировать с помощью строк формата или путем прямой вставки HTML в качестве значений ячеек. По умолчанию числовые значения выравниваются по правому краю; логические значения отображаются как галочки или крестики. Пользователи могут выбирать отдельные строки с помощью клавиатуры или мыши. Заголовки столбцов можно использовать для сортировки. Строка заголовка остается неизменной во время прокрутки. Таблица запускает события, соответствующие взаимодействию с пользователем. Мы уже видели конфигурацию, используемую для рисования этой диаграммы в главе Синтаксис конфигурации Google Charts . Итак, давайте посмотрим на полный пример.
Конфигурации
Мы использовали Table класс для отображения диаграммы на основе таблицы.
//table chart
var chart = new google.visualization.Table(document.getElementById('container'));пример
googlecharts_table_chart.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: ['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>Результат
Проверьте результат.
Временные шкалы показывают, как набор ресурсов используется с течением времени. Мы собираемся обсудить следующие типы графиков временной шкалы.
| Sr. No. | Тип диаграммы / Описание |
|---|---|
| 1 | Базовая временная диаграмма
Базовая временная диаграмма |
| 2 | Временная диаграмма с метками данных
Временная диаграмма с метками данных |
| 3 | График временной шкалы без метки строки
График временной шкалы без метки строки |
| 4 | Раскраска графика времени
Индивидуальная временная диаграмма |
TreeMap - это визуальное представление дерева данных, в котором каждый узел может иметь ноль или более дочерних элементов и одного родителя (кроме корня). Каждый узел отображается в виде прямоугольника, его размер и цвет можно изменять в соответствии со значениями, которые мы присваиваем. Размеры и цвета оцениваются относительно всех других узлов в графе. Ниже приводится пример древовидной диаграммы. Мы уже видели конфигурацию, используемую для рисования этой диаграммы в главе Синтаксис конфигурации Google Charts . Итак, давайте посмотрим на полный пример.
Конфигурации
Мы использовали TreeMap класс, чтобы показать диаграмму дерева.
//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));пример
googlecharts_treemap.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" 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 может автоматически генерировать линии тренда для диаграмм Sankey, точечных диаграмм, диаграмм с ступенчатыми областями, таблиц, графиков времени, TreeMap, линий тренда, гистограмм, столбчатых диаграмм и линейных диаграмм .. Мы собираемся обсудить следующие типы диаграмм линий тренда.
| Sr. No. | Тип диаграммы и описание |
|---|---|
| 1 | Базовая диаграмма линий тренда
Диаграмма основных линий тренда. |
| 2 | График экспоненциальных линий тренда
График экспоненциальных линий тренда. |
| 3 | График полиномиальных линий тренда
График полиномиальных линий тренда. |