Descripción general
Un gráfico circular que se renderiza dentro del navegador con SVG o VML. Muestra información sobre la herramienta cuando se coloca el cursor sobre las porciones.
Ejemplo
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
Cómo crear un gráfico circular en 3D
Si configuras la opción is3D como true, tu gráfico circular se dibujará como si tuviera tres dimensiones:
is3D es false de forma predeterminada, por lo que aquí lo configuramos explícitamente como true:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
</html>
Cómo crear un gráfico de anillos
El gráfico de donas es un gráfico circular con un agujero en el centro. Puedes crear gráficos de anillo con la opción pieHole:
La opción pieHole debe establecerse en un número entre 0 y 1, que corresponda a la proporción de radios entre el orificio y el gráfico. Los números entre 0.4 y 0.6 se verán mejor en la mayoría de los gráficos.
Se ignorarán los valores iguales o superiores a 1, y el valor 0 cerrará por completo el orificio.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="donutchart" style="width: 900px; height: 500px;"></div>
</body>
</html>
No puedes combinar las opciones pieHole y is3D; si lo haces, se ignorará pieHole.
Ten en cuenta que, en Gráficos de Google, se intenta colocar la etiqueta lo más cerca posible del centro de la porción. Si tienes un gráfico de anillo con solo una porción, el centro de la porción puede caer dentro del agujero de la rosquilla. En ese caso, cambia el color de la etiqueta:
var options = {
pieHole: 0.5,
pieSliceTextStyle: {
color: 'black',
},
legend: 'none'
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Effort', 'Amount given'],
['My all', 100],
]);
var options = {
pieHole: 0.5,
pieSliceTextStyle: {
color: 'black',
},
legend: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="donut_single" style="width: 900px; height: 500px;"></div>
</body>
</html>
Cómo rotar un gráfico circular
De forma predeterminada, los gráficos circulares comienzan con el borde izquierdo de la primera porción que apunta hacia arriba. Puedes cambiar eso con la opción pieStartAngle:
Aquí, rotamos el gráfico 100 grados en el sentido de las manecillas del reloj con la opción pieStartAngle: 100. (Así se elige porque ese ángulo en particular hace que la etiqueta "italiano" quepa dentro de la porción).
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['German', 5.85],
['French', 1.66],
['Italian', 0.316],
['Romansh', 0.0791]
]);
var options = {
legend: 'none',
pieSliceText: 'label',
title: 'Swiss Language Use (100 degree rotation)',
pieStartAngle: 100,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
Cómo expandir una porción
Puedes separar los fragmentos circulares del resto del gráfico con la propiedad offset de la opción slices:
Para separar una porción, crea un objeto slices y asigna el número de porción apropiado una offset entre 0 y 1. A continuación, asignamos desplazamientos progresivamente más grandes a las porciones 4 (guyaratí), 12 (maratí), 14 (oriya) y 15 (panyabí):
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
]);
var options = {
title: 'Indian Language Use',
legend: 'none',
pieSliceText: 'label',
slices: { 4: {offset: 0.2},
12: {offset: 0.3},
14: {offset: 0.4},
15: {offset: 0.5},
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
Cómo quitar secciones
Para omitir una porción, cambia el color a 'transparent':
También usamos pieStartAngle para rotar el gráfico 135 grados, pieSliceText a fin de quitar el texto de las porciones y tooltip.trigger para inhabilitar la información sobre la herramienta:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Pac Man', 'Percentage'],
['', 75],
['', 25]
]);
var options = {
legend: 'none',
pieSliceText: 'none',
pieStartAngle: 135,
tooltip: { trigger: 'none' },
slices: {
0: { color: 'yellow' },
1: { color: 'transparent' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('pacman'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="pacman" style="width: 900px; height: 500px;"></div>
</body>
</html>
Umbral de visibilidad de la porción
Puedes establecer un valor como umbral para que una porción circular se renderice de forma individual. Este valor corresponde a una fracción del gráfico (el gráfico completo es de valor 1). Para establecer este umbral como un porcentaje del todo, divide el porcentaje deseado por 100 (para un umbral del 20%, el valor sería 0.2).
sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.
Cualquier porción inferior a este umbral se combinará en una sola porción “Otros” y tendrá el valor combinado de todos los segmentos por debajo del umbral.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Pizza');
data.addColumn('number', 'Populartiy');
data.addRows([
['Pepperoni', 33],
['Hawaiian', 26],
['Mushroom', 22],
['Sausage', 10], // Below limit.
['Anchovies', 9] // Below limit.
]);
var options = {
title: 'Popularity of Types of Pizza',
sliceVisibilityThreshold: .2
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Cargando
El nombre del paquete google.charts.load es "corechart".
google.charts.load("current", {packages: ["corechart"]});
El nombre de clase de la visualización es google.visualization.PieChart.
var visualization = new google.visualization.PieChart(container);
Formato de datos
Filas: Cada fila de la tabla representa una porción.
Columnas:
| Columna 0 | Columna 1 | ... | Columna N (opcional) | |
|---|---|---|---|---|
| Objetivo: | Etiquetas de porción | Valores de la porción | ... | Roles opcionales |
| Tipo de datos: | cadena | número | ... | |
| Role: | dominio | datos | ... | |
| Roles de columna opcionales: | Nada de control | Nada de control | ... |
Opciones de configuración
| Nombre | |
|---|---|
| backgroundColor |
El color de fondo del área principal del gráfico. Puede ser una cadena simple de color HTML, por ejemplo: Tipo: objeto o cadena
Predeterminado: “white”
|
| backgroundColor.stroke |
El color del borde del gráfico, como una cadena de color HTML. Tipo: string
Predeterminado: “#666”
|
| backgroundColor.strokeWidth |
Es el ancho del borde en píxeles. Tipo: Número
Valor predeterminado: 0
|
| backgroundColor.fill |
El color de relleno del gráfico, como una cadena HTML de color. Tipo: string
Predeterminado: “white”
|
| chartArea |
Un objeto con miembros para configurar la posición y el tamaño del área del gráfico (donde se dibuja el gráfico, sin incluir los ejes ni las leyendas). Se admiten dos formatos: un número o un número seguido de %. Un número simple es un valor en píxeles; un número seguido de % es un porcentaje. Ejemplo: Tipo: objeto
Valor predeterminado: nulo
|
| chartArea.backgroundColor |
Color de fondo del área del gráfico Cuando se usa una cadena, puede ser una cadena hexadecimal (p.ej., “#fdc”) o un nombre de color en inglés. Cuando se usa un objeto, se pueden proporcionar las siguientes propiedades:
Tipo: objeto o cadena
Predeterminado: “white”
|
| chartArea.left |
Indica qué tan lejos se debe dibujar el gráfico desde el borde izquierdo. Tipo: número o string
Predeterminada: automática
|
| chartArea.top |
Indica qué tan lejos se debe dibujar el gráfico desde el borde superior. Tipo: número o string
Predeterminada: automática
|
| chartArea.width |
Ancho del área del gráfico. Tipo: número o string
Predeterminada: automática
|
| chartArea.height |
Altura del área del gráfico. Tipo: número o string
Predeterminada: automática
|
| colores |
Los colores que se usarán para los elementos del gráfico. Un array de cadenas, en el que cada elemento es una cadena de color HTML, por ejemplo: Tipo: Arreglo de cadenas
Predeterminado: Colores predeterminados
|
| enableInteractivity |
Si el gráfico arroja eventos basados en el usuario o reacciona a la interacción del usuario. Si es falso, el gráfico no arrojará "seleccionar" ni otros eventos basados en interacciones (pero sí arrojará eventos listos o de error), ni mostrará texto flotante ni cambiará según la entrada del usuario. Tipo: booleano
Predeterminado: verdadero
|
| fontSize |
El tamaño de fuente predeterminado, en píxeles, de todo el texto en el gráfico. Puedes anular esto usando propiedades para elementos específicos del gráfico. Tipo: Número
Predeterminada: automática
|
| fontName |
Es el tipo de fuente predeterminado para todo el texto del gráfico. Puedes anular esto usando propiedades para elementos específicos del gráfico. Tipo: string
Predeterminado: "Arial"
|
| forceIFrame |
Dibuja el gráfico dentro de un marco intercalado. (Ten en cuenta que, en IE8, esta opción se ignora; todos los gráficos de IE8 se dibujan en iframes). Tipo: booleano
Predeterminado: falso
|
| height |
Altura del gráfico en píxeles. Tipo: Número
Predeterminado: la altura del elemento contenedor
|
| is3D |
Si es verdadero, muestra un gráfico tridimensional. Tipo: booleano
Predeterminado: falso
|
| leyenda |
Un objeto con miembros para configurar varios aspectos de la leyenda. Para especificar las propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Tipo: objeto
Valor predeterminado: nulo
|
| legend.alignment |
Alineación de la leyenda Puede ser una de las siguientes:
El inicio, el centro y el final están relacionados con el estilo (horizontal o vertical) de la leyenda. Por ejemplo, en una leyenda "derecha", "inicio" y "final" están en la parte inferior y superior, respectivamente. En el caso de una leyenda "superior", "inicio" y "final" estarían a la izquierda y a la derecha del área, respectivamente. El valor predeterminado depende de la posición de la leyenda. Para las leyendas “inferior”, el valor predeterminado es “center”; para las leyendas “inferior”, el valor predeterminado es “start”. Tipo: string
Predeterminada: automática
|
| legend.position |
Posición de la leyenda. Puede ser una de las siguientes:
Tipo: string
Configuración predeterminada: "derecha"
|
| legend.maxLines |
Cantidad máxima de líneas en la leyenda. Configúralo en un número mayor que uno para agregar líneas a tu leyenda. Nota: La lógica exacta que se usa para determinar el número real de líneas renderizadas sigue en proceso de cambio. Por el momento, esta opción solo funciona cuando legend.position es “top”. Tipo: Número
Configuración predeterminada: 1
|
| legend.textStyle |
Un objeto que especifica el estilo de texto de la leyenda. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| pieHole |
Si está entre 0 y 1, muestra un gráfico de anillo. El radio del orificio es igual a Tipo: Número
Valor predeterminado: 0
|
| pieSliceBorderColor |
El color de los bordes de las porciones. Solo se aplica cuando el gráfico es bidimensional. Tipo: string
Predeterminado: “white”
|
| pieSliceText |
El contenido del texto que se muestra en la porción. Puede ser una de las siguientes:
Tipo: string
Predeterminado: "porcentaje"
|
| pieSliceTextStyle |
Un objeto que especifica el estilo de texto de la porción. El objeto tiene este formato: {color: <string>, fontName: <string>, fontSize: <number>}
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| pieStartAngle |
Es el ángulo que se debe rotar el gráfico, en grados. El valor predeterminado Tipo: Número
Valor predeterminado:
0 |
| reverseCategories |
Si es verdadero, dibuja segmentos en sentido antihorario. La configuración predeterminada es dibujar en el sentido de las manecillas del reloj. Tipo: booleano
Predeterminado: falso
|
| pieResidueSliceColor |
El color para la porción de combinación que contiene todas las porciones por debajo de sliceVisibilityThreshold. Tipo: string
Configuración predeterminada: “#ccc”
|
| pieResidueSliceLabel |
Una etiqueta para la porción de combinación que contiene todas las porciones por debajo de sliceVisibilityThreshold. Tipo: string
Predeterminada: "Otro"
|
| porciones |
Matriz de objetos, en la que cada uno describe el formato de la porción correspondiente del gráfico circular. Si quieres
usar los valores predeterminados para una porción, especifica un objeto vacío (es decir,
Puedes especificar un array de objetos, cada uno de los cuales se aplica a la porción en el orden dado, o puedes especificar un objeto en el que cada elemento secundario tiene una clave numérica que indica a qué porción se aplica. Por ejemplo, las dos declaraciones siguientes son idénticas y declaran que la primera porción es negra y la cuarta es roja:
slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
Tipo: Arreglo de objetos o con objetos anidados
Predeterminado: {}
|
| sliceVisibilityThreshold |
El valor fraccionario del gráfico circular, por debajo del cual una porción no se mostrará de forma individual. Todas las porciones que no superen este umbral se combinarán en una única porción “Otros”, cuyo tamaño es la suma de todos sus tamaños. La configuración predeterminada no muestra de forma individual ninguna porción que sea inferior a medio grado.
// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
Tipo: Número
Predeterminado: Medio grado (.5/360 o 1/720 o .0014)
|
| título |
Es el texto que se mostrará sobre el gráfico. Tipo: string
Configuración predeterminada: Sin título
|
| titleTextStyle |
Un objeto que especifica el estilo de texto del título. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| cuadro de información |
Un objeto con miembros para configurar varios elementos de información sobre la herramienta. Para especificar propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: {textStyle: {color: '#FF0000'}, showColorCode: true}
Tipo: objeto
Valor predeterminado: nulo
|
| tooltip.ignoreBounds |
Si se establece en Nota: Esto solo se aplica a la información sobre herramientas HTML. Si esta opción está habilitada con información sobre la herramienta de SVG, se recortará cualquier desbordamiento fuera de los límites del gráfico. Consulta Cómo personalizar el contenido de la información sobre la herramienta para obtener más detalles. Tipo: booleano
Predeterminado: falso
|
| tooltip.isHtml |
Si la estableces como verdadera, usa información sobre la herramienta renderizada por HTML (en lugar de SVG). Consulta Cómo personalizar el contenido de la información sobre la herramienta para obtener más detalles. Nota: La personalización del contenido HTML de la información sobre la herramienta mediante el rol de datos de la columna de información no es compatible con la visualización del diagrama de burbujas. Tipo: booleano
Predeterminado: falso
|
| tooltip.showColorCode |
Si esta preferencia se establece como "true", se muestran cuadrados de color junto a la información de las porciones en la información sobre la herramienta. Tipo: booleano
Predeterminado: falso
|
| tooltip.text |
Información que se mostrará cuando el usuario coloque el cursor sobre una porción del gráfico circular. Se admiten los siguientes valores:
Tipo: string
Predeterminado: “ambos”
|
| tooltip.textStyle |
Un objeto que especifica el estilo de texto de la información sobre la herramienta. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| tooltip.trigger |
La interacción del usuario que hace que se muestre el cuadro de información:
Tipo: string
Predeterminado: "foco"
|
| width |
Es el ancho del gráfico (en píxeles). Tipo: Número
Predeterminado: Ancho del elemento contenedor
|
Métodos
| Método | |
|---|---|
draw(data, options) |
Dibuja el gráfico. El gráfico acepta más llamadas de método solo después de que se activa el evento Tipo de datos que se muestra: ninguno
|
getAction(actionID) |
Muestra el objeto de acción de información sobre la herramienta con el Tipo de datos que se muestra: objeto
|
getBoundingBox(id) |
Muestra un objeto que contiene las partes izquierda, superior, ancho y altura del elemento
Los valores están relacionados con el contenedor del gráfico. Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: objeto
|
getChartAreaBoundingBox() |
Muestra un objeto que contiene la parte izquierda, superior, ancho y altura del contenido del gráfico (es decir, sin incluir las etiquetas ni la leyenda):
Los valores están relacionados con el contenedor del gráfico. Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: objeto
|
getChartLayoutInterface() |
Muestra un objeto que contiene información sobre la ubicación del gráfico y sus elementos en la pantalla. Se puede llamar a los siguientes métodos en el objeto que se muestra:
Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: objeto
|
getHAxisValue(xPosition, optional_axis_index) |
Muestra el valor de datos horizontales en Ejemplo: Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: número
|
getImageURI() |
Muestra el gráfico serializado como un URI de imagen. Llámalo después de que se dibuje el gráfico. Consulta Cómo imprimir gráficos en PNG. Tipo de datos que se muestra: string
|
getSelection() |
Muestra un array de las entidades del gráfico seleccionadas.
Las entidades seleccionables son porciones y entradas de la leyenda.
Para este gráfico, solo se puede seleccionar una entidad en un momento determinado.
Tipo de datos que se muestra: Es el array de elementos de selección.
|
getVAxisValue(yPosition, optional_axis_index) |
Muestra el valor de datos verticales en Ejemplo: Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: número
|
getXLocation(dataValue, optional_axis_index) |
Muestra la coordenada X del píxel de Ejemplo: Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: número
|
getYLocation(dataValue, optional_axis_index) |
Muestra la coordenada Y del píxel de Ejemplo: Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: número
|
removeAction(actionID) |
Quita del gráfico la acción de información sobre la herramienta con el Tipo de datos que se muestra:
none |
setAction(action) |
Establece una acción de información sobre la herramienta que se ejecutará cuando el usuario haga clic en el texto de acción.
El método
Todas las acciones de información sobre la herramienta se deben configurar antes de llamar al método Tipo de datos que se muestra:
none |
setSelection() |
Selecciona las entidades del gráfico especificadas. Cancela cualquier selección anterior.
Las entidades seleccionables son porciones y entradas de la leyenda.
Para este gráfico, solo se puede seleccionar una entidad a la vez.
Tipo de datos que se muestra: ninguno
|
clearChart() |
Borra el gráfico y libera todos sus recursos asignados. Tipo de datos que se muestra: ninguno
|
Eventos
Para obtener más información sobre cómo usar estos eventos, consulta Interactividad básica, Cómo controlar eventos y Cómo activar eventos.
| Nombre | |
|---|---|
click |
Se activa cuando el usuario hace clic en el gráfico. Se puede usar para identificar cuándo se hace clic en el título, los elementos de datos, las entradas de leyenda, los ejes, las líneas de cuadrícula o las etiquetas. Propiedades: targetID
|
error |
Se activa cuando se produce un error cuando se intenta renderizar el gráfico. Propiedades: ID, mensaje
|
onmouseover |
Se activa cuando el usuario desplaza el mouse sobre una entidad visual. Devuelve los índices de fila y columna del elemento de tabla de datos correspondiente. Una porción o entrada de leyenda se correlaciona con una fila en la tabla de datos (el índice de la columna es nulo). Propiedades:fila, columna
|
onmouseout |
Se activa cuando el usuario aleja el mouse de una entidad visual. Devuelve los índices de filas y columnas del elemento de tabla de datos correspondiente. Una porción o entrada de leyenda se correlaciona con una fila en la tabla de datos (el índice de la columna es nulo). Propiedades:fila, columna
|
ready |
El gráfico está listo para llamadas de método externas. Si deseas interactuar con el gráfico y llamar a los métodos después de dibujarlo, debes configurar un objeto de escucha para este evento antes de llamar al método Propiedades: ninguna
|
select |
Se activa cuando el usuario hace clic en una entidad visual. Para saber qué se seleccionó, llama a Propiedades: ninguna
|
Política de Datos
Todo el código y los datos se procesan y renderizan en el navegador. No se envían datos a ningún servidor.