Gráfico de líneas

Descripción general

Un gráfico de líneas que se renderiza dentro del navegador mediante SVG o VML. Muestra la información sobre la herramienta cuando se desplaza el cursor sobre los puntos.

Ejemplos

Curve las líneas

Puedes suavizar las líneas si configuras la opción curveType en function:

A continuación, se incluye el código para generar este gráfico. Ten en cuenta el uso de la opción curveType: function:

  <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([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

Crear gráficos de línea de material

En 2014, Google anunció lineamientos destinados a admitir un aspecto común en sus propiedades y apps (como las apps para Android) que se ejecutan en las plataformas de Google. Esta tarea se denomina material design. Proporcionaremos versiones “Material” de todos nuestros gráficos principales. Puedes usarlas si te gusta el aspecto que tienen.

Crear un gráfico de líneas de Material es similar a crear lo que ahora llamaremos un gráfico de líneas "clásico". Debes cargar la API de visualización de Google (aunque con el paquete 'line' en lugar del paquete 'corechart'), definir la tabla de datos y, luego, crear un objeto (pero de clase google.charts.Line en lugar de google.visualization.LineChart).

Nota: Los gráficos de materiales no funcionan en versiones anteriores de Internet Explorer. (IE8 y las versiones anteriores no admiten SVG, que requieren los gráficos de Material).

Los gráficos de líneas de material tienen muchas pequeñas mejoras con respecto a los gráficos de líneas clásicos, que incluyen una paleta de colores mejorada, esquinas redondeadas, formato de etiquetas más claro, un espacio predeterminado más estrecho entre las series, líneas de cuadrícula más suaves y títulos (y la adición de subtítulos).

      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }

Los gráficos de Material se encuentran en versión Beta. La apariencia y la interactividad son mayormente finales, pero muchas de las opciones disponibles en la versión clásica de gráficos aún no están disponibles en ellos. Puedes encontrar una lista de las opciones que aún no se admiten en este problema.

Además, la forma en que se declaran las opciones no está finalizada, por lo que si usas alguna de las opciones clásicas, debes convertirlas en opciones de materiales con esta línea:

chart.draw(data, options);

...por lo siguiente:

chart.draw(data, google.charts.Line.convertOptions(options));

Gráficos dobles

En algunos casos, se recomienda que se muestren dos series en un gráfico de líneas, con dos ejes independientes independientes: un eje izquierdo para una serie y un eje derecho para otra:

Ten en cuenta que nuestros dos ejes Y tienen una etiqueta diferente ("Temps" frente a "Luz natural"), pero cada uno tiene sus propias escalas y líneas de cuadrícula independientes. Si deseas personalizar este comportamiento, usa las opciones vAxis.gridlines y vAxis.viewWindow.

En el siguiente código de Material, las opciones axes y series juntas especifican la apariencia de doble Y del gráfico. La opción series especifica qué eje se usará para cada uno ('Temps' y 'Daylight'; no es necesario que tengan ninguna relación con los nombres de las columnas en la tabla de datos). Luego, la opción axes convierte este gráfico en un gráfico de doble Y, que coloca el eje 'Temps' a la izquierda y el eje 'Daylight' a la derecha.

En el código clásico, esto difiere un poco. En lugar de la opción axes, usarás la opción vAxes (o hAxes en gráficos orientados horizontalmente). Además, en lugar de usar nombres, usarás los números de índice para coordinar una serie con un eje mediante la opción targetAxisIndex.

Material
      var materialOptions = {
        chart: {
          title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
        },
        width: 900,
        height: 500,
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {axis: 'Temps'},
          1: {axis: 'Daylight'}
        },
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            Temps: {label: 'Temps (Celsius)'},
            Daylight: {label: 'Daylight'}
          }
        }
      };
      
Clásico
      var classicOptions = {
        title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
        width: 900,
        height: 500,
        // Gives each series an axis that matches the vAxes number below.
        series: {
          0: {targetAxisIndex: 0},
          1: {targetAxisIndex: 1}
        },
        vAxes: {
          // Adds titles to each axis.
          0: {title: 'Temps (Celsius)'},
          1: {title: 'Daylight'}
        },
        hAxis: {
          ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
                  new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
                  new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
                 ]
        },
        vAxis: {
          viewWindow: {
            max: 30
          }
        }
      };
      

Rankings X principales

Nota: Los ejes "X" solo están disponibles para los gráficos de Material (es decir, aquellos con el paquete line).

Si deseas colocar las etiquetas y el título del eje X en la parte superior del gráfico en lugar de hacerlo en la parte inferior, puedes hacerlo en los gráficos de Material con la opción axes.x:

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500,
        axes: {
          x: {
            0: {side: 'top'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('line_top_x'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }
  </script>
</head>
<body>
  <div id="line_top_x"></div>
</body>
</html>


Cargando

El nombre del paquete google.charts.load es "corechart" y el nombre de la clase de la visualización es google.visualization.LineChart.

  google.charts.load("current", {packages: ["corechart"]});
  var visualization = new google.visualization.LineChart(container);

Para los gráficos de línea de material, el nombre del paquete google.charts.load es "line", y el nombre de la clase de la visualización es google.charts.Line.

  google.charts.load("current", {packages: ["line"]});
  var visualization = new google.charts.Line(container);

Formato de los datos

Filas: Cada fila de la tabla representa un conjunto de datos con la misma ubicación del eje x.

Columnas:

  Columna 0 Columna 1 Columna N
Propósito: 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 opcionales:

 

Opciones de configuración

Nombre
objetivo de agregación
Cómo se agrupan las selecciones de datos:
  • 'category': Agrupa los datos seleccionados por valor x.
  • 'series': Agrupa los datos seleccionados por serie.
  • 'auto': Agrupa los datos seleccionados por valor x si todas las selecciones tienen el mismo valor x o, de lo contrario, por serie.
  • 'none': Muestra solo una información sobre la herramienta por selección.
aggregationTarget a menudo se usará en conjunto con selectionMode y tooltip.trigger, p.ej.:
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
    
Tipo: string
Configuración predeterminada: "auto"
animación.duración

Es la duración en milisegundos de la animación. Para obtener más detalles, consulta la documentación sobre animaciones.

Tipo: número
Valor predeterminado: 0
animación.inicio

Determina si el gráfico se animará en el sorteo inicial. Si es true, el gráfico comenzará en el modelo de referencia y se animará a su estado final.

Tipo: booleano
Predeterminado: false
Animación

La función de aceleración aplicada a la animación. Están disponibles las siguientes opciones:

  • "lineal": Velocidad constante.
  • 'en' - Facilidad para entrar en marcha - Comienza despacio y acelera.
  • 'afuera' - Alejar - Empezar rápido y reducir la velocidad.
  • "InAndOut": de alivio para entrar y salir. Comienza con velocidad, aumenta la velocidad y luego desacelera.
Tipo: string
Predeterminado: "lineal"
anotaciones.boxStyle

Para los gráficos que admiten anotaciones, el objeto annotations.boxStyle controla la apariencia de los cuadros que rodean las anotaciones:

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};
    

Actualmente, esta opción es compatible con los gráficos de áreas, barras, columnas, combinaciones, líneas y dispersión. No es compatible con el gráfico de anotaciones.

Type:
Valor predeterminado: null
anotaciones.datum
En el caso de los gráficos que admiten anotaciones, el objeto annotations.datum te permite anular la elección de gráficos de Google para las anotaciones proporcionadas para elementos de datos individuales (como valores que se muestran con cada barra en un gráfico de barras). Puedes controlar el color con annotations.datum.stem.color, la longitud de tallos con annotations.datum.stem.length y el estilo con annotations.datum.style.
Type:
Predeterminado: el color es "negro", la longitud es 12 y el estilo es "punto".
anotaciones.dominio
En el caso de los gráficos que admiten anotaciones, el objeto annotations.domain te permite anular la opción de los gráficos de Google para las anotaciones proporcionadas para un dominio (el eje principal del gráfico, como el eje X en un gráfico de líneas típico). Puedes controlar el color con annotations.domain.stem.color, la longitud de tallos con annotations.domain.stem.length y el estilo con annotations.domain.style.
Type:
Predeterminado: el color es "negro", la longitud es 5 y el estilo es "punto".
anotaciones.highContrast
Para los gráficos que admiten anotaciones, el valor booleano annotations.highContrast te permite anular la elección del color de la anotación de Google Charts. De forma predeterminada, annotations.highContrast es verdadero, lo que hace que los gráficos seleccionen un color de anotación con buen contraste: colores claros sobre fondos oscuros y oscuro sobre claro. Si configuras annotations.highContrast como falso y no especificas tu propio color de anotación, Google Charts usará el color de serie predeterminado para la anotación:
Tipo: booleano
Predeterminado: verdadero
anotaciones.stem
Para los gráficos que admiten anotaciones, el objeto annotations.stem te permite anular la selección de los gráficos de Google para el estilo de tallos. Puedes controlar el color con annotations.stem.color y la longitud de los tallos con annotations.stem.length. Ten en cuenta que la opción de longitud de stem no tiene efecto en las anotaciones con estilo 'line': para las anotaciones de datum 'line', la longitud de stem siempre es la misma que el texto, y para las anotaciones de dominio 'line', la raíz se extiende en todo el gráfico.
Type:
Predeterminado: El color es "negro". La longitud es 5 para las anotaciones de dominio y 12 para las anotaciones de datos.
anotaciones.style
Para los gráficos que admiten anotaciones, la opción annotations.style te permite anular el gráfico de Google que elija el tipo de anotación. Puede ser 'line' o 'point'.
Tipo: string
Predeterminado: "point"
anotaciones.textStyle
En el caso de los gráficos que admiten anotaciones, el objeto annotations.textStyle controla la apariencia del texto de la anotación:
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};
    

Actualmente, esta opción es compatible con los gráficos de áreas, barras, columnas, combinaciones, líneas y dispersión. No es compatible con el gráfico de anotaciones.

Type:
Valor predeterminado: null
axisTítulodeleje

Dónde colocar los títulos de los ejes, en comparación con el área del gráfico Valores admitidos:

  • in: Dibuja los títulos de los ejes dentro del área del gráfico.
  • out: Dibuja los títulos de los ejes fuera del área del gráfico.
  • ninguno: Omite los títulos de los ejes.
Tipo: string
Predeterminado: “out”
Color de fondo

El color de fondo para el área principal del gráfico Puede ser una string de color HTML simple, por ejemplo: 'red' o '#00cc00', o un objeto con las siguientes propiedades.

Type: string o objeto
Predeterminado: "white"
backgroundColor

El color del borde del gráfico, como una string de color HTML

Tipo: string
Valor predeterminado: "#666"
backgroundColor.strokeWidth,

El ancho del borde, en píxeles.

Tipo: número
Valor predeterminado: 0
fondoColor.fill

El color de relleno del gráfico, como una string de color HTML.

Tipo: string
Predeterminado: "white"
Área_gráficos

Un objeto con miembros para configurar la posición y el tamaño del área del gráfico (sin incluir el eje y las leyendas), donde se dibuja el gráfico. 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: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type:
Valor predeterminado: null
chartArea.backgroundColor
Color de fondo del área del gráfico. Cuando se usa una string, puede ser una string hexadecimal (p.ej., "#fdc")) o el nombre del color en inglés. Cuando se usa un objeto, se pueden proporcionar las siguientes propiedades:
  • stroke: Es el color, proporcionado como una string hexadecimal o un nombre de color en inglés.
  • strokeWidth: si se proporciona, dibuja un borde alrededor del área del gráfico del ancho determinado (y con el color de stroke).
