Highcharts - Guía rápida

Highchartses una biblioteca de gráficos puramente basada en JavaScript destinada a mejorar las aplicaciones web al agregar capacidad de gráficos interactivos. Admite una amplia gama de gráficos. Los gráficos se dibujan utilizando SVG en navegadores estándar como Chrome, Firefox, Safari, Internet Explorer (IE). En el IE 6 heredado, se usa VML para dibujar los gráficos.

Características de la biblioteca Highcharts

Analicemos ahora algunas características importantes de la biblioteca Highcharts.

  • Compatability - Funciona perfectamente en todos los principales navegadores y plataformas móviles como Android e iOS.

  • Multitouch Support - Admite multitouch en plataformas basadas en pantallas táctiles como Android e iOS. Ideal para iPhone / iPad y teléfonos inteligentes / tabletas basados ​​en Android.

  • Free to Use - De código abierto y de uso gratuito para fines no comerciales.

  • Lightweight - La biblioteca central highcharts.js con un tamaño de casi 35 KB, es una biblioteca extremadamente liviana.

  • Simple Configurations - Utiliza json para definir varias configuraciones de los gráficos y es muy fácil de aprender y usar.

  • Dynamic - Permite modificar el gráfico incluso después de su generación.

  • Multiple axes- No restringido a los ejes x, y. Soporta múltiples ejes en los gráficos.

  • Configurable tooltips- La información sobre herramientas aparece cuando un usuario se desplaza sobre cualquier punto de un gráfico. Highcharts proporciona un formateador incorporado de información sobre herramientas o un formateador de devolución de llamada para controlar la información sobre herramientas mediante programación.

  • DateTime support- Manejar la fecha y la hora especialmente. Proporciona numerosos controles incorporados sobre categorías de fechas.

  • Export - Exportar gráfico a formato PDF / PNG / JPG / SVG habilitando la función de exportación.

  • Print - Imprimir gráfico usando la página web.

  • Zoomablity - Admite el gráfico de zoom para ver los datos con mayor precisión.

  • External data- Admite la carga de datos de forma dinámica desde el servidor. Proporciona control sobre los datos mediante funciones de devolución de llamada.

  • Text Rotation - Admite la rotación de etiquetas en cualquier dirección.

Tipos de gráficos admitidos

La biblioteca Highcharts proporciona los siguientes tipos de gráficos:

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

Line Charts

Se utiliza para dibujar gráficos basados ​​en líneas / splines.
2

Area Charts

Se utiliza para dibujar gráficos de áreas.
3

Pie Charts

Se utiliza para dibujar gráficos circulares.
4

Scatter Charts

Se utiliza para dibujar gráficos dispersos.
5

Bubble Charts

Se utiliza para dibujar gráficos basados ​​en burbujas.
6

Dynamic Charts

Se utiliza para dibujar gráficos dinámicos donde el usuario puede modificar gráficos.
7

Combinations

Se utiliza para dibujar combinaciones de una variedad de gráficos.
8

3D Charts

Se utiliza para dibujar gráficos en 3D.
9

Angular Gauges

Se utiliza para dibujar gráficos de tipo velocímetro.
10

Heat Maps

Se usa para dibujar mapas de calor.
11

Tree Maps

Se utiliza para dibujar mapas de árboles.

En los capítulos siguientes, analizaremos cada tipo de gráficos mencionados anteriormente en detalle con ejemplos.

Licencia

Highcharts es de código abierto y de uso gratuito para fines no comerciales. Para utilizar Highcharts en proyectos comerciales, siga el enlace - Licencia y precios

En este capítulo, discutiremos cómo configurar la biblioteca Highcharts para usarla en el desarrollo de aplicaciones web.

Highcharts requiere jQuery como dependencia. Primero, instalaremos la biblioteca jQuery y luego la biblioteca Highcharts.

Instalar jQuery

Hay dos formas de usar jQuery.

  • Download- Descárguelo localmente desde jQuery.com y úselo .

  • CDN access- También tienes acceso a un CDN. La CDN le dará acceso en todo el mundo a los centros de datos regionales; en este caso, host de Google. Esto significa que el uso de CDN traslada la responsabilidad de alojar archivos de sus propios servidores a una serie de servidores externos. Esto también ofrece la ventaja de que si el visitante de su página web ya ha descargado una copia de jQuery del mismo CDN, no tendrá que volver a descargarla.

Usando jQuery descargado

Incluya el archivo jQuery JavaScript en la página HTML usando el siguiente script:

<head>
   <script src = "/jquery/jquery.min.js"></script>
</head>

Usando CDN

Estamos utilizando las versiones CDN de la biblioteca jQuery a lo largo de este tutorial.

Incluya el archivo jQuery JavaScript en la página HTML usando el siguiente script:

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
   </script>
</head>

Instalar Highcharts

Las siguientes son las dos formas de utilizar Highcharts.

  • Download - Descárgalo localmente desde highcharts.com y utilícelo.

  • CDN access- También tienes acceso a un CDN. La CDN le dará acceso en todo el mundo a los centros de datos regionales; en este caso, el host de Highcharts - Code.Highcharts.Com.

Usando Highcharts descargados

Incluya el archivo JavaScript de Highcharts en la página HTML usando el siguiente script:

<head>
   <script src = "/highcharts/highcharts.js"></script>
