En esta página, se describe el concepto y el uso de funciones en las tablas de datos de gráficos.
- ¿Qué son las funciones?
- ¿Qué funciones están disponibles?
- Jerarquía y asociatividad de las funciones
- Asigna una función
¿Qué son las funciones?
Los objetos Google DataTable y DataView ahora admiten funciones de columna asignadas explícitamente. Una función de columna describe el propósito de los datos en esa columna; por ejemplo, una columna puede contener datos que describen texto de información sobre la herramienta, anotaciones de datos o indicadores de incertidumbre. La mayoría de las funciones de columna se aplican a la columna de “datos” que la precede, ya sea inmediatamente antes o después de la primera de un grupo de columnas de función consecutivas. Por ejemplo, podrías tener dos columnas después de una columna de “datos”, una para “información sobre la herramienta” y otra para “anotación”. Sin embargo, después de la columna "dominio", también suelemos permitir las funciones de anotación "anotación" y "anotación"
Nota: Si deseas controlar el contenido de la información sobre la herramienta que aparece cuando el usuario se desplaza sobre un gráfico, consulta Sugerencias de herramientas.
Originalmente, solo había dos funciones disponibles para una columna: “dominio”, que especifica los valores de los ejes principales, y “datos”, que especifican las alturas de las barras, los anchos de las partes del gráfico circular, etcétera. Estas funciones se asignaron de forma implícita, según el orden y el tipo de las columnas de la tabla. Sin embargo, con la capacidad de asignar funciones de columna de forma explícita, ahora puedes agregar columnas opcionales que proporcionan funciones interesantes y nuevas a un gráfico, como etiquetas de anotación arbitrarias, desplazamiento del cursor y barras de incertidumbre.
Si no asignas explícitamente la función de una columna, su función se infiere por el orden de la columna en la tabla, de acuerdo con la especificación de formato de datos del gráfico. En esta página, se muestran las funciones disponibles para asignar de forma explícita y cómo asignarlas.
A continuación, se muestra una comparación de lo que puedes hacer con un gráfico de líneas usando solo las funciones inferidas predeterminadas, en comparación con las funciones adicionales asignadas de forma explícita.
Formato de tabla de datos de gráfico de líneas:
| Columna 0 | Columna 1 | … | Columna N | |
|---|---|---|---|---|
| Objetivo | Valores de la línea 1 | … | Valores de línea N | |
| Tipo de datos | número | … | número | |
| Rol | dominio | datos | … | datos |
| Funciones de columna compatibles opcionales |
|
|
… |
|
| Gráfico sin funciones de columnas explícitas | Gráfico con funciones de columna explícitas |
|---|---|
|
|
|
Este gráfico no aplica funciones de forma explícita y, por lo tanto, solo puede usar el diseño de columnas básico de datos y dominio que se muestra arriba. Tabla de datos: var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addRows([
['April',1000],
['May', 1170],
['June', 660],
['July', 1030]
]); |
En este gráfico, se asignan funciones de forma explícita, por lo que se pueden agregar las columnas opcionales. Este gráfico tiene columnas opcionales para las funciones de anotación, anotación de texto, intervalo y certeza.
Tabla de datos: var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col.
data.addColumn({type:'string', role:'annotationText'}); // annotationText col.
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
['April',1000, 900, 1100, 'A','Stolen data', true],
['May', 1170, 1000, 1200, 'B','Coffee spill', true],
['June', 660, 550, 800, 'C','Wumpus attack', true],
['July', 1030, null, null, null, null, false]
]); |
¿Qué funciones están disponibles?
En la siguiente tabla, se enumeran todas las funciones que admite Google Charts. No todas las funciones son compatibles con todos los tipos de gráfico. En la documentación de cada gráfico, se describe qué funciones están disponibles y dónde se usan. Las funciones se renderizan de manera diferente para los diferentes tipos de gráficos.
| Rol | Descripción | Ejemplo |
|---|---|---|
| anotación | Texto que se mostrará en el gráfico cerca del dato asociado. El texto se muestra sin interacción del usuario. Las anotaciones y el texto de las anotaciones se pueden asignar a datos y categorías (etiquetas de ejes). Existen dos estilos de anotaciones: el punto (predeterminado), que dibuja el texto de la anotación cerca del punto especificado, y la línea, que dibuja el texto de la anotación en una línea que divide el área del gráfico. Puedes especificar el estilo de línea si configuras esta opción de gráfico: Tipo de datos: string Valor predeterminado: String vacía |
Datos: label: '0', '0', '0', '0', '''' ['' [null]" [/"] '' ['' [null], '' ['' ['' [““,“null”,{}“null””, ““null””, “null”, “null”, “null”, “null”, “null”,
La "A" y la "B" de este gráfico son anotaciones. Desplaza el cursor sobre la anotación para ver el texto. Ten en cuenta que debes colocar el cursor sobre la anotación, no el dato al que se aplica, para mostrar el valor de textText. Se aceptan valores nulos para las celdas de anotación y de anotación. Sin embargo, si tienes un valor de anotaciones de texto, debes tener un valor de anotación asociado. |
| AnnotationText | Texto extendido para mostrar cuando el usuario se desplaza sobre la anotación asociada Las anotaciones y el texto de las anotaciones se pueden asignar a datos y categorías (etiquetas de ejes). Si tienes una columnaAnnotationText, también debes tener una. Por el contrario, el texto de información sobre la herramienta se muestra cuando el usuario se desplaza sobre el punto de datos asociado en el gráfico. Tipo de datos: string Valor predeterminado: String vacía |
|
| certeza | Indica si un dato es seguro o no. La forma en que se muestra esto depende del tipo de gráfico; por ejemplo, se puede indicar mediante líneas discontinuas o un relleno a rayas. Para los gráficos de líneas y de áreas, el segmento entre dos puntos de datos es seguro solo si ambos puntos son seguros. Tipo de datos: booleano, donde es verdadero, pero falso es incierto. Predeterminado: verdadero |
|
| énfasis | Se destaca los datos especificados del gráfico. Se muestran como una línea gruesa o un punto grande. Para los gráficos de líneas y de áreas, el segmento entre dos datos se enfatiza solo si se destacan ambos datos. Tipo de datos: booleano Valor predeterminado: falso |
Datos: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, emphasis, data, emphasis
'2004', 1000, true, 400, false
'2005', 1170, true, 460, true
'2006', 660, false, 1120, true
'2007', 1030, false, 540, true
En este gráfico, la serie "Ventas" tiene un segmento destacado, designado por la columna tres, filas uno y dos. La serie "Gastos" tiene dos segmentos destacados, designados por la quinta columna, filas dos, tres y cuatro. Tenga en cuenta que se debe enfatizar ambos puntos de límite. |
| intervalo | Indica el rango de datos potenciales de un punto específico. Los intervalos suelen mostrarse como indicadores del rango de estilo de la barra I. Las columnas de intervalo son columnas numéricas; agrega columnas de intervalo en pares y marca el valor alto y bajo de la barra. Los valores del intervalo se deben agregar en un valor creciente, de izquierda a derecha. Tipo de datos: número Configuración predeterminada: Sin intervalo |
Datos: label: 'Day', 'Stock value', null, null
role: domain, data, interval, interval
'Mon', 38, 20, 45
'Tue', 55, 31, 66
'Wed', 77, 50, 80
'Thurs', 66, 50, 77
En este gráfico, los valores del intervalo definen una barra I que rodea los puntos. Los valores aumentan de izquierda a derecha. Los intervalos más altos y más bajos alrededor de un punto marcan la parte superior e inferior de la barra. Nota: Para obtener más detalles sobre los intervalos, consulta Intervalos. |
| Alcance | Indica si un punto está dentro o fuera del alcance. Si un punto está fuera del alcance, queda fuera de énfasis visual. En los gráficos de líneas y áreas, el segmento entre dos datos está dentro del alcance si cualquiera de los extremos está dentro del alcance. Tipo de datos: booleano, donde verdadero significa en alcance. Predeterminado: verdadero |
Datos: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, scope, data, scope
'2004', 1000, false, 400, true
'2005', 1170, false, 460, false
'2006', 660, true, 1120, false
'2007', 1030, true, 540, false
La primera columna de alcance se aplica a la columna de datos de ventas a su izquierda. El primer segmento está fuera del alcance porque ambos puntos de límite están fuera del alcance. La segunda columna de alcance se aplica a la columna de datos “Gastos” a la izquierda. El primer segmento está marcado como dentro del alcance porque uno de sus puntos de límite está fuera del alcance. El resto de la línea está fuera del alcance porque todos los demás puntos están fuera del alcance. |
| estilo |
Define el estilo de ciertas propiedades de diferentes aspectos de sus datos. Esos valores son los siguientes:
Tipo de datos: string, en la que se pueden aplicar varios estilos con una sintaxis Valor predeterminado: null |
Datos:
label: 'Character', 'Popularity', 'Style',
role: domain, data, style,
'Hulk', 50, 'color: green',
'Captain America', 75, 'color: #0000cf;' +
'stroke-color: #cf001d',
'Wolverine', 90, 'opacity: 0.5;' +
'stroke-width: 5;' +
'stroke-color: #01a0ff;' +
'fill-color: #fff600',
'Iron Man', 60, 'color: #db9500;' +
'stroke-width: 10;' +
'stroke-color: #a30300',
'Spider Man', 100, 'bar {' +
'fill-color: #c8001d;' +
'stroke-width: 3;' +
'stroke-color: #1800c8}'
En este gráfico, el estilo de cada barra es independiente de los demás que usan la función de columna Nota: Se documentan más detalles en otros lugares sobre cómo personalizar el estilo de puntos, líneas y barras. Consulta también las opciones de cada tipo de gráfico en el que se pueden especificar estilos para otros tipos de entidades, como áreas, texto y cuadros. |
| Información sobre la herramienta |
Texto que se mostrará cuando el usuario se desplace sobre el dato asociado con esta fila. Nota: Esto no es compatible con la visualización del cuadro de burbujas. El contenido de la información sobre la herramienta de HTML de Bubble Chart no se puede personalizar. Tipo de datos: string Valor predeterminado: Valor de puntos de datos |
Datos: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, tooltip, data, tooltip
'2004', 1000, '1M$ sales, 400, '$0.4M expenses
in 2004' in 2004'
'2005', 1170, '1.17M$ sales, 460, '$0.46M expenses
in 2005' in 2005'
'2006', 660, '.66$ sales, 1120, '$1.12M expenses
in 2006' in 2006'
'2007', 1030, '1.03M$ sales, 540, '$0.54M expenses
in 2007' in 2007'
Desplácese sobre los datos para mostrar el texto de la información sobre la herramienta. Los datos de la información sobre la herramienta se asignan a todos los puntos de ambas líneas, en las columnas 3 y 5. Nota: Para obtener más detalles sobre cómo personalizar la información sobre la herramienta, consulta Sugerencias de herramientas. |
| dominio | No deberías tener que asignar esta función de forma explícita, a menos que diseñes un gráfico de varios dominios (que se muestra aquí); el formato básico de la tabla de datos permite que el motor de gráficos infiera que las columnas son columnas de dominio. Sin embargo, debes saber qué columnas son columnas de dominio para saber qué otras columnas pueden modificar. Las columnas de dominio especifican etiquetas en el eje principal del gráfico. A veces, se pueden usar varias columnas de dominio para admitir varias escalas dentro del mismo gráfico. Tipo de datos: Por lo general, string, pero ocasionalmente número o fecha |
Datos:
label: '2009, '2009, '2009, '2008, '2008 '2008
Quarter', Sales', Expenses', Quarter', Sales', Expenses'
role: domain, data, data, domain, data, data
'Q1/09', 1000, 400, 'Q1/08', 800, 300
'Q2/09', 1170, 460, 'Q2/08', 750, 400
'Q3/09', 660, 1120, 'Q3/08', 700, 540
'Q4/09', 1030, 540, 'Q4/08', 820, 620
En este ejemplo, se muestra un gráfico de varios dominios. Las primeras dos columnas de datos modifican el primer dominio ("trimestre de 2009"), y las últimas dos columnas de datos modifican el segundo dominio ("trimestre de 2008"). Ambos dominios se superponen en las mismas escalas de los ejes. |
| datos | No deberías necesitar asignar esta función de forma explícita, ya que el formato básico de la tabla de datos permite que el motor de gráficos infiera qué columnas son columnas de dominio. Sin embargo, debes saber qué columnas son columnas de datos para saber qué otras columnas pueden modificarla. Las columnas de función de datos especifican los datos de series que se renderizarán en el gráfico. En la mayoría de los gráficos, una columna = una serie, pero esto puede variar según el tipo de gráfico (por ejemplo, los gráficos de dispersión requieren dos columnas de datos para la primera serie y una adicional para cada serie adicional; los gráficos de velas requieren cuatro columnas de datos para cada serie). Tipo de datos: número |
Jerarquía y asociatividad de los roles
En el siguiente diagrama, se muestra qué columnas de función se pueden aplicar a qué otras columnas de función. Todas las columnas, excepto las columnas de dominio, se aplican al vecino izquierdo más cercano al que se puede aplicar.
Por ejemplo, una columna scope se aplica a la columna data más cercana a la izquierda; una columna annotationText se aplicará a la columna annotation más cercana a su izquierda, una annotation se aplicará a la columna data o domain más cercana a su izquierda.
Cómo asignar una función
Las funciones se asignan como una propiedad de la columna en un objeto DataTable. Existen varias formas de crear una columna de función, pero estas son las más comunes:
Las primeras dos técnicas dibujan el siguiente gráfico:
Método DataTable.addColumn
En el siguiente ejemplo, se crea un gráfico de barras con un marcador de intervalo en tres de las barras. La tercera y cuarta columnas especifican los marcadores de intervalo con el método DataTable.addColumn().
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain column.
data.addColumn('number', 'Sales'); // Implicit data column.
data.addColumn({type:'number', role:'interval'});
data.addColumn({type:'number', role:'interval'});
data.addColumn('number', 'Expenses');
data.addRows([
['April',1000, 900, 1100, 400],
['May', 1170, 1000, 1200, 460],
['June', 660, 550, 800, 1120],
['July', 1030, , , 540]
]);
var chart = new google.visualization.BarChart(
document.getElementById('visualization'));
chart.draw(data,
{width: 800, height: 600, title: 'Company Performance'});
Notación literal de JavaScript
En el literal de JSON, debes especificar una propiedad p de la columna con el valor "role":"role-type".
En el siguiente ejemplo, se muestra cómo especificar funciones con la notación literal de JavaScript. Esto solo se puede hacer durante la creación de la tabla.
{"cols":[
{"id":"","label":"Month","pattern":"","type":"string"},
{"id":"","label":"Sales","pattern":"","type":"number"},
{"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
{"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
{"id":"","label":"Expenses","pattern":"","type":"number"}],
"rows":[
{"c":[
{"v":"April","f":null},
{"v":1000,"f":null},
{"v":900,"f":null},
{"v":1100,"f":null},
{"v":400,"f":null}]},
{"c":[
{"v":"May","f":null},
{"v":1170,"f":null},
{"v":1000,"f":null},
{"v":1200,"f":null},
{"v":460,"f":null}]},
{"c":[{"v":"June","f":null},
{"v":660,"f":null},
{"v":550,"f":null},
{"v":800,"f":null},
{"v":1120,"f":null}]},
{"c":[
{"v":"July","f":null},
{"v":1030,"f":null},
{"v":null,"f":null},
{"v":null,"f":null},
{"v":540,"f":null}]}],
"p":null
}
Método DataView.setColumns
Cuando creas una vista, puedes establecer de forma explícita la función de una columna. Esto es útil cuando se crea una columna calculada nueva. Consulta DataView.setColumns() para obtener más información.