Type: string o objeto
Predeterminado: "white"
chartArea.left

Hasta dónde dibujar el gráfico desde el borde izquierdo.

Tipo: número o string
Predeterminado: automático
área_gráfico

Hasta dónde dibujar el gráfico desde el borde superior

Tipo: número o string
Predeterminado: automático
ancho_gráfico

Ancho del área del gráfico.

Tipo: número o string
Predeterminado: automático
gráficoAreArea.height

Altura del área del gráfico.

Tipo: número o string
Predeterminado: automático
colores

Los colores que se usarán para los elementos del gráfico. Un arreglo de strings, en la que cada elemento es una string de color HTML, por ejemplo: colors:['red','#004411'].

Tipo: Arreglo de strings
Predeterminado: colores predeterminados
en una cruz

Un objeto que contiene las propiedades de cruce para el gráfico.

Type:
Valor predeterminado: null
crosshair

El color de cruz, expresado como un nombre de color (p.ej., "azul") o un valor RGB (p.ej., "#adf").

Tipo: string
Tipo: Configuración predeterminada
enfocado

Un objeto que contiene las propiedades de la cruz cuando se enfoca.
Ejemplo: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

Type:
Predeterminado: predeterminado
punto de cruz

La opacidad de la cruz, con 0.0 totalmente transparente y 1.0 completamente opaco.

Tipo: número
Predeterminado: 1.0
cruz

La orientación de la cruz puede ser "vertical" solo para cabellos verticales, "horizontal" solo para cabellos horizontales o "ambos" para la cruz tradicional.

Tipo: string
Predeterminado: "ambos"
punto de mira.

Un objeto que contiene las propiedades de la cruz en el momento de la selección.
Ejemplo: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

Type:
Predeterminado: predeterminado
crosshair.trigger

Cuándo mostrar marcas de cruz: en 'focus', 'selection' o 'both'

Tipo: string
Predeterminado: "ambos"
Tipo de curva

Controla la curva de las líneas cuando el ancho de la línea no es cero. Puede ser uno de los siguientes:

  • "none": Líneas rectas sin curva.
  • "función": se suavizarán los ángulos de la línea.
Tipo:string
Configuración predeterminada: "ninguna".
opacidad de los datos

La transparencia de los puntos de datos, donde 1.0 es completamente opaco y 0.0 completamente transparente. En diagramas de dispersión, histogramas, de barras y de columnas, esto se refiere a los datos visibles: puntos en el gráfico de dispersión y rectángulos en los demás. En los gráficos en los que la selección de datos crea un punto, como los gráficos de líneas y de área, se refiere a los círculos que aparecen cuando se desplaza el cursor o sobre la selección. El gráfico combinado muestra ambos comportamientos, y esta opción no tiene efecto en otros gráficos. (Para cambiar la opacidad de una línea de tendencia, consulta Opacidad de la línea de tendencia).

Tipo: número
Predeterminado: 1.0
enableInteractivity

Si el gráfico muestra eventos basados en el usuario o reacciona a la interacción del usuario Si es falso, el gráfico no arrojará un evento de selección o de otro tipo basado en la interacción (pero arrojará eventos de error o listos) y no mostrará el texto emergente ni cambiará de alguna otra manera en función de la entrada del usuario.

Tipo: booleano
Predeterminado: verdadero
explorer

La opción explorer permite a los usuarios desplazar lateralmente los gráficos de Google y acercarlos. explorer: {} proporciona el comportamiento predeterminado del explorador, lo que permite a los usuarios desplazarse lateralmente de forma horizontal y vertical, además de acercar y alejar la imagen con desplazamiento.

Esta función es experimental y puede cambiar en versiones futuras.

Nota: El explorador solo funciona con ejes continuos (como números o fechas).

Type:
Valor predeterminado: null
explorer.actions

El Explorador de gráficos de Google admite tres acciones:

  • dragToPan: Arrastra para desplazarte por el gráfico horizontal y verticalmente. Para desplazarte solo por el eje horizontal, usa explorer: { axis: 'horizontal' }. Del mismo modo, en el eje vertical.
  • dragToZoom: El comportamiento predeterminado del explorador es acercar y alejar la imagen cuando el usuario se desplaza. Si se utiliza explorer: { actions: ['dragToZoom', 'rightClickToReset'] }, puedes arrastrar un área rectangular para acercarla. Recomendamos usar rightClickToReset cada vez que se use dragToZoom. Consulta explorer.maxZoomIn, explorer.maxZoomOut y explorer.zoomDelta para obtener información sobre las personalizaciones de zoom.
  • rightClickToReset: Si haces clic con el botón derecho en el gráfico, volverás al nivel de zoom y de desplazamiento original.
Tipo: Arreglo de strings
Configuración predeterminada: ['dragToPan', 'rightClickToReset']
eje del explorador

De forma predeterminada, los usuarios pueden desplazarse de forma horizontal y vertical cuando se usa la opción explorer. Si deseas que los usuarios solo se desplacen horizontalmente, usa explorer: { axis: 'horizontal' }. De manera similar, explorer: { axis: 'vertical' } habilita el desplazamiento lateral solo vertical.

Tipo: string
Predeterminado: Desplazamiento lateral horizontal y vertical
explorer.keepInBounds

De forma predeterminada, los usuarios pueden desplazarse lateralmente por todos lados, independientemente de dónde se encuentren. Para asegurarte de que los usuarios no se desplacen más allá del gráfico original, usa explorer: { keepInBounds: true }.

Tipo: booleano
Valor predeterminado: falso
explorer.maxZoomIn

