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

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

angular-google-charts- это оболочка на основе Angular с открытым исходным кодом для Google Charts, которая обеспечивает элегантную и многофункциональную визуализацию Google Charts в приложении Angular и может легко использоваться вместе с компонентами Angular. Есть главы, в которых обсуждаются все основные компоненты Google Charts с подходящими примерами в приложении Angular.

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

Ниже приведены основные функции библиотеки 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 и Angular Framework. В этой главе мы обсудим настройку среды, необходимую для Angular 6. Чтобы установить Angular 6, нам потребуется следующее:

• Nodejs
• Npm
• Angular CLI
• IDE для написания вашего кода

Nodejs должен быть больше 8,11, а npm должен быть больше 5,6.

Nodejs

Чтобы проверить, установлен ли nodejs в вашей системе, введите node -vв терминале. Это поможет вам увидеть версию nodejs, установленную в настоящее время в вашей системе.

C:\>node -v
v8.11.3

Если он ничего не печатает, установите nodejs в свою систему. Чтобы установить nodejs, перейдите на домашнюю страницуhttps://nodejs.org/en/download/ из nodejs и установите пакет на основе вашей ОС.

В зависимости от вашей ОС установите необходимый пакет. После установки nodejs вместе с ним будет установлен npm. Чтобы проверить, установлен ли npm, введите в терминале npm -v. Он должен отображать версию файла npm.

C:\>npm -v
5.6.0

Установка Angular 6 очень проста с помощью angular CLI. Посетите домашнюю страницуhttps://cli.angular.io/ angular, чтобы получить ссылку на команду.

Тип npm install -g @angular/cli, чтобы установить angular cli в вашей системе.

Вы получите указанную выше установку в своем терминале после установки Angular CLI. Вы можете использовать любую IDE по вашему выбору, например, WebStorm, Atom, Visual Studio Code и т. Д.

Установить Google Charts Wrapper

Выполните следующую команду, чтобы установить модуль Google Charts Wrapper в созданном проекте.

googleChartsApp> npm angular-google-charts

+ [email protected]
added 2 packages in 20.526s

Добавьте следующую запись в файл app.module.ts

import { GoogleChartsModule } from 'angular-google-charts';

imports: [
   ...
   GoogleChartsModule
],

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

Шаг 1 - Создайте приложение Angular

Выполните следующие шаги, чтобы обновить приложение Angular, которое мы создали в Angular 6 - Глава Настройка проекта -

Шаг	Описание
1	Создайте проект с именем googleChartsApp, как описано в главе Angular 6 - Настройка проекта .
2	Измените app.module.ts , app.component.ts и app.component.html, как описано ниже. Остальные файлы оставьте без изменений.
3	Скомпилируйте и запустите приложение, чтобы проверить результат реализованной логики.

Ниже приводится содержание измененного дескриптора модуля. app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
   declarations: [
      AppComponent   
   ],
   imports: [
      BrowserModule,GoogleChartsModule
   ],
   providers: [], bootstrap: [AppComponent]
})
export class AppModule { }

Ниже приводится содержимое измененного файла хоста HTML. app.component.html.

<google-chart #chart
   [title]="title"
   [type]="type"
   [data]="data"
   [columnNames]="columnNames"
   [options]="options"
   [width]="width"
   [height]="height">
</google-chart>

Мы увидим обновленный app.component.ts в конце после понимания настроек.

Шаг 2 - Используйте конфигурации

Установить заголовок

title = 'Browser market shares at a specific website, 2014';

Установить тип диаграммы

type='PieChart';

данные

Настройте данные для отображения на диаграмме.

data = [
   ['Firefox', 45.0],
   ['IE', 26.8],
   ['Chrome', 12.8],
   ['Safari', 8.5],
   ['Opera', 6.2],
   ['Others', 0.7] 
];

имена столбцов

Настройте отображаемые имена столбцов.

columnNames = ['Browser', 'Percentage'];

параметры

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

options = {
   colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], is3D: true
};

пример

Рассмотрим следующий пример, чтобы лучше понять синтаксис конфигурации -

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Browser market shares at a specific website, 2014';
   type = 'PieChart';
   data = [
      ['Firefox', 45.0],
      ['IE', 26.8],
      ['Chrome', 12.8],
      ['Safari', 8.5],
      ['Opera', 6.2],
      ['Others', 0.7] 
   ];
   columnNames = ['Browser', 'Percentage'];
   options = {    
   };
   width = 550;
   height = 400;
}

Результат

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

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

Старший Нет	Тип диаграммы / Описание
1	Основная область Базовая диаграмма с областями
2	Область с отрицательными значениями Диаграмма с областями с отрицательными значениями.
3	Сложенная область Диаграмма с областями, наложенными одна на другую.
4	Область с недостающими точками График с пропущенными точками в данных.

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

Старший Нет	Тип диаграммы / Описание
1	Базовый бар Базовая гистограмма
2	Сгруппированная столбчатая диаграмма Сгруппированная гистограмма.
3	Сложенный бар Столбиковая диаграмма с наложенными друг на друга столбцами.
4	Отрицательная полоса Гистограмма с отрицательным стеком.

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

Старший Нет	Тип диаграммы / Описание
1	Базовый пузырь Базовая пузырьковая диаграмма.
2	Пузырьковая диаграмма с метками данных Пузырьковая диаграмма с метками данных.

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

Старший Нет	Тип диаграммы / Описание
1	Базовый подсвечник Базовый свечной график.
2	Подсвечник с индивидуальными цветами Настроенный график свечей.

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

Старший Нет	Тип диаграммы / Описание
1	Базовая колонка Базовая столбчатая диаграмма
2	Сгруппированная столбчатая диаграмма Групповая диаграмма Colummn.
3	Столбец с накоплением Столбчатая диаграмма с наложенными друг на друга столбцами.
4	Отрицательный столбец с накоплением Столбчатая диаграмма с отрицательным стеком.

