En esta página, se describe el concepto y el uso de las funciones en las tablas de datos de los gráficos.
- ¿Qué son los roles?
- ¿Qué roles están disponibles?
- Jerarquía y asociatividad de los roles
- Cómo asignar una función
¿Qué son los roles?
Los objetos DataTable y DataView de Google ahora admiten roles de columna asignados de manera explícita. Un rol de columna describe el propósito de los datos en esa columna; por ejemplo, una columna puede contener datos que describen el texto de la información sobre la herramienta, las anotaciones de puntos de datos o los indicadores de incertidumbre. La mayoría de los roles de las columnas se aplican a la columna “datos” que la precede, ya sea que se encuentre inmediatamente antes o antes de la primera de un grupo consecutivo de columnas de funciones. Por ejemplo, puedes tener dos columnas después de la columna de “datos”, una para “información” y otra para “anotación”. Sin embargo, luego de la columna "domain", generalmente permitimos las funciones de las columnas "annotation" y "annotationText".
Nota: Si quieres controlar el contenido de la información sobre la herramienta que aparece cuando el usuario coloca el cursor sobre un gráfico, consulta Sugerencias para herramientas.
Originalmente, solo había dos funciones disponibles para una columna: “dominio”, que especifica los valores del eje principal; y “datos”, que especifica las alturas de la barra, el ancho de la porción del gráfico circular, etc. Estos roles se asignaron de manera implícita, según el orden y el tipo de las columnas de la tabla. Sin embargo, con la capacidad de asignar roles de columna de forma explícita, ahora puedes agregar columnas opcionales que proporcionen características nuevas y atractivas a un gráfico, como etiquetas de anotación arbitraria, texto flotante y barras de incertidumbre.
Si no asignas de forma explícita la función de una columna, su función se infiere según el orden de la columna en la tabla, según la especificación de formato de datos del gráfico. En esta página, se mostrará qué roles están disponibles para asignar de forma explícita y cómo hacerlo.
A continuación, se muestra una comparación de lo que puedes hacer con un gráfico de líneas si usas solo los roles inferidos predeterminados, en comparación con los roles adicionales asignados de forma explícita.
Formato de tabla de datos del gráfico de líneas:
| Columna 0 | Columna 1 | ... | Columna N | |
|---|---|---|---|---|
| Objetivo | Valores de la línea 1 | ... | Valores de la línea N | |
| Tipo de datos | número | ... | número | |
| Rol | dominio | datos | ... | datos |
| Roles de columna admitidos opcionales |
|
|
... |
|
| Gráfico sin roles de columna explícitos | Gráfico con roles de columna explícitos |
|---|---|
|
|
|
Este gráfico no aplica roles de forma explícita, por lo que solo se puede usar el diseño de columnas de datos básicos y dominio que se muestra arriba. DataTable: 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]
]); |
Este gráfico asigna roles de forma explícita, por lo que se pueden agregar columnas opcionales. Este gráfico tiene columnas opcionales para los roles de anotación, anotación de texto, intervalo y certeza.
DataTable: 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é roles están disponibles?
En la siguiente tabla, se enumeran todas las funciones que admite Google Charts. No todos los tipos de gráficos admiten todas las funciones. En la documentación de cada gráfico, se describirá qué funciones están disponibles y dónde se ubican. Las funciones se procesan de manera diferente para los distintos tipos de gráficos.
| Rol | Descripción | Ejemplo |
|---|---|---|
| anotación | Es el texto que se mostrará en el gráfico cerca del dato asociado. El texto se muestra sin ninguna interacción del usuario. Las anotaciones y el texto de las anotaciones se pueden asignar tanto a datos como a categorías (etiquetas de ejes). Existen dos estilos de anotaciones: punto (predeterminado), que dibuja el texto de la anotación cerca del punto especificado, y 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: cadena Configuración predeterminada: String vacía |
Datos: label: 'Year', 'Sales', null, null, 'Expenses', null, null
role: dominio, datos, anotaciones, anotaciones, modelos, datos, anotaciones, '2004'
La “A” y la “B” de este gráfico son anotaciones. Desplázate sobre la anotación para ver el texto correspondiente. Ten en cuenta que debes colocar el cursor sobre la anotación, no sobre el dato en el que se aplica, para mostrar el valor deAnnotationText. Se aceptan valores nulos para las celdas de anotación y anotación de texto; sin embargo, si tienes un valor de anotación de texto, debes tener un valor de anotación asociado. |
| annotationText | Texto extendido que se mostrará cuando el usuario coloque el cursor sobre la anotación asociada. Las anotaciones y el texto de las anotaciones se pueden asignar tanto a datos como a categorías (etiquetas de ejes). Si tienes una columna deAnnotationText, también debes tener una. Por el contrario, el texto de información se muestra cuando el usuario coloca el cursor sobre el dato asociado del gráfico. Tipo de datos: cadena Configuración predeterminada: String vacía |
|
| certeza | Indica si un dato es cierto o no. La forma en que se muestra depende del tipo de gráfico; por ejemplo, se puede indicar con líneas punteadas o relleno a rayas. En los gráficos de líneas y de áreas, el segmento entre dos datos es cierto solo si ambos datos son ciertos. Tipo de datos: booleano, donde verdadero es cierto, falso es incierto. Valor predeterminado: true |
|
| énfasis | Enfatiza los datos especificados del gráfico. Se muestra como una línea gruesa o un punto grande. Para los gráficos de líneas y de áreas, el segmento entre dos puntos de datos se enfatiza solo si ambos datos están enfatizados. Tipo de datos: booleano Valor predeterminado: false |
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 enfatizado, designado por la columna tres, las filas uno y dos. La serie 'Gastos' tiene dos segmentos enfatizados, designados por la quinta columna, las filas dos, tres y cuatro. Ten en cuenta que el énfasis requiere que se enfatice ambos puntos de límite. |
| intervalo | Indica un posible rango de datos para un punto específico. Por lo general, los intervalos se muestran como indicadores de rango de estilo de barra en I. Las columnas de intervalo son numéricas. Agrega columnas de intervalo en pares para marcar los valores bajo y alto de la barra. Los valores de intervalo deben agregarse 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 de intervalo definen una barra en I que rodea los puntos. Los valores aumentan de izquierda a derecha. Los intervalos más alto y más bajo alrededor de un punto marcan la parte superior e inferior de la barra. Nota: Para obtener todos los detalles sobre los intervalos, consulta Intervalos. |
| alcance | Indica si un punto está dentro o fuera del alcance. Si un punto está fuera del alcance, se desenfatiza visualmente. En el caso de los gráficos de líneas y de áreas, el segmento entre dos datos está dentro del alcance si alguno de los extremos están dentro del alcance. Tipo de datos: booleano, donde verdadero significa dentro del alcance. Valor predeterminado: true |
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 "Ventas" a su izquierda. El primer segmento se renderiza 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 su izquierda. El primer segmento está marcado como dentro del alcance porque uno de sus puntos de límite está dentro del alcance; el resto de la línea está fuera del alcance porque todos los demás puntos están marcados como fuera del alcance. |
| estilo |
Aplica diseño a determinadas propiedades de diferentes aspectos de tus 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, cada barra tiene un estilo independiente de las demás mediante el rol de columna Nota: En otras secciones, se documentan más detalles 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. |
|
Texto que se mostrará cuando el usuario coloque el cursor sobre el dato asociado a esta fila. Nota: Esto no es compatible con la visualización del diagrama de burbujas. No se puede personalizar el contenido de la información sobre la herramienta HTML del diagrama de burbujas. Tipo de datos: cadena Valor predeterminado: Punto 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'
Coloca el cursor sobre los datos para mostrar el texto del cuadro de información. Los datos de información 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 información sobre la herramienta, consulta Sugerencias sobre herramientas. |
|
| dominio | No es necesario que asignes 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 qué columnas son columnas de dominio. Sin embargo, debes tener en cuenta qué columnas son columnas de dominio para saber qué otras pueden modificarla. Las columnas de dominio especifican etiquetas a lo largo del 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, en ocasiones, 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 2009") y las dos últimas columnas de datos modifican el segundo dominio ("Trimestre 2008"). Ambos dominios se superponen en las mismas escalas de eje. |
| datos | No es necesario que asignes 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 tener en cuenta qué columnas son de datos para saber qué otras pueden modificarlas. Las columnas de roles de datos especifican los datos de la serie que se renderizarán en el gráfico. En la mayoría de los gráficos, una columna equivale a una serie, pero esto puede variar según el tipo de gráfico (por ejemplo, los diagramas 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 roles se pueden aplicar a qué otras columnas de roles. Todas las columnas, excepto las de dominio, se aplican al vecino izquierdo más cercano al que se puede aplicar.
Entonces, por ejemplo, una columna de scope se aplica a la columna data más cercana a la izquierda; una columna annotationText a la izquierda; una anotación se aplicará a la columna de datos o dominio más cercana a su izquierda.
Cómo asignar una función
Los roles 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 dos primeras 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. Los marcadores de intervalo se especifican en la tercera y cuarta columna mediante 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 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 el rol de una columna. Esto es útil cuando se crea una nueva columna calculada. Consulta DataView.setColumns() para obtener más información.