El valor máximo que puede ampliar el explorador. De forma predeterminada, los usuarios podrán acercar la imagen lo suficiente como para ver solo el 25% de la vista original. Si se establece explorer: { maxZoomIn: .5 }, los usuarios solo podrán hacer zoom para ver la mitad de la vista original.

Tipo: número
Valor predeterminado: 0.25
explorer.maxZoomOut

El valor máximo que el explorador puede alejar. De forma predeterminada, los usuarios podrán alejarse lo suficiente como para que el gráfico ocupe solo 1/4 del espacio disponible. Si se establece explorer: { maxZoomOut: 8 }, los usuarios podrán alejarse lo suficiente como para que el gráfico ocupe solo 1/8 del espacio disponible.

Tipo: número
Predeterminado: 4
explorer.zoomDelta

Cuando los usuarios acercan o alejan la imagen, explorer.zoomDelta determina en qué medida deben hacer zoom. Cuanto más bajo sea el número, más suave y lento se verá el zoom.

Tipo: número
Predeterminado: 1.5
focoObjetivo

Tipo de entidad que recibe el foco cuando se coloca el cursor del mouse sobre un elemento. También afecta a qué entidad selecciona un clic del mouse y qué elemento de la tabla de datos se asocia con los eventos. Puede ser una de las siguientes opciones:

  • "datum": Concéntrate en un solo dato. Se correlaciona con una celda en la tabla de datos.
  • "categoría": Se centra en un grupo de todos los datos en el eje principal. Se correlaciona con una fila en la tabla de datos.

En el elemento “target” de “category”, se muestra todos los valores de la categoría. Esto puede ser útil para comparar valores de diferentes series.

Tipo: string
Predeterminado: “datum”
fontSize

El tamaño predeterminado de la fuente, en píxeles, de todo el texto del gráfico. Puedes anular esto con propiedades de elementos específicos del gráfico.

Tipo: número
Predeterminado: automático
Nombre de fuente

El tipo de fuente predeterminado para todo el texto del gráfico. Puedes anular esto con propiedades de 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 i-frames).

Tipo: booleano
Valor predeterminado: falso
eje

Un objeto con miembros para configurar varios elementos del eje horizontal. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
Type:
Valor predeterminado: null
haxis.baseline

Es el modelo de referencia para el eje horizontal.

Esta opción solo es compatible con el eje continuous.

Tipo: número
Predeterminado: automático
hAxis.baselineColor

El color del modelo de referencia para el eje horizontal. Puede ser cualquier string de color HTML, por ejemplo: 'red' o '#00cc00'.

Esta opción solo es compatible con el eje continuous.

Tipo: número
Predeterminado: "negro"
hAxis.direction

La dirección en la que crecen los valores del eje horizontal. Especifica -1 para revertir el orden de los valores.

Tipo: 1 o -1
Predeterminado: 1
hAxis.format

Una string de formato para etiquetas numéricas o de eje de fecha.

En las etiquetas de eje numérico, es un subconjunto del conjunto de patrones de ICU de formato decimal. Por ejemplo, {format:'#,###%'} mostrará los valores “1,000%”, “750%” y “50%” para los valores 10, 7.5 y 0.5. También puedes proporcionar cualquiera de las siguientes opciones:

  • {format: 'none'}: Muestra los números sin formato (p.ej., 8000000).
  • {format: 'decimal'}: Muestra los números con separadores de miles (p.ej., 8.000.000)
  • {format: 'scientific'}: Muestra los números en notación científica (p.ej., 8e6).
  • {format: 'currency'}: Muestra los números en la moneda local (p.ej., USD 8,000,000.00)
  • {format: 'percent'}: Muestra los números como porcentajes (p.ej., 800,000,000%)
  • {format: 'short'}: Muestra los números abreviados (p.ej., 8 millones)
  • {format: 'long'}: Muestra los números como palabras completas (p.ej., 8 millones)

Para las etiquetas del eje de fecha, este es un subconjunto del conjunto de patrones de ICU de formato de fecha. Por ejemplo, {format:'MMM d, y'} mostrará el valor "1 de julio de 2011" para la fecha de julio primero en 2011.

El formato real aplicado a la etiqueta se deriva de la configuración regional con la que se cargó la API. Para obtener más información, consulta Cómo cargar gráficos con una configuración regional específica.

En el cálculo de valores y líneas de cuadrícula de marcas, se considerarán varias combinaciones alternativas de todas las opciones de líneas de cuadrícula relevantes y se rechazarán alternativas si las etiquetas con marcas de formato con formato se duplicarían o se superpusieran. Por lo tanto, puedes especificar format:"#" si solo deseas mostrar valores de marca de número entero, pero debes tener en cuenta que, si ninguna alternativa satisface esta condición, no se mostrarán líneas de cuadrícula ni marcas.

Esta opción solo es compatible con un eje de continuous.

Tipo: string
Predeterminado: automático
hAxis.gridlines,

Un objeto con propiedades para configurar las líneas de cuadrícula en el eje horizontal. Ten en cuenta que las líneas de cuadrícula del eje horizontal se dibujan de forma vertical. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí:

{color: '#333', minSpacing: 20}

Esta opción solo es compatible con un eje de continuous.

Type:
Valor predeterminado: null
hAxis.gridlines.color;

El color de las líneas de cuadrícula horizontales dentro del área del gráfico. Especifica una string de color HTML válida.

Tipo: string
Configuración predeterminada: "#CCC"
hAxis.gridlines.count,

La cantidad aproximada de líneas de cuadrícula horizontales dentro del área del gráfico. Si especificas un número positivo para gridlines.count, se usará a fin de calcular el minSpacing entre líneas de cuadrícula. Puedes especificar un valor de 1 para dibujar solo una línea de cuadrícula o 0 para que no dibuje ninguna línea de cuadrícula. Especifica -1, que es el valor predeterminado, para calcular automáticamente la cantidad de líneas de cuadrícula según otras opciones.

Tipo: número
Predeterminado: -1
hAxis.gridlines.interval

Un arreglo de tamaños (como valores de datos, no píxeles) entre líneas de cuadrícula adyacentes. Esta opción solo es para ejes numéricos en este momento, pero es análoga a las opciones de gridlines.units.<unit>.interval que se usan solo para fechas y horas. En el caso de las escalas lineales, el valor predeterminado es [1, 2, 2.5, 5], lo que significa que los valores de la línea de cuadrícula pueden encontrarse en cada unidad (1), en unidades pares (2) o en múltiplos de 2.5 o 5. Cualquier potencia de 10 veces estos valores también se considera (p.ej., [10, 20, 25, 50] y [.1, .2, .25, .5]). Para las escalas de registro, el valor predeterminado es [1, 2, 5].

Tipo: Número entre 1 y 10, sin incluir 10.
Predeterminado: calculado
hAxis.gridlines.minSpacing.

El espacio mínimo de la pantalla, en píxeles, entre las líneas de cuadrícula principales del eje. El valor predeterminado para las líneas de cuadrícula principales es 40 en escalas lineales y 20 en escalas de registro. Si especificas count y no minSpacing, el minSpacing se calcula a partir del recuento. Por el contrario, si especificas minSpacing y no count, el recuento se calcula desde minSpacing. Si especificas ambos, se anula minSpacing.

Tipo: número
Predeterminado: calculado
hAxis.gridlines.multiple

Todos los valores de línea de cuadrícula y de marca deben ser un múltiplo del valor de esta opción. Ten en cuenta que, a diferencia de los intervalos, no se consideran los poderes de 10 veces el múltiplo de ellos. Por lo tanto, puedes forzar las marcas para que sean números enteros si especificas gridlines.multiple = 1 o forzar las marcas para que sean múltiplos de 1,000 si especificas gridlines.multiple = 1000.

Tipo: número
Predeterminado: 1
hAxis.gridlines.units

Anula el formato predeterminado para varios aspectos de tipos de datos de fecha, hora y hora cuando se usa con líneas de cuadrícula calculadas en los gráficos. Permite el formato por años, meses, días, horas, minutos, segundos y milisegundos.

El formato general es el siguiente:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Puedes encontrar información adicional en Fechas y horas.

Type:
Valor predeterminado: null
hAxis.minorGridlines

Un objeto con miembros para configurar las líneas de cuadrícula secundarias en el eje horizontal, de manera similar a la opción hAxis.gridlines.

Esta opción solo es compatible con un eje de continuous.

Type:
Valor predeterminado: null
hAxis.minorGridlines.color;

El color de las líneas de cuadrícula secundarias horizontales dentro del área del gráfico. Especifica una string de color HTML válida.

Tipo: string
Predeterminado: una combinación de la línea de cuadrícula y los colores del fondo
hAxis.minorGridlines.count

