Se usó la API de Cloud Translation para traducir esta página.

Visualización: Diagrama de dispersión (versión anterior)

Obsoleto

Esta visualización se reemplazó por una versión nueva. Úsala en su lugar. Para facilitar la migración, consulta la página de notas de la versión.

Overview
Ejemplo
Cargando
Formato de los datos
Opciones de configuración
Métodos
Eventos
Política de Datos

Descripción general

Un diagrama de dispersión que se renderiza dentro del navegador con SVG o VML. Muestra sugerencias al hacer clic en puntos.

Los diagramas de dispersión se usan para asignar la correlación entre conjuntos de números.

Por: Google

Ejemplo

Codificala tú mismo en el Playground de visualización.

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["scatterchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, titleX: 'Age', titleY: 'Weight', legend: 'none', pointSize: 5});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Cargando

El nombre del paquete google.load es "scatterchart"

  google.load("visualization", "1", {packages: ["scatterchart"]});

El nombre de clase de la visualización es google.visualization.ScatterChart

  var visualization = new google.visualization.ScatterChart(container);

Formato de datos

Se requieren dos o más columnas, todas deben ser numéricas. Los valores de la primera columna se usan para el eje X. Los valores en las siguientes columnas se usan para el eje Y. Cada columna se muestra con un color diferente.

Los números mínimo y máximo que se muestran en el eje X son los valores X mínimo y máximo de la tabla de datos. Para forzar que el espacio adicional se muestre por debajo o por encima de estos valores, agrega una fila con un valor X por debajo del valor de datos mínimo o superior, y no especifiques un valor Y en la fila. De esta manera, puedes agregar una fila para los valores mínimo, máximo o ambos.

Opciones de configuración

Nombre	Tipo	Predeterminado	Descripción
axisColor	Objeto o string	color predeterminado	El color del eje. Los valores posibles son los de la opción de configuración backgroundColor.
axisBackgroundColor	Objeto o string	color predeterminado	El borde alrededor del fondo del eje. Los valores posibles son los de la opción de configuración backgroundColor.
axisFontSize	número	automático	Es el tamaño de fuente del texto del eje del gráfico, en píxeles.
backgroundColor	Objeto o string	color predeterminado	El color de fondo del área principal del gráfico. Puede ser una de las siguientes opciones: Cadena de color compatible con HTML, por ejemplo "rojo" o "#00cc00" Un objeto con las propiedades `stroke` `fill` y `strokeSize`. `stroke` y `fill` deben ser una cadena con un color. administrarSize es un número. Por ejemplo: `{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}`. Para usar solo relleno, sin un trazo, usa `stroke:null, strokeSize: 0`.
borderColor	Objeto o string	color predeterminado	El borde alrededor de los elementos del gráfico. Los valores posibles son los de la opción de configuración backgroundColor.
colores	Arreglo de strings	Colores predeterminados	Los colores que se usarán para los elementos del gráfico. Un array de cadenas. Cada elemento es una cadena que es un color admitido por HTML, por ejemplo "rojo" o "#00cc00".
enableTooltip	boolean	verdadero	Si se establece como verdadera, se muestran cuadros de información cuando el usuario hace clic en un dato.
focusBorderColor	Objeto o string	color predeterminado	El borde alrededor de los elementos del gráfico que están enfocados (señalado por el mouse). Los valores posibles son los de la opción de configuración backgroundColor.
height	número	Altura del contenedor	Es la altura del gráfico en píxeles.
leyenda	cadena	'derecha'	Posición y tipo de leyenda. Puede ser una de las siguientes opciones: "right": a la derecha del gráfico. "left": se encuentra a la izquierda del gráfico. “top”: se encuentra encima del gráfico. "parte inferior": se encuentra debajo del gráfico. "none": No se muestra ninguna leyenda.
legendBackgroundColor	Objeto o string	color predeterminado	El color de fondo del área de la leyenda del gráfico. Los valores posibles son los de la opción de configuración backgroundColor.
legendFontSize	número	automático	El tamaño de la fuente de la leyenda en píxeles.
legendTextColor	Objeto o string	color predeterminado	El color del texto de la leyenda Los valores posibles son los de la opción de configuración backgroundColor.
lineSize	número	0	Es el ancho de línea en píxeles. Utiliza valores positivos para mostrar una línea entre todos los puntos de la misma columna de datos.
logScale	boolean	false	Si es verdadero, el eje Y debe escalarse de manera logarítmica.
logScaleX	boolean	false	Si es verdadero, el eje X debe escalarse de manera logarítmica.
max	número	automático	Especifica la línea de cuadrícula del eje Y más alta. La línea de cuadrícula real será el mayor de los dos valores: el valor máximo de la opción o el valor de datos más alto, redondeado hasta la siguiente marca de cuadrícula más alta.
min	número	automático	Especifica la línea de cuadrícula del eje Y más baja. La línea de cuadrícula real será el inferior de los dos valores: el valor mínimo de la opción o el valor de datos más bajo, redondeado hacia abajo a la siguiente marca de la cuadrícula inferior.
pointSize	número	3	Es el tamaño de los puntos mostrados en píxeles.
título	cadena	sin título	Es el texto que se mostrará sobre el gráfico.
titleX	cadena	sin título	Texto que se mostrará debajo del eje horizontal
titleY	cadena	sin título	Texto que se mostrará en el eje vertical.
titleColor	Objeto o string	color predeterminado	El color del título del gráfico. Los valores posibles son los de la opción de configuración backgroundColor.
titleFontSize	número	automático	El tamaño de fuente para el título del gráfico, en píxeles.
tooltipFontSize	número	11	El tamaño de fuente del texto de información sobre la herramienta. Esto se puede reducir si la información sobre la herramienta es demasiado pequeña para contener el texto en la fuente especificada.
tooltipHeight	número	60	La altura del cuadro de información en píxeles. La altura de la información es fija; nunca aumentará ni se reducirá para adaptarse a la longitud o al tamaño de la fuente del texto. Sin embargo, se recortará cualquier valor que sea superior a 1/3 de la altura del gráfico.
tooltipWidth	número	120	Es el ancho de la información sobre la herramienta en píxeles. El ancho de la información es fijo; nunca aumentará ni se reducirá para adaptarse a la longitud o al tamaño de la fuente del texto. Sin embargo, se recortarán los elementos que superen el ancho del gráfico.
width	número	Ancho del contenedor	Es el ancho del gráfico en píxeles.

Métodos

Método	Tipo de datos que se muestra	Descripción
`draw(data, options)`	ninguno	Dibuja el gráfico.
`getSelection()`	Array de elementos de selección	Implementación estándar de `getSelection()` Los elementos seleccionados son elementos de columna y celda. El usuario solo puede seleccionar una columna o celda a la vez.
`setSelection()`	ninguno	Es la implementación estándar de `setSelection()`, pero admite la selección de un solo elemento. Trata cada entrada de selección como una selección de columna o celda. Ten en cuenta que no se pueden seleccionar la columna de etiqueta ni la primera columna numérica (la columna de valores del eje x).

Eventos

Nombre	Descripción	Propiedades
`onmouseover`	Se activa cuando el usuario desplaza el mouse sobre un punto y pasa los índices de filas y columnas de la celda correspondiente.	fila, columna
`onmouseout`	Se activa cuando el usuario aleja el mouse de un punto y pasa los índices de filas y columnas de la celda correspondiente.	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 `draw` e llamarlos solo después de que se haya activado el evento.	Ninguno
`select`	Se activa cuando el usuario hace clic en un punto o una leyenda. Cuando se selecciona un punto, se selecciona la celda correspondiente en la tabla de datos; cuando se selecciona una leyenda, se selecciona la columna correspondiente en la tabla de datos. Para saber qué se seleccionó, llama a `getSelection()`.	Ninguno

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.

Visualización: Diagrama de dispersión (versión anterior) Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.