Highcharts angulares - Guía rápida

HighChart Angular Wrapperes un componente de código abierto basado en ángulos que proporciona visualizaciones Highcharts elegantes y ricas en funciones dentro de una aplicación Angular y se puede usar junto con componentes Angular sin problemas. Hay capítulos que discuten todos los componentes básicos de Highcharts con ejemplos adecuados dentro de una aplicación Angular.

Caracteristicas

  • Compatible- Todos los navegadores modernos son compatibles con los navegadores de iPhone / iPad e Internet Explorer 6 en adelante. Los navegadores modernos usan SVG para la representación de gráficos y, en el Internet Explorer heredado, los gráficos se dibujan usando VML.

  • Pure TypeScript - No se requiere JavaScript ya que la API Highcharts completa está disponible en TypeScript.

  • No Flash - No se requieren complementos del lado del cliente como Flash Player o Java, ya que Highcharts utiliza tecnologías de navegador nativas y los gráficos se pueden ejecutar sin modificaciones en dispositivos móviles modernos.

  • Clean Syntax - La mayoría de los métodos se pueden encadenar, por lo que las opciones de configuración del gráfico se pueden administrar utilizando una sintaxis tan ajustada como JSON.

  • Dynamic- Las series y los puntos se pueden agregar dinámicamente en cualquier momento después de la creación del gráfico. Admite ganchos de eventos. Se admiten las interacciones del servidor.

  • Documented - Las API de Highcharts están completamente documentadas con numerosos ejemplos de código y sintaxis.

Este tutorial lo guiará sobre cómo preparar un entorno de desarrollo para comenzar su trabajo con Highcharts y Angular Framework. En este capítulo, discutiremos la configuración del entorno requerida para Angular 6. Para instalar Angular 6, necesitamos lo siguiente:

  • Nodejs
  • Npm
  • CLI angular
  • IDE para escribir su código

Nodejs debe ser mayor que 8.11 y npm debe ser mayor que 5.6.

Nodejs

Para verificar si nodejs está instalado en su sistema, escriba node -ven la terminal. Esto le ayudará a ver la versión de nodejs actualmente instalada en su sistema.

C:\>node -v
v8.11.3

Si no imprime nada, instale nodejs en su sistema. Para instalar nodejs, vaya a la página de iniciohttps://nodejs.org/en/download/ de nodejs e instale el paquete según su sistema operativo.

La página de inicio de nodejs se verá así:

Según su sistema operativo, instale el paquete requerido. Una vez que nodejs esté instalado, npm también se instalará junto con él. Para comprobar si npm está instalado o no, escriba npm -v en la terminal. Debería mostrar la versión de npm.

C:\>npm -v
5.6.0

Las instalaciones de Angular 6 son muy simples con la ayuda de CLI angular. Visite la pagina de iniciohttps://cli.angular.io/ de angular para obtener la referencia del comando.

Tipo npm install -g @angular/cli, para instalar angular cli en su sistema.

Obtendrá la instalación anterior en su terminal, una vez que Angular CLI esté instalado. Puede usar cualquier IDE de su elección, es decir, WebStorm, Atom, Visual Studio Code, etc.

Instalar Highcharts

Ejecute el siguiente comando para instalar el módulo highchart en el proyecto creado.

highchartsApp>npm install highcharts --save
+ [email protected]
added 1 package in 137.534s

Ejecute el siguiente comando para instalar el módulo contenedor highchart en el proyecto creado.

highchartsApp>npm install highcharts-angular --save
+ [email protected]
added 1 package in 20.93s

Agregue la siguiente entrada en el archivo highchartsApp.module.ts

import { HighchartsChartComponent } from 'highcharts-angular';
declarations: [
   ...
   HighchartsChartComponent    
],

En este capítulo, mostraremos la configuración requerida para dibujar un gráfico usando la API Highcharts en Angular.

Paso 1: crear una aplicación angular

Siga los siguientes pasos para actualizar la aplicación Angular que creamos en Angular 6 - Capítulo Configuración del proyecto -