La opción minorGridlines.count está obsoleta en su mayoría, excepto por configurar las líneas de cuadrícula secundarias en 0. La cantidad de líneas de cuadrícula secundarias ahora depende por completo del intervalo entre las líneas de cuadrícula principales (consulta hAxis.gridlines.interval) y el espacio mínimo requerido (consulta hAxis.minorGridlines.minSpacing).

Tipo: número
Predeterminado: 1
hAxis.minorGridlines.interval

La opción minorGridlines.interval es como la opción de intervalo de líneas de cuadrícula principales, pero el intervalo elegido siempre será un divisor uniforme del intervalo principal de líneas de cuadrícula. El intervalo predeterminado para las escalas lineales es [1, 1.5, 2, 2.5, 5] y el escalamiento logarítmico es [1, 2, 5].

Tipo: número
Predeterminado: 1
hAxis.minorGridlines.minSpacing

El espacio mínimo requerido, en píxeles, entre las líneas de cuadrícula secundarias adyacentes y entre las líneas de cuadrícula secundarias y principales. El valor predeterminado es la mitad del minSpacing de las líneas de cuadrícula principales para escalas lineales y la mitad del minSpacing para las escalas de registro.

Tipo: número
Predeterminado: computado
hAxis.minorGridlines.multiple

Igual que para el elemento gridlines.multiple principal.

Tipo: número
Predeterminado: 1
hAxis.minorGridlines.units

Anula el formato predeterminado para varios aspectos de los tipos de datos de fecha, hora y hora del día cuando se usa con el método cuadrícula de líneas de cálculo calculadas. Permite el formato por años, meses, días, horas, minutos, segundos y milisegundos.

El formato general es el siguiente:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Puedes encontrar información adicional en Fechas y horas.

Type:
Valor predeterminado: null
hAxis.logScale

La propiedad hAxis, que hace que el eje horizontal sea una escala logarítmica (requiere que todos los valores sean positivos). Establécelo en verdadero para sí.

Esta opción solo es compatible con el eje continuous.

Tipo: booleano
Valor predeterminado: falso
hAxis.scaleType.

La propiedad hAxis, que hace que el eje horizontal sea una escala logarítmica. Puede ser uno de los siguientes:

  • null: no se realiza el escalamiento logarítmico.
  • 'log': Escala logarítmico. No se trazan los valores negativos y cero. Esta opción es igual a configurar hAxis: { logscale: true }.
  • "mirrorLog": Escalamiento logarítmico en el que se trazan los valores negativos y cero. El valor trazado de un número negativo es el negativo del registro del valor absoluto. Los valores cercanos a 0 se trazan en una escala lineal.

Esta opción solo es compatible con el eje continuous.

Tipo: string
Valor predeterminado: null
hAxis.textPosition

Posición del texto del eje horizontal, en relación con el área del gráfico. Valores admitidos: “out”, “in” y “none”.

Tipo: string
Predeterminado: “out”
hAxis.textStyle

Un objeto que especifica el estilo del texto del eje horizontal. El objeto tiene este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color puede ser cualquier string de color HTML, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

Type:
Predeterminado: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

Reemplaza las marcas del eje X generadas automáticamente con el arreglo especificado. Cada elemento del arreglo debe ser un valor de marca válido (como un número, una fecha, una hora de fecha o una hora del día) o un objeto. Si es un objeto, debe tener una propiedad v para el valor de marca y una propiedad opcional f que contenga la string literal que se mostrará como etiqueta.

La ViewWindow se expandirá automáticamente para incluir las marcas mínimas y máximas, a menos que especifiques viewWindow.min o viewWindow.max.

Ejemplos:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

Esta opción solo es compatible con un eje de continuous.

Tipo: Arreglo de elementos
Predeterminado: automático
hAxis.title

La propiedad hAxis que especifica el título del eje horizontal.

Tipo: string
Valor predeterminado: null
hAxis.titleTextStyle

Un objeto que especifica el estilo del texto del título del eje horizontal. El objeto tiene este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color puede ser cualquier string de color HTML, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

Type:
Predeterminado: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.allowContainerBoundaryTextCutoff

Si es falso, ocultará las etiquetas más externas y no permitirá que el contenedor del gráfico las recorte. Si esta preferencia se establece como "true", permitirá que se recorten las etiquetas.

Esta opción solo es compatible con el eje discrete.

Tipo: booleano
Valor predeterminado: falso
hAxis.slantedText

Si esta preferencia se establece como "true", se dibuja el texto del eje horizontal en ángulo de modo que se ajuste más texto al eje. Si es "false", se dibuja el texto del eje horizontal en posición vertical. El comportamiento predeterminado es inclinar el texto si no caben todos cuando se dibuja en posición vertical. Ten en cuenta que esta opción solo está disponible cuando hAxis.textPosition está configurado como "out", que es el predeterminado. El valor predeterminado es false para las fechas y horas.

Tipo: booleano
Predeterminado: automático
hAxis.slantedTextAngle

El ángulo del texto del eje horizontal, si está dibujado. Se ignora si hAxis.slantedText es false o está en modo automático, y el gráfico decidió dibujar el texto de forma horizontal. Si el ángulo es positivo, la rotación es en sentido antihorario y, si es negativo, es en sentido horario.

Tipo: número, -90 a 90
Valor predeterminado: 30
hAxis.maxAlternation

Cantidad máxima de niveles de texto en el eje horizontal. Si las etiquetas de texto del eje están demasiado saturadas, el servidor puede desplazar las etiquetas adyacentes hacia arriba o hacia abajo para ajustar las etiquetas entre sí. Este valor especifica la mayor cantidad de niveles que se usarán; el servidor puede usar menos niveles, si las etiquetas pueden caber sin superponerse. Para las fechas y horas, el valor predeterminado es 1.

Tipo: número
Predeterminado: 2
hAxis.maxTextLines

Cantidad máxima de líneas permitidas para las etiquetas de texto. Las etiquetas pueden abarcar varias líneas si son demasiado largas y, de forma predeterminada, la cantidad de líneas está limitada por la altura del espacio disponible.

Tipo: número
Predeterminado: automático
hAxis.minTextSpacing

Espaciado horizontal mínimo, en píxeles, permitido entre dos etiquetas de texto adyacentes. Si las etiquetas tienen un espacio demasiado denso o son demasiado largos, el espaciado puede caer por debajo de este umbral y, en este caso, se aplicará una de las medidas de orden de etiquetas (p. ej., truncar las etiquetas o descartar algunas).

Tipo: número
Predeterminado: El valor de hAxis.textStyle.fontSize
hAxis.showTextEvery

Cantidad de etiquetas del eje horizontal que se muestran, donde 1 significa que se muestran todas las etiquetas, 2 significa que se muestra cada otra etiqueta y así sucesivamente. De forma predeterminada, se trata de mostrar la mayor cantidad posible de etiquetas sin superponerse.

Tipo: número
Predeterminado: automático
hAxis.maxValue

Mueve el valor máximo del eje horizontal al valor especificado; esto será hacia la derecha en la mayoría de los gráficos. Se ignora si se establece en un valor menor que el valor x máximo de los datos. hAxis.viewWindow.max anula esta propiedad.

Esta opción solo es compatible con un eje de continuous.

Tipo: número
Predeterminado: automático
hAxis.minValue

Mueve el valor mínimo del eje horizontal al valor especificado; esto será hacia la izquierda en la mayoría de los gráficos. Se ignora si se establece en un valor mayor que el valor X mínimo de los datos. hAxis.viewWindow.min anula esta propiedad.

Esta opción solo es compatible con un eje de continuous.

Tipo: número
Predeterminado: automático
hAxis.viewWindowMode.

Especifica cómo escalar el eje horizontal para procesar los valores dentro del área del gráfico. Se admiten los siguientes valores de string:

  • “pretty”: Escala los valores horizontales para que los valores de datos máximos y mínimos se rendericen un poco dentro del área izquierda y derecha del área del gráfico. ViewWindow se expande a la línea de cuadrícula principal más cercana para números o a la línea de cuadrícula secundaria más cercana para fechas y horas.
  • “maximized”: maximiza los valores horizontales, de modo que el valor máximo y el mínimo de los datos toquen el lado izquierdo y el derecho del área del gráfico. Esto hará que se ignoren haxis.viewWindow.min y haxis.viewWindow.max.
  • "explícitas": una opción obsoleta para especificar los valores de escala izquierda y derecha del área del gráfico. (Obsoleta porque es redundante con haxis.viewWindow.min y haxis.viewWindow.max). Los valores de datos fuera de estos valores se recortarán. Debes especificar un objeto hAxis.viewWindow que describa los valores máximos y mínimos para mostrar.

