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 График полиномиальных линий тренда

График полиномиальных линий тренда.