Комбинированная диаграмма помогает отображать каждую серию как отдельный тип маркера из следующего списка: линия, область, столбцы, свечи и ступенчатая область. Чтобы назначить тип маркера по умолчанию для серии, используйте свойство seriesType. Свойство серии необходимо использовать для определения свойств каждой серии отдельно. Ниже приведен пример столбчатой ​​диаграммы, показывающей различия.

Мы уже видели конфигурации, используемые для рисования диаграммы в главе Синтаксис конфигурации Google Charts . Теперь давайте посмотрим на пример столбчатой ​​диаграммы, показывающей различия.

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

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

type='ComboChart';

пример

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Fruits distribution';
   type = 'ComboChart';
   data = [
      ["Apples", 3, 2, 2.5],
      ["Oranges",2, 3, 2.5],
      ["Pears", 1, 5, 3],
      ["Bananas", 3, 9, 6],
      ["Plums", 4, 2, 3]
   ];
   columnNames = ['Fruits', 'Jane','Jone','Average'];
   options = {   
      hAxis: {
         title: 'Person'
      },
      vAxis:{
         title: 'Fruits'
      },
      seriesType: 'bars',
      series: {2: {type: 'line'}}
   };
   width = 550;
   height = 400;
}

Результат

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

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

Старший Нет	Тип диаграммы / Описание
1	Базовая гистограмма Базовая гистограмма.
2	Контроль цвета Настраиваемый цвет диаграммы гистрограммы.
3	Управление бакетами Настраиваемые сегменты диаграммы гистрограммы.
4	Несколько серий Диаграмма гистограммы, имеющая несколько серий.

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

Старший Нет	Тип диаграммы / Описание
1	Базовая линия Базовый линейный график.
2	С видимыми точками Диаграмма с видимыми точками данных.
3	Настраиваемый цвет фона Диаграмма с настраиваемым цветом фона.
4	Настраиваемый цвет линии График с настраиваемым цветом линии.
5	Настраиваемые метки осей и делений Диаграмма с настраиваемыми осями и метками.
6	Перекрестие Линейные диаграммы, показывающие перекрестие в точке данных при выборе.
7	Настраиваемый стиль линии График с настраиваемым цветом линии.
8	Графики с изогнутыми линиями График с плавными кривыми линиями.

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

Старший Нет	Тип диаграммы / Описание
1	Базовая карта Базовая карта Google.
2	Карта с использованием широты / долготы Карта с местоположениями, указанными с помощью широты и долготы.

Ниже приведен пример организационной схемы.

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

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

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

type='OrgChart';

пример

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '';
   type = 'OrgChart';
   data = [
      [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
         '', 'The President'],
      [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
         'Mike', 'VP'],
      ['Alice', 'Mike', ''],
      ['Bob', 'Jim', 'Bob Sponge'],
      ['Carol', 'Bob', '']
   ];
   columnNames = ["Name","Manager","Tooltip"];
   options = {   
      allowHtml: true
   };
   width = 550;
   height = 400;
}

Результат

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

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

Старший Нет	Тип диаграммы / Описание
1	Обычный пирог Базовая круговая диаграмма.
2	Пончиковая диаграмма Пончиковая диаграмма.
3	3D круговая диаграмма 3D круговая диаграмма.
4	Круговая диаграмма с разнесенными фрагментами Круговая диаграмма с разнесенными фрагментами.

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

Старший Нет	Тип диаграммы / Описание
1	Базовая диаграмма Санки Базовая диаграмма Санки.
2	Многоуровневая диаграмма Санки Многоуровневая диаграмма Санки.
3	Настройка диаграммы Санки Индивидуальная диаграмма Санки.

Ниже приведен пример точечной диаграммы.

Мы уже видели конфигурации, используемые для рисования диаграммы в главе Синтаксис конфигурации Google Charts . Теперь давайте посмотрим на пример точечной диаграммы.

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

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

type = 'ScatterChart';

пример

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Age vs Weight';
   type='ScatterChart';
   data = [
      [8,12],
      [4, 5.5],
      [11,14],
      [4,5],
      [3,3.5],
      [6.5,7]
   ];
   columnNames = ['Age', 'Weight'];
   options = {   
   };
   width = 550;
   height = 400;
}

Результат

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

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

Старший Нет	Тип диаграммы / Описание
1	Базовая ступенчатая диаграмма Базовая ступенчатая диаграмма с областями.
2	Составная ступенчатая диаграмма Диаграмма с накоплением ступенчатых областей.

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

Мы уже видели конфигурации, используемые для рисования диаграммы в главе Синтаксис конфигурации Google Charts . Теперь давайте посмотрим на пример табличной диаграммы.

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

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

type = 'Table';

пример

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = "";
   type = 'Table';
   data = [
      ['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]
   ];
   columnNames = ["Name", "Salary","Full Time Employee"];
   options = { 
     alternatingRowStyle:true,
     showRowNumber:true  
   };
   width = 550;
   height = 400;
}

Результат

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

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

Мы уже видели конфигурации, используемые для рисования диаграммы в главе Синтаксис конфигурации Google Charts . Теперь давайте посмотрим на пример диаграммы TreeMap.

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

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

type = 'TreeMap';

пример

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '';
   type='TreeMap';
   data = [
      ["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],
          
   ];
   columnNames = ["Location", "Parent","Market trade volume (size)","Market increase/decrease (color)"];
   options = { 
      minColor:"#ff7777",
      midColor:'#ffff77',
      maxColor:'#77ff77',
      headerHeight:15,
      showScale:true
   };
   width = 550;
   height = 400;
}

Результат

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