Esta opción solo es compatible con un eje de continuous.

Tipo: string
Predeterminado: Equivale a "pretty", pero haxis.viewWindow.min y haxis.viewWindow.max tienen prioridad si se usan.
hAxis.viewWindow

Especifica el rango de recorte del eje horizontal.

Type:
Valor predeterminado: null
hAxis.viewWindow.max;
  • Para un eje de continuous:

    El valor máximo de datos horizontales que se renderizarán.

  • Para un eje de discrete:

    El índice de filas basado en cero donde finaliza la ventana de recorte. Los datos en este índice y en los superiores se recortarán. Junto con vAxis.viewWindowMode.min, define un rango semiabierto [min, max] que denota los índices de elementos que se mostrarán. En otras palabras, se mostrarán todos los índices de modo que min <= index < max.

Se ignora cuando hAxis.viewWindowMode es "bastante" o "maximizado".

Tipo: número
Predeterminado: automático
hAxis.viewWindow.min
  • Para un eje de continuous:

    El valor mínimo de datos horizontales que se renderizarán.

  • Para un eje de discrete:

    Es el índice de filas basado en cero donde comienza la ventana de recorte. Se recortarán los datos con índices más bajos que estos. Junto con vAxis.viewWindowMode.max, define un rango semiabierto [min, max] que denota los índices de elementos que se mostrarán. En otras palabras, se mostrará cada índice de modo que min <= index < max.

Se ignora cuando hAxis.viewWindowMode es "bastante" o "maximizado".

Tipo: número
Predeterminado: automático
alto

Altura del gráfico, en píxeles.

Tipo: número
Predeterminado: altura del elemento que lo contiene
interpolateNulls

Indica si es necesario adivinar el valor de los puntos faltantes. Si es verdadero, adivinará el valor de los datos faltantes según los puntos vecinos. Si es falso, dejará un salto en la línea en el punto desconocido.

No es compatible con los gráficos del área con la opción isStacked: true/'percent'/'relative'/'absolute'.

Tipo: booleano
Valor 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 objetos, como se muestra aquí:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type:
Valor predeterminado: null
leyenda.alineación

Alineación de la leyenda Puede ser uno de los siguientes:

  • "start": se alinea con el inicio del área asignada para la leyenda.
  • 'center': centrado en el área asignada a la leyenda.
  • "end": Se alinea con el final del área asignada para la leyenda.

El inicio, el centro y el final están relacionados con el estilo de la leyenda (vertical u horizontal). Por ejemplo, en una leyenda de "derecha", "inicio" y "final" están en la parte superior e inferior, respectivamente. En el caso de una leyenda "superior", "inicio" y "final" están a la izquierda y a la derecha del área, respectivamente.

El valor predeterminado depende de la posición de la leyenda. Para las leyendas con el valor “bottom”, el valor predeterminado es “center” y las demás, de forma predeterminada con “start”.

Tipo: string
Predeterminado: automático
leyendas.maxLines

Cantidad máxima de líneas en la leyenda. Establece un número mayor que uno para agregar líneas a la leyenda. Nota: La lógica exacta que se usa para determinar la cantidad real de líneas procesadas sigue en proceso de cambio.

Por el momento, esta opción solo funciona cuando "Legend.position" está en la parte superior.

Tipo: número
Predeterminado: 1
Index.page.page

El índice de página basado en cero inicial de la leyenda seleccionado.

Tipo: número
Valor predeterminado: 0
leyenda.posición

Posición de la leyenda. Puede ser uno de los siguientes:

  • "bottom": debajo del gráfico
  • “izquierda”: A la izquierda del gráfico, siempre que el eje izquierdo no tenga ninguna serie asociada. Por lo tanto, si quieres la leyenda de la izquierda, usa la opción targetAxisIndex: 1.
  • "in": dentro del gráfico, junto a la esquina superior izquierda.
  • "none": no se muestra ninguna leyenda.
  • "right": a la derecha del gráfico No es compatible con la opción vAxes.
  • "top": sobre el gráfico.
Tipo: string
Predeterminado: "right"
leyenda.texto

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> }
    

color puede ser cualquier string de color HTML, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

Type:
Predeterminado: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Estilo de línea

El patrón de activación y desactivación de las líneas discontinuas Por ejemplo, [4, 4] repetirá los guiones de 4 longitudes seguidos de los espacios de 4 longitudes y [5, 1, 3] repetirá un guion de 5 longitudes, un intervalo de 1 longitud, un guion de 3 longitudes, un intervalo de 5 longitudes, un intervalo de 1 longitud y un espacio de 3 longitudes. Consulta Líneas con línea para obtener más información.

Tipo: Arreglo de números
Valor predeterminado: null
Ancho de línea

Ancho de línea de datos en píxeles. Usa cero para ocultar todas las líneas y mostrar solo los puntos. Puedes anular valores para series individuales mediante la propiedad series.

Tipo: número
Predeterminado: 2
orientación

Es la orientación del gráfico. Cuando se establece en 'vertical', rota los ejes del gráfico para que, por ejemplo, un gráfico de columnas se convierta en un gráfico de barras y un gráfico de áreas crezca hacia la derecha en lugar de hacia arriba:

Tipo: string
Predeterminado: "horizontal"
forma de punto

Forma de los elementos de datos individuales: “circle”, “triangle”, “square”, “diamond”, “star” o “polygon”. Consulta la documentación sobre puntos para ver ejemplos.

Tipo: string
Configuración predeterminada: "circle"
tamaño_punto

Diámetro de puntos mostrados en píxeles. Usa cero para ocultar todos los puntos. Puedes anular los valores de series individuales mediante la propiedad series. Si usas una línea de tendencia, la opción pointSize afectará el ancho de la línea de tendencia, a menos que la anules con la opción trendlines.n.pointsize.

Tipo: número
Valor predeterminado: 0
puntosVisible

Determina si se mostrarán los puntos. Configúralo como false para ocultar todos los puntos. Puedes anular valores para series individuales mediante la propiedad series. Si usas una línea de tendencia, la opción pointsVisible afectará la visibilidad de los puntos en todas las líneas de tendencia, a menos que la anules con la opción trendlines.n.pointsVisible.

También se puede anular mediante la función de estilo con el formato "point {visible: true}".

Tipo: booleano
Predeterminado: verdadero
Categorías inversas

Si se establece como verdadera, se dibujará la serie de derecha a izquierda. La configuración predeterminada es dibujar de izquierda a derecha.

Esta opción solo se admite en el eje discrete major.

Tipo: booleano
Valor predeterminado: falso
modo de selección

Cuando selectionMode es 'multiple', los usuarios pueden seleccionar varios puntos de datos.

Tipo: string
Valor predeterminado: “single”
series

Un arreglo de objetos, cada uno de los cuales describe el formato de la serie correspondiente en el gráfico. Para usar los valores predeterminados de una serie, especifica un objeto vacío {}. Si no se especifica una serie o un valor, se usará el valor global. Cada objeto admite las siguientes propiedades:

  • annotations: un objeto que se aplica a las anotaciones de esta serie. Esto se puede usar para controlar, por ejemplo, el textStyle de la serie:

    series: {
      0: {
        annotations: {
          textStyle: {fontSize: 12, color: 'red' }
        }
      }
    }
              

    Consulta las diversas opciones de annotations para obtener una lista más completa de lo que se puede personalizar.

  • color: Es el color que se usará para esta serie. Especifica una cadena de color HTML válida.
  • curveType: Anula el valor curveType global de esta serie.
  • labelInLegend: Es la descripción de la serie que aparecerá en la leyenda del gráfico.
  • lineDashStyle: Anula el valor lineDashStyle global para esta serie.
  • lineWidth: Anula el valor lineWidth global de esta serie.
  • pointShape: Anula el valor pointShape global para esta serie.
  • pointSize: Anula el valor pointSize global de esta serie.
  • pointsVisible: Anula el valor pointsVisible global para esta serie.
  • targetAxisIndex: El eje al que se asigna esta serie, en el que 0 es el eje predeterminado y 1 es el opuesto. El valor predeterminado es 0; se establece en 1 para definir un gráfico en el que se rendericen diferentes series según ejes diferentes. Se debe asignar al menos una serie al eje predeterminado. Puedes definir una escala diferente para diferentes ejes.
  • visibleInLegend: Es un valor booleano, en el que true significa que la serie debe tener una entrada de leyenda y false significa que no debe tenerla. El valor predeterminado es verdadero.