Paso Descripción
1 Cree un proyecto con un nombre highchartsApp como se explica en el capítulo Angular 6 - Configuración del proyecto .
2 Modifique app.module.ts , app.component.ts y app.component.html como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3 Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado app.module.ts.

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

A continuación se muestra el contenido del archivo de host HTML modificado app.component.html.

<highcharts-chart
   [Highcharts] = "highcharts" 
   [options] = "chartOptions" 
   style = "width: 100%; height: 400px; display: block;">
</highcharts-chart>

Veremos el app.component.ts actualizado al final después de comprender las configuraciones.

Paso 2: use las configuraciones

Crea Highcharts y crea chartOptions

highcharts = Highcharts;
   chartOptions = {   
}

Crear gráfico

Configure el tipo, título y subtítulo del gráfico usando chartOptions.

chart: {
   type: "spline"
},

xAxis

Configure el ticker para que se muestre en el eje X usando chartOptions.

xAxis:{
   categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},

yAxis

Configure el título que se mostrará en el eje Y utilizando chartOptions.

yAxis: {          
   title:{
      text:"Temperature °C"
   } 
},

información sobre herramientas

Configure la información sobre herramientas. Coloque el sufijo que se agregará después del valor (eje y) usando chartOptions.

tooltip: {
   valueSuffix:" °C"
},

serie

Configure los datos que se mostrarán en el gráfico utilizando chartOptions. La serie es una matriz donde cada elemento de esta matriz representa una sola línea en el gráfico.

series: [
   {
      name: 'Tokyo', 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,26.5, 23.3, 18.3, 13.9, 9.6]
   },
   {
      name: 'New York', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,24.1, 20.1, 14.1, 8.6, 2.5]
   },
   {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   },
   {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }
]

Ejemplo

Considere el siguiente ejemplo para comprender mejor la sintaxis de configuración:

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {   
      chart: {
         type: "spline"
      },
      title: {
         text: "Monthly Average Temperature"
      },
      subtitle: {
         text: "Source: WorldClimate.com"
      },
      xAxis:{
         categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
      },
      yAxis: {          
         title:{
            text:"Temperature °C"
         } 
      },
      tooltip: {
         valueSuffix:" °C"
      },
      series: [
         {
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,26.5, 23.3, 18.3, 13.9, 9.6]
         },
         {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,24.1, 20.1, 14.1, 8.6, 2.5]
         },
         {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
         },
         {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
         }
      ]
   };
}

Resultado

Verifica el resultado.

Los gráficos de líneas se utilizan para dibujar gráficos basados ​​en líneas / splines. En esta sección, discutiremos los diferentes tipos de gráficos basados ​​en líneas y splines.

No Señor Tipo de gráfico y descripción
1 Linea basica

Gráfico de líneas básico.
2 Con etiquetas de datos

Gráfico con etiquetas de datos.
3 Serie temporal, ampliable

Gráfico con series de tiempo.
4 Spline con ejes invertidos

Gráfico de splines con ejes invertidos.
5 Spline con símbolos

Gráfico de splines con símbolos de calor / lluvia.
6 Spline con bandas de trama

Gráfico de splines con bandas de la trama.

Los gráficos de área se utilizan para dibujar gráficos basados ​​en áreas. En esta sección, discutiremos los diferentes tipos de gráficos basados ​​en áreas.

No Señor. Tipo de gráfico y descripción
1 Área básica

Gráfico de áreas básico.
2 Área con valores negativos

Gráfico de área con valores negativos.
3 Área apilada

Gráfico que tiene áreas apiladas una sobre otra.
4 Área de porcentaje

Gráfico con datos en términos porcentuales.
5 Área con puntos faltantes

Gráfico con puntos faltantes en los datos.
6 Ejes invertidos

Área usando ejes invertidos.
7 Área-spline

Gráfico de áreas usando spline.

Los gráficos de barras se utilizan para dibujar gráficos basados ​​en barras. En esta sección, discutiremos los diferentes tipos de gráficos basados ​​en barras.

