Gráficos de Google - Guía rápida
Google Chartses 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.
Caracteristicas
Las siguientes son las características más destacadas de la biblioteca de Google Charts.
Compatability - Funciona perfectamente en todos los principales navegadores y plataformas móviles como Android e iOS.
Multitouch Support- Soporta multitouch en plataformas basadas en pantalla táctil 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 loader.js, 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. googlecharts 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 las categorías de fechas.
Print - Imprimir gráfico usando la página web.
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 de Google Charts 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 | Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines 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 próximos capítulos, analizaremos cada tipo de gráficos mencionados anteriormente en detalle con ejemplos.
Licencia
Google Charts es de código abierto y de uso gratuito. Siga el enlace: Condiciones de servicio .
En este capítulo, analizaremos cómo configurar la biblioteca de Google Charts para su uso en el desarrollo de aplicaciones web.
Instalar Google Charts
Hay dos formas de utilizar Google Charts.
Download - Descárgalo localmente desde https://developers.google.com/chart y utilícelo.
CDN access- También tienes acceso a un CDN. La CDN le dará acceso en todo el mundo a centros de datos regionales que, en este caso, alojan Google Charthttps://www.gstatic.com/charts.
Uso de gráficos de Google descargados
Incluya el archivo JavaScript de googlecharts en la página HTML usando la siguiente secuencia de comandos:
<head>
<script src = "/googlecharts/loader.js"></script>
</head>Usando CDN
Estamos utilizando las versiones CDN de la biblioteca de Google Chart a lo largo de este tutorial.
Incluya el archivo JavaScript de Google Chart en la página HTML utilizando el siguiente script:
<head>
<script src = "https://www.gstatic.com/charts/loader.js"></script>
</head>En este capítulo, mostraremos la configuración necesaria para dibujar un gráfico utilizando la API de Google Chart.
Paso 1: crear una página HTML
Cree una página HTML con las bibliotecas de 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>aquí containerdiv se utiliza para contener el gráfico dibujado con la biblioteca de Google Chart. Aquí estamos cargando la última versión de la API corecharts usando el método google.charts.load.
Paso 2: crear configuraciones
La biblioteca de Google Chart usa configuraciones muy simples usando la sintaxis json.
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Aquí los datos representan los datos json y las opciones representan la configuración que utiliza la biblioteca de Google Chart para dibujar un gráfico dentro del contenedor div usando el método draw (). Ahora configuraremos los diversos parámetros para crear la cadena json requerida.
título
Configure las opciones del gráfico.
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
'width':550,
'height':400};Tabla de datos
Configure los datos que se mostrarán en el gráfico. DataTable es una colección estructurada de tabla especial que contiene los datos del gráfico. Las columnas de la tabla de datos representan las leyendas y las filas representan los datos correspondientes. El método addColumn () se usa para agregar una columna donde el primer parámetro representa el tipo de datos y el segundo parámetro representa la leyenda. El método addRows () se usa para agregar filas en consecuencia.
// 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]
]);Paso 3: Dibuja el gráfico
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Ejemplo
A continuación se muestra el ejemplo completo:
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>El siguiente código llama a la función drawChart para dibujar el gráfico cuando la biblioteca de Google Chart se carga por completo.
google.charts.setOnLoadCallback(drawChart);Resultado
Verifique el resultado.
Los gráficos de área se utilizan para dibujar gráficos basados en áreas. En esta sección, analizaremos los siguientes tipos de gráficos basados en áreas.
| No Señor. | Tipo de gráfico y descripción |
|---|---|
| 1 | Área básica Gráfico de área 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. |
Los gráficos de barras se utilizan para dibujar gráficos basados en barras. En esta sección, analizaremos los siguientes 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 | Gráfico de barras agrupadas Gráfico de barras agrupadas. |
| 3 | Barra apilada Gráfico de barras con barras apiladas unas sobre otras. |
| 4 | Barra apilada negativa Gráfico de barras con pila negativa. |
| 5 | Barra de porcentaje apilado Gráfico de barras con datos en términos porcentuales. |
| 6 | Gráfico de barras de material Un gráfico de barras inspirado en Material Design. |
| 7 | Gráfico de barras con etiquetas de datos Gráfico de barras con etiquetas de datos. |
Los gráficos de burbujas se utilizan para dibujar gráficos basados en burbujas. En esta sección, analizaremos los siguientes tipos de gráficos basados en burbujas.
| No Señor. | Tipo de gráfico y descripción |
|---|---|
| 1 | Burbuja básica Gráfico de burbujas básico. |
| 2 | Gráfico de burbujas con etiquetas de datos Gráfico de burbujas con etiquetas de datos. |
Los gráficos de calendario se utilizan para dibujar actividades a lo largo de un largo período de tiempo, como meses o años. En esta sección, analizaremos los siguientes tipos de gráficos basados en el calendario.
| No Señor. | Tipo de gráfico y descripción |
|---|---|
| 1 | Calendario básico Gráfico de calendario básico. |
| 2 | Calendario con colores personalizados Gráfico de calendario personalizado. |
Los gráficos de velas se utilizan para mostrar el valor de apertura y cierre sobre una variación de valor y normalmente se utilizan para representar acciones. En esta sección, analizaremos los siguientes tipos de gráficos basados en velas.
| No Señor. | Tipo de gráfico y descripción |
|---|---|
| 1 | Candelabro básico Gráfico de velas básico. |
| 2 | Candelero con colores personalizados Gráfico de velas personalizado. |
Los gráficos de columnas se utilizan para dibujar gráficos basados en columnas. En esta sección, analizaremos los siguientes 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 agrupada Gráfico de columnas agrupadas. |
| 3 | Columna apilada Gráfico de columnas con columnas apiladas una sobre otra. |
| 4 | Columna apilada negativa Gráfico de columnas con pila negativa. |
| 5 | Porcentaje de columna apilada Gráfico de columnas con datos en términos porcentuales. |
| 6 | Gráfico de columna de material Un gráfico de columnas inspirado en Material Design. |
| 7 | Gráfico de columnas con etiquetas de datos Gráfico de columnas con etiquetas de datos. |
El gráfico de combinación ayuda a representar cada serie como un tipo de marcador diferente de la siguiente lista: línea, área, barras, velas y área escalonada. Para asignar un tipo de marcador predeterminado para la serie, use la propiedad seriesType. La propiedad de la serie se utilizará para especificar las propiedades de cada serie individualmente. Ya hemos visto la configuración utilizada para dibujar este gráfico en el capítulo Sintaxis de configuración de Google Charts . Entonces, veamos el ejemplo completo.
Configuraciones
Hemos usado ComboChart class para mostrar un gráfico basado en combinaciones.
//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));Ejemplo
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>Resultado
Verifique el resultado.
Un histograma es un gráfico que agrupa datos numéricos en depósitos y muestra los depósitos como columnas segmentadas. Se utilizan para representar la distribución de un conjunto de datos según la frecuencia con la que los valores caen en rangos. Google Charts elige automáticamente la cantidad de depósitos. Todos los depósitos tienen el mismo ancho y una altura proporcional al número de puntos de datos del depósito. Los histogramas son similares a los gráficos de columnas en otros aspectos. En esta sección, analizaremos los siguientes tipos de gráficos basados en histogramas.
| No Señor. | Tipo de gráfico y descripción |
|---|---|
| 1 | Histograma básico Gráfico de histograma básico. |
| 2 | Control de color Color personalizado del gráfico de histrograma. |
| 3 | Control de cubos Cubos personalizados de gráfico de histrograma. |
| 4 | Serie múltiple Gráfico de histrograma que tiene varias series. |
Los gráficos de líneas se utilizan para dibujar gráficos basados en líneas. En esta sección, analizaremos los siguientes tipos de gráficos basados en líneas.
| No Señor. | Tipo de gráfico y descripción |
|---|---|
| 1 | Linea basica Gráfico de líneas básico. |
| 2 | Con puntos visibles Gráfico con puntos de datos visibles. |
| 3 | Color de fondo personalizable Gráfico con color de fondo personalizado. |
| 4 | Color de línea personalizable Gráfico con color de línea personalizado. |
| 5 | Etiquetas de marca y eje personalizables Gráfico con etiquetas personalizadas de ejes y ticks. |
| 6 | Punto de mira Gráficos de líneas que muestran puntos de mira en el punto de datos en la selección. |
| 7 | Estilo de línea personalizable Gráfico con color de línea personalizado. |
| 8 | Gráficos de líneas con líneas curvas Gráfico con líneas curvas suaves. |
| 9 | Gráfico de líneas de material Un gráfico de líneas inspirado en Material Design. |
| 10 | Gráfico de líneas X superior Un gráfico de líneas inspirado en Material Design con el eje X en la parte superior del gráfico. |
Un gráfico de mapa de Google utiliza la API de Google Maps para mostrar el mapa. Los valores de los datos se muestran como marcadores en el mapa. Los valores de los datos pueden ser coordenadas (pares lat-long) o direcciones reales. El mapa se escalará en consecuencia para que incluya todos los puntos identificados.
| No Señor. | Tipo de gráfico y descripción |
|---|---|
| 1 | Mapa básico Mapa básico de Google. |
| 2 | Mapa usando latitud / longitud Mapa con ubicaciones especificadas mediante latitud y longitud. |
| 3 | Personalización de marcadores Marcadores personalizados en el mapa. |
El organigrama ayuda a representar una jerarquía de nodos, que se utiliza para representar las relaciones superiores / subordinadas en una organización. Por ejemplo, un árbol genealógico es un tipo de organigrama. Ya hemos visto la configuración utilizada para dibujar este gráfico en el capítulo Sintaxis de configuración de Google Charts . Entonces, veamos el ejemplo completo.
Configuraciones
Hemos usado OrgChart clase para mostrar organigrama basado en la organización.
//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));Ejemplo
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>Resultado
Verifique el resultado.
Los gráficos circulares se utilizan para dibujar gráficos circulares. En esta sección, analizaremos los siguientes 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 | Gráfico de anillos Gráfico de anillos. |
| 3 | Gráfico circular 3D Gráfico circular 3D. |
| 4 | Gráfico circular con rebanadas explosionadas Gráfico circular con rebanadas explosionadas. |
Un gráfico de Sankey es una herramienta de visualización y se utiliza para representar un flujo de un conjunto de valores a otro. Los objetos conectados se denominan nodos y las conexiones se denominan enlaces. Los Sankeys se utilizan para mostrar un mapeo de muchos a muchos entre dos dominios o múltiples rutas a través de un conjunto de etapas.
| No Señor. | Tipo de gráfico y descripción |
|---|---|
| 1 | Gráfico básico de Sankey Gráfico básico de Sankey. |
| 2 | Gráfico de Sankey multinivel Gráfico Sankey multinivel. |
| 3 | Personalización del gráfico de Sankey Gráfico de Sankey personalizado. |
Los gráficos de Sankey, los gráficos de dispersión, los gráficos de áreas escalonadas, la tabla, las líneas de tiempo, el mapa de árbol y las líneas de tendencia se utilizan para dibujar gráficos basados en la dispersión. En esta sección, analizaremos los siguientes tipos de gráficos basados en dispersión.
| No Señor. | Tipo de gráfico y descripción |
|---|---|
| 1 | Dispersión básica Gráfico de dispersión básico. |
| 2 | Gráfico de dispersión de material Gráfico de dispersión de material. |
| 3 | Gráfico de dispersión de doble eje Y Gráfico de dispersión de material con doble eje Y |
| 4 | Gráfico de dispersión del eje X superior Gráfico de dispersión de material con eje X en la parte superior. |
Un gráfico de áreas escalonado es un gráfico de áreas basado en pasos. Vamos a discutir los siguientes tipos de gráficos de áreas escalonadas.
| No Señor. | Tipo de gráfico y descripción |
|---|---|
| 1 | Gráfico básico escalonado Gráfico básico de áreas escalonadas. |
| 2 | Gráfico escalonado apilado Gráfico de áreas escalonadas apiladas. |
| 3 | Gráfico escalonado 100% apilado Gráfico de áreas escalonadas 100% apiladas. |
El gráfico de tabla ayuda a representar una tabla que se puede ordenar y paginar. Las celdas de la tabla se pueden formatear utilizando cadenas de formato o insertando HTML directamente como valores de celda. Los valores numéricos están alineados a la derecha de forma predeterminada; Los valores booleanos se muestran como marcas de verificación o cruces. Los usuarios pueden seleccionar filas individuales con el teclado o el mouse. Los encabezados de columna se pueden utilizar para ordenar. La fila del encabezado permanece fija durante el desplazamiento. La tabla dispara eventos correspondientes a la interacción del usuario. Ya hemos visto la configuración utilizada para dibujar este gráfico en el capítulo Sintaxis de configuración de Google Charts . Entonces, veamos el ejemplo completo.
Configuraciones
Hemos usado Table class para mostrar el gráfico basado en tablas.
//table chart
var chart = new google.visualization.Table(document.getElementById('container'));Ejemplo
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>Resultado
Verifique el resultado.
Las líneas de tiempo describen cómo se utiliza un conjunto de recursos a lo largo del tiempo. Vamos a discutir los siguientes tipos de gráficos de líneas de tiempo.
| No Señor. | Tipo de gráfico / descripción |
|---|---|
| 1 | Gráfico de líneas de tiempo básicas Gráfico de líneas de tiempo básicas |
| 2 | Gráfico de líneas de tiempo con etiquetas de datos Gráfico de líneas de tiempo con etiquetas de datos |
| 3 | Gráfico de líneas de tiempo sin etiqueta de fila Gráfico de líneas de tiempo sin etiqueta de fila |
| 4 | Gráfico de líneas de tiempo para colorear Gráfico de líneas de tiempo personalizado |
TreeMap es una representación visual de un árbol de datos, donde cada nodo puede tener cero o más hijos y un padre (excepto la raíz). Cada nodo se muestra como un rectángulo, se puede dimensionar y colorear según los valores que le asignemos. Los tamaños y colores se valoran en relación con todos los demás nodos del gráfico. A continuación se muestra un ejemplo de un gráfico de mapa de árbol. Ya hemos visto la configuración utilizada para dibujar este gráfico en el capítulo Sintaxis de configuración de Google Charts . Entonces, veamos el ejemplo completo.
Configuraciones
Hemos usado TreeMap class para mostrar el diagrama de mapa de árbol.
//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));Ejemplo
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>Resultado
Verifique el resultado.
Una línea de tendencia es una línea superpuesta en un gráfico para revelar la dirección general de los datos. Los gráficos de Google pueden generar automáticamente líneas de tendencia para gráficos de Sankey, gráficos de dispersión, gráficos de áreas escalonadas, tablas, líneas de tiempo, mapas de árbol, líneas de tendencia, gráficos de barras, gráficos de columnas y gráficos de líneas. Vamos a analizar los siguientes tipos de gráficos de líneas de tendencia.
| No Señor. | Tipo de gráfico y descripción |
|---|---|
| 1 | Gráfico de líneas de tendencia básicas Gráfico de líneas de tendencia básicas. |
| 2 | Gráfico de líneas de tendencia exponencial Gráfico de líneas de tendencia exponencial. |
| 3 | Gráfico de líneas de tendencia polinomiales Gráfico de líneas de tendencia polinomiales. |