Puedes especificar un arreglo de objetos, cada uno de los cuales se aplica a la serie en el orden dado, o puedes especificar un objeto en el que cada elemento secundario tenga una clave numérica que indique a qué serie se aplica. Por ejemplo, las siguientes dos declaraciones son idénticas y declaran que la primera serie es negra y ausente, y la cuarta, como roja y ausente:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    
Tipo: Arreglo de objetos con objetos anidados
Predeterminado: {}
tema

Un tema es un conjunto de valores de opciones predefinidos que funcionan en conjunto para lograr un comportamiento de gráficos o un efecto visual específicos. Por el momento, solo hay un tema disponible:

  • “maximized”: maximiza el área del gráfico y dibuja la leyenda y todas las etiquetas dentro del área del gráfico. Configura las siguientes opciones:
    chartArea: {width: '100%', height: '100%'},
    legend: {position: 'in'},
    titlePosition: 'in', axisTitlesPosition: 'in',
    hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
            
Tipo: string
Valor predeterminado: null
title

Texto para mostrar arriba del gráfico

Tipo: string
Predeterminado: sin título
Posición del título

Dónde colocar el título del gráfico en comparación con el área del gráfico Valores admitidos:

  • in: Dibuja el título en el área del gráfico.
  • out - Dibuja el título fuera del área del gráfico.
  • ninguno: omitir el título
Tipo: string
Predeterminado: “out”
Estilo de texto del título

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> }
    

color puede ser cualquier string de color HTML, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

Type:
Predeterminado: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Información sobre la herramienta

Un objeto con miembros para configurar varios elementos de información sobre la herramienta. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí:

{textStyle: {color: '#FF0000'}, showColorCode: true}
Type:
Valor predeterminado: null
tooltip.ignoreBounds

Si se configura como true, permite que el dibujo de información sobre la herramienta fluya fuera de los límites del gráfico en todos los lados.

Nota: Esto solo se aplica a la información sobre la herramienta de HTML. Si está habilitado con la 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
Valor predeterminado: falso
tooltip.isHtml

Si estableces la política como verdadera, usa información sobre la herramienta procesada con 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 de la información sobre la herramienta de HTML a través de la función de datos de la columna de información sobre la herramienta no es compatible con la visualización del cuadro de burbujas.

Tipo: booleano
Valor predeterminado: falso
tooltip.showColorCode

Si es verdadero, muestra cuadrados de colores junto a la información de la serie en la información sobre la herramienta. El valor predeterminado es verdadero cuando focusTarget se configura como “category”, de lo contrario, es falso.

Tipo: booleano
Predeterminado: automático
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> }
    

color puede ser cualquier string de color HTML, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

Type:
Predeterminado: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Información sobre la herramienta

La interacción del usuario que hace que se muestre la información sobre la herramienta:

  • "focus": la información sobre la herramienta se mostrará cuando el usuario se desplace sobre el elemento.
  • "none": no se mostrará la información sobre la herramienta.
  • "selection": La información sobre la herramienta se mostrará cuando el usuario seleccione el elemento.
Tipo: string
Predeterminado: "enfoque"
líneas de tendencia

Muestra las líneas de tendencia en los gráficos que las admiten. De forma predeterminada, se usan líneas de tendencia lineales, pero esto se puede personalizar con la opción trendlines.n.type.

Las líneas de tendencia se especifican por serie, por lo que la mayoría de las veces tus opciones se verán de la siguiente manera:

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
    
Type:
Valor predeterminado: null
líneasdelínea.n.color

El color de la línea de tendencia , expresado como el nombre del color en inglés o una string hexadecimal.

Tipo: string
Predeterminado: color predeterminado de la serie
líneasdelínea.n.grado

Para las líneas de tendencia de type: 'polynomial', el grado del polinomio (2 para cuadrático, 3 para cúbico, etc.). (El grado predeterminado puede cambiar de 3 a 2 en una próxima versión de Google Charts).

Tipo: número
Predeterminado: 3
líneasdelíneas.n.labelInLegend

Si se configura, la línea de tendencia aparecerá en la leyenda como esta string.

Tipo: string
Valor predeterminado: null
lineasdelínea.n.anchoAncho

Ancho de línea de la línea de tendencia en píxeles.

Tipo: número
Predeterminado: 2
líneasdelínea.n.opacity

La transparencia de la línea de tendencia, de 0.0 (transparente) a 1.0 (opaco).

Tipo: número
Predeterminado: 1.0
líneasdelínea.n.pointSize

En las líneas de tendencia, hay un sello de varios puntos en el gráfico. Esta opción, que rara vez es necesaria, te permite personalizar el tamaño de los puntos. Por lo general, se prefiere la opción lineWidth de la línea de tendencia. Sin embargo, necesitarás esta opción si usas la opción pointSize global y deseas un tamaño de punto diferente para las líneas de tendencia.

Tipo: número
Predeterminado: 1
líneasdelíneas.n.pointsVisibles

En las líneas de tendencia, se marcan varios puntos en el gráfico. La opción pointsVisible de la línea de tendencia determina si los puntos de una línea de tendencia específica son visibles.

Tipo: booleano
Predeterminado: verdadero
líneasdelínea.n.showR2

Indica si se debe mostrar el coeficiente de determinación en la información sobre la leyenda o la línea de tendencia.

Tipo: booleano
Valor predeterminado: falso
líneasdelínea.n.type

Indica si las líneas de tendencia son 'linear' (la opción predeterminada), 'exponential' o 'polynomial'.

Tipo: string
Predeterminada: lineal
líneasdelínea.n.visibleInLegend

Si la ecuación de línea de tendencia aparece en la leyenda. (Aparecerá en la información sobre la herramienta de la línea de tendencia).

Tipo: booleano
Valor predeterminado: falso
Vasos

Especifica las propiedades de los ejes verticales individuales si el gráfico tiene varios ejes verticales. Cada objeto secundario es un objeto vAxis y puede contener todas las propiedades admitidas por vAxis. Estos valores de propiedad anulan cualquier configuración global para la misma propiedad.

Para especificar un gráfico con varios ejes verticales, primero define un nuevo eje mediante series.targetAxisIndex y, luego, configura el eje con vAxes. En el siguiente ejemplo, se asigna la serie 2 al eje derecho y se especifica un título y un estilo de texto personalizados:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

Esta propiedad puede ser un objeto o un arreglo: el objeto es una colección de objetos, cada uno con una etiqueta numérica que especifica el eje que define. Este es el formato que se muestra arriba; el arreglo es un arreglo de objetos, uno por eje. Por ejemplo, la siguiente notación de estilo arreglo es idéntica al objeto vAxis que se muestra arriba:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Tipo:Arreglo de objeto con objetos secundarios
Valor predeterminado: null
Váxis

Un objeto con miembros para configurar varios elementos del eje vertical. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Type:
Valor predeterminado: null
vAxis.Baseline

La propiedad vAxis que especifica el modelo de referencia para el eje vertical. Si el modelo de referencia es más grande que la línea de cuadrícula más alta o menor que la línea de cuadrícula más baja, se redondeará a la línea de cuadrícula más cercana.

Tipo: número
Predeterminado: automático
vAxis.BaseColor

Especifica el color del modelo de referencia para el eje vertical. Puede ser cualquier string de color HTML, por ejemplo: 'red' o '#00cc00'.

Tipo: número
Predeterminado: "negro"
vAxis.direction

La dirección en la que crecen los valores del eje vertical. De forma predeterminada, los valores bajos se encuentran en la parte inferior del gráfico. Especifica -1 para revertir el orden de los valores.

Tipo: 1 o -1
Predeterminado: 1
vAxis.format

Una string de formato para etiquetas de eje numérico. Este es un subconjunto del conjunto de patrones de ICU. Por ejemplo, {format:'#,###%'} mostrará los valores “1,000%”, “750%” y “50%” para los valores 10, 7.5 y 0.5. También puedes proporcionar cualquiera de las siguientes opciones:

  • {format: 'none'}: Muestra los números sin formato (p.ej., 8000000).
  • {format: 'decimal'}: Muestra los números con separadores de miles (p.ej., 8.000.000)
  • {format: 'scientific'}: Muestra los números en notación científica (p.ej., 8e6).
  • {format: 'currency'}: Muestra los números en la moneda local (p.ej., USD 8,000,000.00)
  • {format: 'percent'}: Muestra los números como porcentajes (p.ej., 800,000,000%)
  • {format: 'short'}: Muestra los números abreviados (p.ej., 8 millones)
  • {format: 'long'}: Muestra los números como palabras completas (p.ej., 8 millones)