No Señor. Tipo de gráfico y descripción
1 Barra básica

Gráfico de barras básico.
2 Barra apilada

Gráfico de barras con barras apiladas unas sobre otras.
3 Gráfico de barras con valores negativos

Gráfico de barras con valores negativos.

Los gráficos de columnas se utilizan para dibujar gráficos basados ​​en columnas. En esta sección, discutiremos los diferentes tipos de gráficos basados ​​en columnas.

No Señor. Tipo de gráfico y descripción
1 Columna básica

Gráfico de columnas básico.
2 Columna con valores negativos

Gráfico de columnas con valores negativos.
3 Columna apilada

Gráfico con columnas apiladas unas sobre otras.
4 Columna apilada y agrupada

Gráfico con columna en forma apilada y agrupada.
5 Columna con porcentaje apilado

Gráfico con porcentaje apilado.
6 Columna con etiquetas giradas

Gráfico de columnas con etiquetas giradas en columnas.
7 Rango de columna

Gráfico de columnas usando rangos.

Highcharts de GWP: gráficos circulares

Los gráficos circulares se utilizan para dibujar gráficos circulares. En esta sección, discutiremos los diferentes tipos de gráficos circulares.

No Señor. Tipo de gráfico y descripción
1 Pastel básico

Gráfico circular básico.
2 Pastel con leyendas

Gráfico circular con leyendas.
3 Gráfico de anillos

Gráfico de anillos.

A continuación se muestra un ejemplo de un gráfico de dispersión básico.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts .

A continuación se ofrece un ejemplo de un gráfico de dispersión básico.

Configuraciones

Veamos ahora las configuraciones / pasos adicionales realizados.

serie

Configure el tipo de gráfico para que se base en la dispersión. series.typedecide el tipo de serie del gráfico. Aquí, el valor predeterminado es "línea".

var chart = {
   type: 'scatter',
   zoomType: 'xy'
};

Ejemplo

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {         
      title : {
         text: 'Scatter plot'   
      },      
      series : [{
         type: 'scatter',
         zoomType:'xy',
         name: 'Browser share',
         data: [ 1, 1.5, 2.8, 3.5, 3.9, 4.2 ]
      }]
   };
}

Resultado

Verifica el resultado.

Los gráficos dinámicos se utilizan para dibujar gráficos basados ​​en datos donde los datos pueden cambiar después de la representación del gráfico. En esta sección, discutiremos los diferentes tipos de gráficos dinámicos.

No Señor. Tipo de gráfico y descripción
1 Spline actualizándose cada segundo

El gráfico de splines se actualiza cada segundo.
2 Haga clic para agregar un punto

Gráfico con capacidad de suma de puntos.

Los gráficos combinados se utilizan para dibujar gráficos mixtos; por ejemplo, gráfico de barras con gráfico circular. En esta sección, discutiremos los diferentes tipos de tablas de combinaciones.

No Señor. Tipo de gráfico y descripción
1 Columna, línea y circular

Gráfico con columna, línea y circular.
2 Ejes duales, línea y columna

Gráfico con ejes duales, línea y columna.
3 Varios ejes

Gráfico que tiene varios ejes.
4 Dispersión con línea de regresión

Gráfico de dispersión con línea de regresión.

Los gráficos 3D se utilizan para dibujar gráficos tridimensionales. En esta sección, discutiremos los diferentes tipos de gráficos 3D.

No Señor. Tipo de gráfico y descripción
1 Columna 3D

Gráfico de columnas 3D.
2 Dispersión 3D

Gráfico de dispersión 3D.
3 Pastel 3D

Gráfico circular 3D.

Los gráficos de mapas se utilizan para dibujar mapas de calor o gráficos de mapas de árboles. En esta sección, discutiremos los diferentes tipos de gráficos de mapas.

No Señor. Tipo de gráfico y descripción
1 Mapa de calor

Mapa de calor.
2 Mapa del árbol

Mapa del árbol.