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

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

Funciones obsoletas

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

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

Descripción general

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

Un diagrama de dispersión se usa para mapear la correlación entre conjuntos de números.

Por: Google

Ejemplo

Codifícalo tú mismo en la Visualización de Playground.

<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 los 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 de las siguientes columnas se usan para el eje Y. Cada columna se muestra con un color independiente.

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

Opciones de configuración

Nombre	Tipo	Predeterminado	Descripción
axisColor	string o un objeto	color predeterminado	El color del eje. Los valores posibles son los de la opción de configuración backgroundColor.
axisBackgroundColor	string o un objeto	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	Tamaño de fuente del texto del eje del gráfico, en píxeles.
FondoColor	string o un objeto	color predeterminado	El color de fondo para el área principal del gráfico Puede ser una de las siguientes opciones: Una string de un color compatible con HTML, por ejemplo, “rojo” o “#00cc00” Un objeto con propiedades `stroke` `fill` y `strokeSize`. `stroke` y `fill` deben ser una string con un color. strokeSize es un número. Por ejemplo: `{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}`. Para usar solo el relleno, sin un trazo, usa `stroke:null, strokeSize: 0`.
Color de borde	string o un objeto	color predeterminado	El borde que rodea 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 arreglo de strings. Cada elemento es una string de un color compatible con HTML, por ejemplo, "rojo" o "#00cc00".
Habilítala	boolean	true	Si se establece como verdadera, se muestra información sobre la herramienta cuando el usuario hace clic en un dato.
FocusBorderColor	string o un objeto	color predeterminado	El borde de los elementos del gráfico que están en foco (con el mouse). Los valores posibles son los de la opción de configuración backgroundColor.
alto	número	Altura del contenedor	Altura del gráfico en píxeles.
leyenda	string	'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": sobre el gráfico. "bottom": debajo del gráfico "none": no se muestra ninguna leyenda.
Color de fondo de la leyenda	string o un objeto	color predeterminado	El color de fondo para el área de leyenda del gráfico Los valores posibles son los de la opción de configuración backgroundColor.
Tamaño de fuente	número	automático	El tamaño en píxeles de la fuente de la leyenda
Color de leyenda	string o un objeto	color predeterminado	El color del texto de la leyenda Los valores posibles son los de la opción de configuración backgroundColor.
Tamaño de línea	número	0	Ancho de línea en píxeles. Usa valores positivos para mostrar una línea entre todos los puntos de la misma columna de datos.
logScale	boolean	falso	Si es verdadero, el eje Y debe escalarse de manera logarítmica.
logScaleX	boolean	falso	Si es verdadero, el eje X debe escalar de forma logarítmica.
máx.	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 dos valores: el valor de opción máximo, o el valor de datos más alto, redondeado a 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 valor más bajo de dos valores: el valor de opción mín., o el valor de datos más bajo, redondeado a la siguiente marca de cuadrícula inferior.
tamaño_punto	número	3	Tamaño de los puntos que se muestran en píxeles
title	string	sin título	Texto para mostrar arriba del gráfico
títuloX	string	sin título	Texto para mostrar debajo del eje horizontal
títuloY	string	sin título	Texto que se mostrará en el eje vertical
Color de título	string o un objeto	color predeterminado	El color del título del gráfico. Los valores posibles son los de la opción de configuración backgroundColor.
Tamaño de fuente de título	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 la información sobre la herramienta Esto puede reducirse si la información sobre la herramienta es demasiado pequeña para incluir el texto en la fuente especificada.
Información sobre la altura	número	60	Corresponde a la altura, en píxeles, de la información sobre la herramienta. La altura de la información sobre la herramienta es fija; nunca aumentará ni se reducirá para ajustarse al tamaño de la fuente o del texto. Sin embargo, se recortará cualquier altura superior a 1/3 de la altura del gráfico.
Información sobre la herramienta	número	120	Ancho en píxeles de la información sobre la herramienta. El ancho de la información sobre la herramienta es fijo; nunca aumentará ni reducirá para adaptarse a la longitud o el tamaño de la fuente del texto. Sin embargo, se recortará cualquier ancho superior al ancho del gráfico.
ancho	número	Ancho del contenedor	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()`	Arreglo de elementos de selección	Implementación estándar `getSelection()` Los elementos seleccionados son elementos de columna y celda. El usuario solo puede seleccionar una columna o celda a la vez.
`setSelection()`	ninguno	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. Tenga en cuenta que la columna de etiquetas y la primera columna numérica (la columna de valor del eje x) no se pueden seleccionar.

Eventos

Nombre	Descripción	Propiedades
`onmouseover`	Se activa cuando el usuario desplaza el mouse sobre un punto y pasa los índices de fila y columna de la celda correspondiente.	fila, columna
`onmouseout`	Se activa cuando el usuario se aleja del mouse y pasa los índices de fila y columna de la celda correspondiente.	fila, columna
`ready`	El gráfico está listo para las llamadas a métodos externos. 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` y llamarlo solo después de que se active 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

El código y los datos se procesan y procesan en el navegador. No se envían datos a ningún servidor.