El formato real aplicado a la etiqueta se deriva de la configuración regional con la que se cargó la API. Para obtener más información, consulta Cómo cargar gráficos con una configuración regional específica.

En el cálculo de valores y líneas de cuadrícula de marcas, se considerarán varias combinaciones alternativas de todas las opciones de líneas de cuadrícula relevantes y se rechazarán alternativas si las etiquetas con marcas de formato con formato se duplicarían o se superpusieran. Por lo tanto, puedes especificar format:"#" si solo deseas mostrar valores de marca de número entero, pero debes tener en cuenta que, si ninguna alternativa satisface esta condición, no se mostrarán líneas de cuadrícula ni marcas.

Tipo: string
Predeterminado: automático
vAxis.gridlines,

Un objeto con miembros para configurar las líneas de cuadrícula en el eje vertical. Ten en cuenta que las líneas de cuadrícula del eje vertical se dibujan horizontalmente. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí:

{color: '#333', minSpacing: 20}
Type:
Valor predeterminado: null
vAxis.gridlines.color;

El color de las líneas de cuadrícula verticales dentro del área del gráfico. Especifica una cadena de color HTML válida.

Tipo: string
Configuración predeterminada: "#CCC"
vAxis.gridlines.count

La cantidad aproximada de líneas de cuadrícula horizontales dentro del área del gráfico. Si especificas un número positivo para gridlines.count, se usará a fin de calcular el minSpacing entre líneas de cuadrícula. Puedes especificar un valor de 1 para dibujar solo una línea de cuadrícula o 0 para que no dibuje ninguna línea de cuadrícula. Especifica -1, que es el valor predeterminado, para calcular automáticamente la cantidad de líneas de cuadrícula según otras opciones.

Tipo: número
Predeterminado: -1
vAxis.gridlines.interval

Un arreglo de tamaños (como valores de datos, no píxeles) entre líneas de cuadrícula adyacentes. Esta opción solo es para ejes numéricos en este momento, pero es análoga a las opciones de gridlines.units.<unit>.interval que se usan solo para fechas y horas. En el caso de las escalas lineales, el valor predeterminado es [1, 2, 2.5, 5], lo que significa que los valores de la línea de cuadrícula pueden encontrarse en cada unidad (1), en unidades pares (2) o en múltiplos de 2.5 o 5. Cualquier potencia de 10 veces estos valores también se considera (p.ej., [10, 20, 25, 50] y [.1, .2, .25, .5]). Para las escalas de registro, el valor predeterminado es [1, 2, 5].

Tipo: Número entre 1 y 10, sin incluir 10.
Predeterminado: calculado
vAxis.gridlines.minSpacing

El espacio mínimo de la pantalla, en píxeles, entre las líneas de cuadrícula principales del eje. El valor predeterminado para las líneas de cuadrícula principales es 40 en escalas lineales y 20 en escalas de registro. Si especificas count y no minSpacing, el minSpacing se calcula a partir del recuento. Por el contrario, si especificas minSpacing y no count, el recuento se calcula desde minSpacing. Si especificas ambos, se anula minSpacing.

Tipo: número
Predeterminado: calculado
vAxis.gridlines.multiple

Todos los valores de línea de cuadrícula y de marca deben ser un múltiplo del valor de esta opción. Ten en cuenta que, a diferencia de los intervalos, no se consideran los poderes de 10 veces el múltiplo de ellos. Por lo tanto, puedes forzar las marcas para que sean números enteros si especificas gridlines.multiple = 1 o forzar las marcas para que sean múltiplos de 1,000 si especificas gridlines.multiple = 1000.

Tipo: número
Predeterminado: 1
vAxis.gridlines.units

Anula el formato predeterminado para varios aspectos de tipos de datos de fecha, hora y hora cuando se usa con líneas de cuadrícula calculadas en los gráficos. Permite el formato por años, meses, días, horas, minutos, segundos y milisegundos.

El formato general es el siguiente:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}
    

Puedes encontrar información adicional en Fechas y horas.

Type:
Valor predeterminado: null
vAxis.minorGridlines

Un objeto con miembros para configurar las líneas de cuadrícula menores en el eje vertical, similar a la opción vAxis.gridlines.

Type:
Valor predeterminado: null
vAxis.minorGridlines.color;

El color de las líneas de cuadrícula secundarias verticales dentro del área del gráfico. Especifica una string de color HTML válida.

Tipo: string
Predeterminado: una combinación de la línea de cuadrícula y los colores del fondo
vAxis.minorGridlines.count

La opción minorGridlines.count es obsoleta, excepto para inhabilitar líneas de cuadrícula secundarias. Para ello, establece el recuento en 0. La cantidad de líneas de cuadrícula secundarias depende del intervalo entre las líneas de cuadrícula principales (consulta vAxis.gridlines.interval) y el espacio mínimo requerido (consulta vAxis.minorGridlines.minSpacing).

Tipo: número
Predeterminado: 1
vAxis.minorGridlines.interval

La opción minorGridlines.interval es como la opción de intervalo de líneas de cuadrícula principales, pero el intervalo elegido siempre será un divisor uniforme del intervalo principal de líneas de cuadrícula. El intervalo predeterminado para las escalas lineales es [1, 1.5, 2, 2.5, 5] y el escalamiento logarítmico es [1, 2, 5].

Tipo: número
Predeterminado: 1
vAxis.minorGridlines.minSpacing

El espacio mínimo requerido, en píxeles, entre las líneas de cuadrícula secundarias adyacentes y entre las líneas de cuadrícula secundarias y principales. El valor predeterminado es la mitad del minSpacing de las líneas de cuadrícula principales para escalas lineales y la mitad del minSpacing para las escalas de registro.

Tipo: número
Predeterminado: computado
vAxis.minorGridlines.multiple

Igual que para el elemento gridlines.multiple principal.

Tipo: número
Predeterminado: 1
vAxis.minorGridlines.units

Anula el formato predeterminado para varios aspectos de los tipos de datos de fecha, hora y hora del día cuando se usa con el método cuadrícula de líneas de cálculo calculadas. Permite el formato por años, meses, días, horas, minutos, segundos y milisegundos.

El formato general es el siguiente:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Puedes encontrar información adicional en Fechas y horas.

Type:
Valor predeterminado: null
vAxis.logScale

Si es verdadero, hace que el eje vertical sea una escala logarítmica. Nota: Todos los valores deben ser positivos.

Tipo: booleano
Valor predeterminado: falso
vAxis.scaleType.

La propiedad vAxis, que hace que el eje vertical sea una escala logarítmica. Puede ser uno de los siguientes:

  • null: no se realiza el escalamiento logarítmico.
  • 'log': Escala logarítmico. No se trazan los valores negativos y cero. Esta opción es igual a configurar vAxis: { logscale: true }.
  • "mirrorLog": Escalamiento logarítmico en el que se trazan los valores negativos y cero. El valor trazado de un número negativo es el negativo del registro del valor absoluto. Los valores cercanos a 0 se trazan en una escala lineal.

Esta opción solo es compatible con el eje continuous.

Tipo: string
Valor predeterminado: null
vAxis.textPosition

Posición del texto del eje vertical en relación con el área del gráfico. Valores admitidos: “out”, “in” y “none”.

Tipo: string
Predeterminado: “out”
vAxis.textStyle

Un objeto que especifica el estilo del texto del eje vertical. El objeto tiene este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color puede ser cualquier string de color HTML, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

Type:
Predeterminado: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Vaxis.ticks

Reemplaza las marcas del eje Y generadas automáticamente por el arreglo especificado. Cada elemento del arreglo debe ser un valor de marca válido (como un número, una fecha, una hora de fecha o una hora del día) o un objeto. Si es un objeto, debe tener una propiedad v para el valor de marca y una propiedad opcional f que contenga la string literal que se mostrará como etiqueta.

La ViewWindow se expandirá automáticamente para incluir las marcas mínimas y máximas, a menos que especifiques viewWindow.min o viewWindow.max.

Ejemplos:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Tipo: Arreglo de elementos
Predeterminado: automático
título de vAxis

La propiedad vAxis que especifica un título para el eje vertical.

Tipo: string
Predeterminado: sin título
vAxis.titleTextStyle

Un objeto que especifica el estilo del texto del título del eje vertical. El objeto tiene este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

color puede ser cualquier string de color HTML, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

Type:
Predeterminado: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Valor de vAxis.maxValue

Mueve el valor máximo del eje vertical al valor especificado; esto será ascendente en la mayoría de los gráficos. Se ignora si se establece en un valor menor que el valor Y máximo de los datos. vAxis.viewWindow.max anula esta propiedad.

Tipo: número
Predeterminado: automático
Valor de vAxis.minValue