</head>

Usando CDN

Estamos utilizando las versiones CDN de la biblioteca Highcharts a lo largo de este tutorial.

Incluya el archivo JavaScript de Highcharts en la página HTML usando el siguiente script:

<head>
   <script src = "https://code.highcharts.com/highcharts.js"></script>
</head>

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

Paso 1: crear una página HTML

Cree una página HTML con las bibliotecas de JavaScript jQuery y Highcharts.

HighchartsTestHarness.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      
      <script language = "JavaScript">
         $(document).ready(function() {
         });
      </script>
      
   </body>
</html>

Aquí el container div se utiliza para contener el gráfico dibujado con la biblioteca Highcharts.

Paso 2: crear configuraciones

La biblioteca Highcharts usa configuraciones muy simples usando la sintaxis json.

$('#container').highcharts(json);

Aquí, json representa los datos y la configuración de json que utiliza la biblioteca Highcharts para dibujar un gráfico dentro del contenedor div usando el método highcharts (). Ahora, configuraremos los diversos parámetros para crear la cadena json requerida.

título

Configure el título del gráfico.

var title = {
   text: 'Monthly Average Temperature'   
};

subtitular

Configure el subtítulo del gráfico.

var subtitle = {
   text: 'Source: WorldClimate.com'
};

xAxis

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

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

yAxis

Configure el título, las líneas de trazado que se mostrarán en el eje Y.

var yAxis = {
   title: {
      text: 'Temperature (\xB0C)'
   },
   plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
   }]
};

información sobre herramientas

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

var tooltip = {
   valueSuffix: '\xB0C'
}

leyenda

Configure la leyenda para que se muestre en el lado derecho del gráfico junto con otras propiedades.

var legend = {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   borderWidth: 0
};

serie

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

var 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]
   }
];

Paso 3: compila los datos json

Combina todas las configuraciones.

var json = {};

json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;

Paso 4: Dibuja el gráfico

$('#container').highcharts(json);

Ejemplo

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

highcharts_configuration.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text: 'Monthly Average Temperature'   
            };
            var subtitle = {
               text: 'Source: WorldClimate.com'
            };
            var xAxis = {
               categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            };
            var yAxis = {
               title: {
                  text: 'Temperature (\xB0C)'
               },
               plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
               }]
            };   

            var tooltip = {
               valueSuffix: '\xB0C'
            }
            var legend = {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'middle',
               borderWidth: 0
            };
            var 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]
               }
            ];

            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;

            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

Resultado

Verifique 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 Datos cargados Ajax, puntos en los que se puede hacer clic

Gráfico elaborado después de recuperar datos del servidor.
4 Serie temporal, ampliable

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

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

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

Gráfico de splines con bandas de trama.
8 Datos de tiempo con intervalos irregulares

Gráfico de un gran conjunto de datos basados ​​en el tiempo.
9 Eje logarítmico

Gráfico que representa el eje logarítmico.

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.
8 Rango de área

Gráfico de área usando rangos.
9 Rango de área y línea

Gráfico de área usando rango y línea.

Los gráficos de barras se utilizan para dibujar gráficos basados ​​en áreas. 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 Área apilada negativa

Gráfico de barras con pila negativa.

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 Columna con desglose

Gráfico de columnas con capacidad de desglose.
8 Columna con ubicación fija

Gráfico de columnas con ubicación fija.
9 Datos definidos en tabla HTML

Gráfico de columnas utilizando datos definidos en una tabla HTML.
10 Rango de columna

Gráfico de columnas usando rangos.

Los gráficos circulares se utilizan para dibujar gráficos circulares. En esta sección, analizaremos 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.
4 Donut semicírculo

Gráfico de semicírculo de anillos.
5 Pastel con desglose

Gráfico circular con capacidad de desglose.
6 Gráfico circular con degradado

Gráfico circular con relleno degradado.
7 Gráfico circular con monocromo

Gráfico circular con relleno monocromático.

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

No Señor. Tipo de gráfico y descripción
1 Gráfico de dispersión

Gráfico de dispersión.

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

No Señor. Tipo de gráfico y descripción
1 Tabla de burbujas

Gráfico de burbujas.
2 Gráfico de burbujas 3D

Gráfico de burbujas 3D.

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 Columna 3D con nulo

Gráfico de columnas 3D con valores nulos y 0.
3 Columna 3D con apilamiento

Gráfico de columnas 3D con apilamiento y agrupación.
4 Pastel 3D

Gráfico circular 3D.
5 Donut 3D

Gráfico de anillos 3D.

Los gráficos de medidores angulares se utilizan para dibujar gráficos de tipo medidor / calibre. En esta sección, discutiremos los diferentes tipos de gráficos de medidores angulares.

No Señor. Tipo de gráfico y descripción
1 Calibre angular

Gráfico de calibre angular.
2 Calibre sólido

Gráfico de calibre sólido.
3 Reloj

Reloj.
4 Calibre con dos ejes

Tabla de calibres con ejes dobles.
5 Medidor de VU

Gráfico del medidor de VU.

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

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

Mapa de calor.
2 Mapa de calor grande

Mapa de calor grande.

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

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

Mapa de árbol con eje de color.
2 Mapa de árbol con niveles

Mapa de árboles con niveles.
3 Mapa de árbol grande

Mapa de árbol grande.