Mueve el valor mínimo del eje vertical al valor especificado, que será descendente en la mayoría de los gráficos. Se ignora si se establece en un valor mayor que el valor Y mínimo de los datos. vAxis.viewWindow.min anula esta propiedad.

Tipo: número
Valor predeterminado: null
vAxis.viewWindowMode.

Especifica cómo escalar el eje vertical para procesar los valores dentro del área del gráfico. Se admiten los siguientes valores de string:

  • “pretty”: Escala los valores verticales para que los valores de datos máximos y mínimos se rendericen un poco dentro del área inferior y superior del área del gráfico. ViewWindow se expande a la línea de cuadrícula principal más cercana para números o a la línea de cuadrícula secundaria más cercana para fechas y horas.
  • “maximized”: maximiza los valores verticales, de modo que el valor máximo y el mínimo de los datos toquen la parte superior e inferior del área del gráfico. Esto hará que se ignoren vaxis.viewWindow.min y vaxis.viewWindow.max.
  • "explícitas": una opción obsoleta para especificar los valores de escala superior e inferior del área del gráfico. (Obsoleta porque es redundante con vaxis.viewWindow.min y vaxis.viewWindow.max. Se recortarán los valores de datos fuera de estos valores. Debes especificar un objeto vAxis.viewWindow que describa los valores máximos y mínimos que se mostrarán.
Tipo: string
Predeterminado: Equivale a "pretty", pero vaxis.viewWindow.min y vaxis.viewWindow.max tienen prioridad si se usan.
vAxis.viewWindow

Especifica el rango de recorte del eje vertical.

Type:
Valor predeterminado: null
vAxis.viewWindow.max,

El valor vertical máximo de los datos que se renderizarán.

Se ignora cuando vAxis.viewWindowMode es "bastante" o "maximizado".

Tipo: número
Predeterminado: automático
vAxis.viewWindow.min.

Valor mínimo de datos verticales que se renderizarán.

Se ignora cuando vAxis.viewWindowMode es "bastante" o "maximizado".

Tipo: número
Predeterminado: automático
ancho

Ancho del gráfico en píxeles.

Tipo: número
Predeterminado: ancho del elemento que lo contiene

Métodos

Método
draw(data, options)

Dibuja el gráfico. El gráfico acepta más llamadas a métodos después de que se activa el evento ready. Extended description

Tipo de datos que se muestra: ninguno
getAction(actionID)

Muestra el objeto de acción de información sobre la herramienta con el actionID solicitado.

Return Type: Objeto
getBoundingBox(id)

Muestra un objeto que contiene la izquierda, la parte superior, el ancho y la altura del elemento de gráfico id. El formato para id aún no está documentado (son los valores de retorno de los controladores de eventos), pero estos son algunos ejemplos:

var cli = chart.getChartLayoutInterface();

Altura del área del gráfico
cli.getBoundingBox('chartarea').height
Ancho de la tercera barra en la primera serie de un gráfico de barras o columnas
cli.getBoundingBox('bar#0#2').width
Cuadro de límite de la quinta cuña de un gráfico circular
cli.getBoundingBox('slice#4')
Cuadro de límite de los datos de gráfico de un gráfico vertical (p.ej., columna)
cli.getBoundingBox('vAxis#0#gridline')
Cuadro de límite de los datos de gráfico de un gráfico horizontal (p.ej., barra)
cli.getBoundingBox('hAxis#0#gridline')

Los valores son relativos al contenedor del gráfico. Llámelo después de que se dibuje el gráfico.

Return Type: Objeto
getChartAreaBoundingBox()

Muestra un objeto que contiene el contenido a la izquierda, en la parte superior, el ancho y la altura del contenido del gráfico (es decir, sin incluir las etiquetas y la leyenda):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

Los valores son relativos al contenedor del gráfico. Llámelo después de que se dibuje el gráfico.

Return Type: Objeto
getChartLayoutInterface()

Muestra un objeto que contiene información sobre la posición en la pantalla del gráfico y sus elementos.

Se puede llamar a los siguientes métodos en el objeto mostrado:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

Llámelo después de que se dibuje el gráfico.

Return Type: Objeto
getHAxisValue(xPosition, optional_axis_index)

Muestra el valor de los datos horizontales en xPosition, que es un desplazamiento de píxeles del borde izquierdo del contenedor del gráfico. Puede ser negativo.

Ejemplo: chart.getChartLayoutInterface().getHAxisValue(400).

Llámelo después de que se dibuje el gráfico.

Tipo de devolución: número
getImageURI()

Muestra el gráfico serializado como un URI de imagen.

Llámelo después de que se dibuje el gráfico.

Consulta Cómo imprimir gráficos PNG.

Tipo de datos que se muestra: string
getSelection()

Muestra un arreglo de las entidades del gráfico seleccionadas. Las entidades que se pueden seleccionar son puntos, anotaciones, entradas de leyenda y categorías. Un punto o anotación corresponde a una celda en la tabla de datos, una entrada de leyenda a una columna (el índice de fila es nulo) y una categoría a una fila (el índice de la columna es nulo). Para este gráfico, solo se puede seleccionar una entidad por momento. Extended description.

Tipo de datos que se muestra: arreglo de elementos de selección
getVAxisValue(yPosition, optional_axis_index)

Muestra el valor de datos vertical en yPosition, que es un desplazamiento de píxeles hacia abajo desde el borde superior del contenedor del gráfico. Puede ser negativo.

Ejemplo: chart.getChartLayoutInterface().getVAxisValue(300).

Llámelo después de que se dibuje el gráfico.

Tipo de devolución: número
getXLocation(dataValue, optional_axis_index)

Muestra la coordenada X del píxel de dataValue en relación con el borde izquierdo del contenedor del gráfico.

Ejemplo: chart.getChartLayoutInterface().getXLocation(400).

Llámelo después de que se dibuje el gráfico.

Tipo de devolución: número
getYLocation(dataValue, optional_axis_index)

Muestra la coordenada Y del píxel de dataValue en relación con el borde superior del contenedor del gráfico.

Ejemplo: chart.getChartLayoutInterface().getYLocation(300).

Llámelo después de que se dibuje el gráfico.

Tipo de devolución: número
removeAction(actionID)

Quita del gráfico la acción de información sobre la herramienta con la actionID solicitada.

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 la acción.

El método setAction toma un objeto como su parámetro de acción. Este objeto debe especificar 3 propiedades: id (el ID de la acción que se establece), text (el texto que debe aparecer en la información sobre la herramienta de la acción) y action (la función que se debe ejecutar cuando un usuario hace clic en el texto de la acción).

Todas las acciones de información sobre la herramienta se deben configurar antes de llamar al método draw() del gráfico. Descripción extendida.

Tipo de datos que se muestra: none
setSelection()

Selecciona las entidades del gráfico especificadas. Cancela cualquier selección anterior. Las entidades que se pueden seleccionar son puntos, anotaciones, entradas de leyenda y categorías. Un punto o anotación corresponde a una celda en la tabla de datos, una entrada de leyenda a una columna (el índice de fila es nulo) y una categoría a una fila (el índice de la columna es nulo). Para este gráfico, solo se puede seleccionar una entidad a la vez. Extended description.

Tipo de datos que se muestra: ninguno
clearChart()

Borra el gráfico y libera todos los recursos asignados.

Tipo de datos que se muestra: ninguno

Eventos

Si quieres obtener más información para usar estos eventos, consulta Interactividad básica, Control de eventos y Eventos de activación.

Nombre
animationfinish

Se activa cuando se completa la animación de transición.

Propiedades: ninguna
click

Se activa cuando el usuario hace clic dentro del gráfico. Se puede usar para identificar cuándo se hace clic en el título, los elementos de datos, las entradas de la 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 procesar el gráfico.

Propiedades: ID, mensaje
legendpagination

Se activa cuando el usuario hace clic en las flechas de paginación de la leyenda. Devuelve el índice de página actual basado en cero de la leyenda y la cantidad total de páginas.

Propiedades: currentPageIndex, totalPages
onmouseover

Se activa cuando el usuario desplaza el mouse sobre una entidad visual. Devuelve los índices de fila y de columna del elemento de tabla de datos correspondiente.

Properties: Row, Column
onmouseout

Se activa cuando el usuario se aleja del mouse de una entidad visual. Vuelve a pasar los índices de fila y columna del elemento de tabla de datos correspondiente.

Properties: Row, Column
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.

Propiedades: ninguna
select

Se activa cuando el usuario hace clic en una entidad visual. Para saber qué elementos se seleccionaron, llama a getSelection().

Propiedades: ninguna

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.