Visualización: gráfico de columnas

Descripción general

Un gráfico de columnas es un gráfico de barras verticales que se renderiza en el navegador mediante SVG o VML, el que sea apropiado para el navegador del usuario. Al igual que todos los gráficos de Google, los gráficos de columnas muestran información sobre la herramienta cuando el usuario coloca el cursor sobre los datos. Para obtener una versión horizontal de este gráfico, consulta el gráfico de barras.

Ejemplos

Cómo colorear columnas

Hagamos un gráfico de las densidades de cuatro metales preciosos:

Arriba, todos los colores son el azul predeterminado. Esto se debe a que todas son parte de la misma serie; si hubiera una segunda serie, habría sido de color rojo. Podemos personalizar estos colores con el rol de estilo:

Existen tres maneras diferentes de elegir los colores, y nuestra tabla de datos los muestra a todos: valores RGB, nombres de colores en inglés y una declaración similar a CSS: 

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],

       ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

Estilos de columna

El rol de estilo te permite controlar varios aspectos de la apariencia de la columna con declaraciones similares a las de CSS:

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

No recomendamos que mezcles estilos con demasiada libertad dentro de un gráfico. Elige un estilo y quédate con él. Sin embargo, para demostrar todos los atributos de estilo, a continuación te mostramos un ejemplo:

Las primeras dos columnas usan un color específico (la primera con un nombre en inglés y la segunda con un valor RGB). No se eligió opacity, por lo que se usa el valor predeterminado de 1.0 (completamente opaco). Es por eso que la segunda columna oculta la línea de cuadrícula detrás de ella. En la tercera columna, se usa un opacity de 0.2, lo que revela la línea de cuadrícula. En la cuarta, se usan tres atributos de diseño: stroke-color y stroke-width para dibujar el borde, y fill-color para especificar el color del rectángulo dentro de ella. Además, la columna del extremo derecho usa stroke-opacity y fill-opacity a fin de elegir opacidades para el borde y el relleno: 

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Cómo etiquetar columnas

Los gráficos tienen varios tipos de etiquetas, como etiquetas de marcas, etiquetas de leyendas y etiquetas en la información sobre la herramienta. En esta sección, veremos cómo colocar etiquetas dentro de las columnas (o cerca de ellas) en un gráfico de columnas.

Supongamos que queremos anotar cada columna con el símbolo químico apropiado. Podemos hacerlo con el rol de annotation:

En nuestra tabla de datos, definimos una columna nueva con { role: 'annotation' } para contener las etiquetas de nuestra columna: 

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Si bien los usuarios pueden colocar el cursor sobre las columnas para ver los valores de los datos, es posible que desees incluirlos en las columnas:

Esto es un poco más complicado de lo que debería ser, ya que creamos un DataView para especificar la anotación de cada columna. 

  <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([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>

Si quisiéramos darle otro formato al valor, podríamos definir un formateador y unirlo en una función como la siguiente: 

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

Luego, podríamos llamarlo con calc: getValueAt.bind(undefined, 1).

Si la etiqueta es demasiado grande para caber por completo dentro de la columna, se mostrará por fuera:

Gráficos de columnas apiladas

Un gráfico de columnas apiladas es un gráfico de columnas en el que los valores relacionados se colocan uno encima del otro. Si hay valores negativos, se apilan en orden inverso debajo del modelo de referencia del gráfico. Por lo general, se usa cuando una categoría se divide naturalmente en componentes. Por ejemplo, considera algunas ventas de libros hipotéticas, divididas por género y comparadas a lo largo del tiempo:

Para crear un gráfico de columnas apiladas, establece la opción isStacked en true: 

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true,
      };

Los gráficos de columnas apiladas también admiten el apilado al 100%, en el que las pilas de elementos en cada valor de dominio se reescalan para que sumen un 100%. Las opciones para esto son isStacked: 'percent', que formatea cada valor como un porcentaje del 100%, y isStacked: 'relative', que formatea cada valor como una fracción de 1. También existe una opción isStacked: 'absolute', que es funcionalmente equivalente a isStacked: true.

Ten en cuenta que, en el gráfico apilado al 100% de la derecha, los valores de marca se basan en la escala relativa 0-1 como fracciones de 1, pero los valores de los ejes se muestran como porcentajes. Esto se debe a que las marcas del eje porcentual son el resultado de aplicar un formato de "#.##%" a los valores relativos de la escala 0-1. Cuando uses isStacked: 'percent', asegúrate de especificar cualquier marca o valor de eje mediante la escala relativa de 0 a 1.

Apilado
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {minValue: 0}
        };
100% apilado
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

Crea gráficos de columnas de Material

En 2014, Google anunció lineamientos destinados a admitir un diseño común en todas sus propiedades y apps (como las apps para Android) que se ejecutan en las plataformas de Google. A esta iniciativa la llamamos Material Design. Ofreceremos versiones de "Material" de todos nuestros gráficos principales; puedes usarlas si te gusta cómo se ven.

Crear un gráfico de columnas de Material es similar a crear lo que ahora llamaremos un gráfico de columnas "clásico". Carga la API de visualización de Google (aunque con el paquete 'bar' en lugar del paquete 'corechart'), define tu tabla de datos y, luego, crea un objeto (pero de la clase google.charts.Bar en lugar de google.visualization.ColumnChart).

Dado que los gráficos de barras y los gráficos de columnas son básicamente idénticos, pero en cuanto a la orientación, llamamos a ambos gráficos de barras de Material, independientemente de si las barras son verticales (clásicamente, un gráfico de columnas) o horizontales (un gráfico de barras). En Material, la única diferencia está en la opción bars. Cuando se establece en 'horizontal', la orientación será similar a la del gráfico de barras clásico tradicional; de lo contrario, las barras serán verticales.

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

Los gráficos de columnas de Material tienen muchas mejoras pequeñas en comparación con los gráficos de columnas clásicos, incluida una paleta de colores mejorada, esquinas redondeadas, un formato de etiquetas más claro, un espaciado predeterminado más ajustado entre las series, líneas de cuadrícula y títulos más suaves (y la adición de subtítulos).

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
  </body>
</html>

Los gráficos de Material están en versión beta. La apariencia y la interactividad son, en gran medida, definitivas, pero muchas de las opciones disponibles en los gráficos clásicos aún no lo están. Puedes encontrar una lista de 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 material reemplazando esta línea:

chart.draw(data, options);

...por lo siguiente:

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

El uso de google.charts.Bar.convertOptions() te permite aprovechar ciertas funciones, como las opciones predeterminadas de hAxis/vAxis.format.

Gráficos Y doble

En algunos casos, querrás mostrar dos series en un gráfico de columnas con dos ejes Y independientes: un eje izquierdo para una serie y un eje derecho para otra:

Ten en cuenta que nuestros dos ejes Y no solo están etiquetados de manera diferente ("parsecs" frente a "magnitude aparente"), sino que cada uno tiene sus propias escalas y líneas de cuadrícula independientes. Si deseas personalizar este comportamiento, usa las opciones vAxis.gridlines.

En el siguiente código, las opciones axes y series en conjunto especifican la apariencia doble Y del gráfico. La opción series especifica qué eje usar para cada uno ('distance' y 'brightness'; no necesitan tener 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, colocando el eje 'distance' a la izquierda (etiquetado como “parsecs”) y el eje 'brightness' a la derecha (etiquetado como “magnitud aparente”). 

<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', 'bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var materialOptions = {
          width: 900,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            y: {
              distance: {label: 'parsecs'}, // Left y-axis.
              brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis.
            }
          }
        };

        var classicOptions = {
          width: 900,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Nearby galaxies - distance on the left, brightness on the right',
          vAxes: {
            // Adds titles to each axis.
            0: {title: 'parsecs'},
            1: {title: 'apparent magnitude'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Bar(chartDiv);
          materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ColumnChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };
    </script>
  </head>
  <body>
    <button id="change-chart">Change to Classic</button>
    <br><br>
    <div id="chart_div" style="width: 800px; height: 500px;"></div>
  </body>
</html>

Rankings de las X principales

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

Si deseas colocar las etiquetas y el título del eje X en la parte superior de tu gráfico en lugar de 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':['bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          width: 800,
          legend: { position: 'none' },
          chart: {
            title: 'Chess opening moves',
            subtitle: 'popularity by percentage' },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 800px; height: 600px;"></div>
  </body>
</html>

Cargando

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

  google.charts.load("current", {packages: ["corechart"]});

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

En los gráficos de columnas de Material, el nombre del paquete google.charts.load es "bar". (No es un error tipográfico: el gráfico de barras de Material controla ambas orientaciones). El nombre de clase de la visualización es google.charts.Bar. (No es un error tipográfico: el gráfico de barras de Material maneja ambas orientaciones).

  google.charts.load("current", {packages: ["bar"]});

  var chart = new google.charts.Bar(container);

Formato de los datos

Cada fila de la tabla representa un grupo de barras adyacentes.

Filas: Cada fila de la tabla representa un grupo de barras.

Columnas:

  Columna 0 Columna 1 ... Columna N
Objetivo: Valores de la barra 1 en este grupo ... Barra de valores N de este grupo
Tipo de datos: número ... número
Role: dominio datos ... datos
Roles de columna opcionales: ...

 

Opciones de configuración

Nombre
animation.duration

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

Tipo: Número
Valor predeterminado: 0
animation.easing

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

  • "lineal": velocidad constante.
  • "in" - Acercarse con suavidad: Comienza despacio y auméntalo.
  • "out": aléjate con facilidad: comienza rápido y desacelera.
  • "inAndOut": Entra y sale con cuidado. Comienza despacio, auméntalo y luego desacelera.
Tipo: string
Predeterminado: "lineal"
animation.startup

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

Tipo: booleano
Predeterminado falso
annotations.alwaysOutside

En los gráficos de barras y de columnas, si se establece en true, dibuja todas las anotaciones fuera de la barra/columna.

Tipo: booleano
Predeterminado: falso
annotations.boxStyle

En el caso de 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, de barras, de columnas, combinados, de líneas y de dispersión. No es compatible con el gráfico de anotaciones.

Tipo: objeto
Valor predeterminado: nulo
annotations.datum
En el caso de los gráficos que admiten anotaciones, el objeto annotations.datum te permite anular la opción de Gráficos de Google para las anotaciones proporcionadas para elementos de datos individuales (como los valores que se muestran con cada barra de un gráfico de barras). Puedes controlar el color con annotations.datum.stem.color, la longitud del tallo con annotations.datum.stem.length y el estilo con annotations.datum.style.
Tipo: objeto
Predeterminado: el color es “negro”; la longitud es 12; el estilo es “punto”.
annotations.domain
En el caso de los gráficos que admiten anotaciones, el objeto annotations.domain te permite anular la opción de 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 del tallo con annotations.domain.stem.length y el estilo con annotations.domain.style.
Tipo: objeto
Predeterminado: el color es “negro”; la longitud es 5; el estilo es “punto”.
annotations.highContrast
En el caso de los gráficos que admiten anotaciones, el booleano annotations.highContrast te permite anular la elección del color de anotación en Gráficos de Google. De forma predeterminada, el valor annotations.highContrast es verdadero, lo que hace que Gráficos seleccione un color de anotación con buen contraste: colores claros sobre fondos oscuros y oscuro sobre fondos claros. Si configuras annotations.highContrast como falso y no especificas tu propio color de anotación, Gráficos de Google usará el color de serie predeterminado para la anotación:
Tipo: booleano
Predeterminado: verdadero
annotations.stem
En el caso de los gráficos que admiten anotaciones, el objeto annotations.stem te permite anular la elección de Google Charts para el estilo de la raíz. Puedes controlar el color con annotations.stem.color y la longitud del tallo con annotations.stem.length. Ten en cuenta que la opción de longitud de la raíz no tiene ningún efecto en las anotaciones con el estilo 'line': para las anotaciones de datos 'line', la longitud del tallo siempre es la misma que la del texto, y para las anotaciones del dominio 'line', el tallo se extiende en todo el gráfico.
Tipo: objeto
Predeterminado: el color es “negro”; la longitud es 5 para las anotaciones del dominio y 12 para las anotaciones de datum.
annotations.style
En el caso de los gráficos que admiten anotaciones, la opción annotations.style te permite anular la elección del tipo de anotación de Google Charts. Puede ser 'line' o 'point'.
Tipo: string
Predeterminado: “punto”
annotations.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, de barras, de columnas, combinados, de líneas y de dispersión. No es compatible con el gráfico de anotaciones .

Tipo: objeto
Valor predeterminado: nulo
axisTitlesPosition

Es el lugar en el que se colocan 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
Configuración predeterminada: "out"
backgroundColor

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

Tipo: objeto o cadena
Predeterminado: “white”
backgroundColor.stroke

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

Tipo: string
Predeterminado: “#666”
backgroundColor.strokeWidth

Es el ancho del borde en píxeles.

Tipo: Número
Valor predeterminado: 0
backgroundColor.fill

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

Tipo: string
Predeterminado: “white”
bar.groupWidth
Ancho de un grupo de barras, especificado en cualquiera de estos formatos:
  • Píxeles (p.ej., 50).
  • Porcentaje del ancho disponible para cada grupo (p.ej., "20%"), donde "100%" significa que no hay espacio entre los grupos.
Tipo: número o string
Valor predeterminado: Proporción de oro, aproximadamente "61.8%".
barras

Indica si las barras en un gráfico de barras de Material son horizontales o verticales. Esta opción no tiene efecto en los gráficos de barras clásicos ni en los gráficos de columnas clásicos.

Tipo: "horizontal" o "vertical"
Configuración predeterminada: "vertical"
chartArea

Un objeto con miembros para configurar la posición y el tamaño del área del gráfico (donde se dibuja el gráfico, sin incluir los ejes ni las leyendas). Se admiten dos formatos: un número o un número seguido de %. Un número simple es un valor en píxeles; un número seguido de % es un porcentaje. Ejemplo: chartArea:{left:20,top:0,width:'50%',height:'75%'}

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

Indica qué tan lejos se debe dibujar el gráfico desde el borde izquierdo.

Tipo: número o string
Predeterminada: automática
chartArea.top

Indica qué tan lejos se debe dibujar el gráfico desde el borde superior.

Tipo: número o string
Predeterminada: automática
chartArea.width

Ancho del área del gráfico.

Tipo: número o string
Predeterminada: automática
chartArea.height

Altura del área del gráfico.

Tipo: número o string
Predeterminada: automática
chart.subtitle

Para los gráficos de Material, esta opción especifica el subtítulo. Solo los gráficos de Material admiten subtítulos.

Tipo: string
Valor predeterminado: nulo
chart.title

Para los gráficos de Material, esta opción especifica el título.

Tipo: string
Valor predeterminado: nulo
colores

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

Tipo: Arreglo de cadenas
Predeterminado: Colores predeterminados
dataOpacity

La transparencia de los datos, en la que 1.0 es completamente opaco y 0.0 completamente transparente. En los gráficos de dispersión, histogramas, de barras y columnas, se refiere a los datos visibles: puntos en el diagrama de dispersión y rectángulos en los demás. En los gráficos en los que al seleccionar datos se crea un punto, como los gráficos de líneas y de áreas, esto hace referencia a los círculos que aparecen cuando se coloca el cursor sobre un elemento o se lo selecciona. 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 arroja eventos basados en el usuario o reacciona a la interacción del usuario. Si es falso, el gráfico no arrojará "seleccionar" ni otros eventos basados en interacciones (pero sí arrojará eventos listos o de error), ni mostrará texto flotante ni cambiará según la entrada del usuario.

Tipo: booleano
Predeterminado: verdadero
explorer

La opción explorer permite a los usuarios desplazarse lateralmente y acercar o alejar los gráficos de Google. explorer: {} proporciona el comportamiento predeterminado del explorador, lo que permite a los usuarios desplazarse horizontal y verticalmente con el arrastre, y acercar y alejar el mapa con el 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).

Tipo: objeto
Valor predeterminado: nulo
explorer.actions

El explorador de Gráficos de Google admite tres acciones:

  • dragToPan: Arrastra para desplazarte por el gráfico de forma horizontal y vertical. Para desplazarte solo a lo largo del eje horizontal, usa explorer: { axis: 'horizontal' }. Del mismo modo para el eje vertical.
  • dragToZoom: El comportamiento predeterminado del explorador es acercar y alejar el zoom cuando el usuario se desplaza. Si se usa explorer: { actions: ['dragToZoom', 'rightClickToReset'] }, arrastrar un área rectangular se acerca a esa área. Te recomendamos usar rightClickToReset cada vez que se use dragToZoom. Consulta explorer.maxZoomIn, explorer.maxZoomOut y explorer.zoomDelta para personalizar el zoom.
  • rightClickToReset: Si haces clic con el botón derecho en el gráfico, este volverá al nivel de zoom y desplazamiento lateral original.
Tipo: Arreglo de cadenas
Predeterminado: ['dragToPan', 'rightClickToReset']
explorer.axis

De forma predeterminada, los usuarios pueden desplazarse horizontal y verticalmente cuando se usa la opción explorer. Si deseas que los usuarios solo puedan desplazarse horizontalmente, usa explorer: { axis: 'horizontal' }. Del mismo modo, explorer: { axis: 'vertical' } permite el desplazamiento lateral solo vertical.

Tipo: string
Configuración predeterminada: desplazamiento horizontal y vertical
explorer.keepInBounds

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

Tipo: booleano
Predeterminado: falso
explorer.maxZoomIn

El máximo que puede acercar el explorador. De forma predeterminada, los usuarios podrán acercar la imagen lo suficiente como para ver solo el 25% de la vista original. Configurar explorer: { maxZoomIn: .5 } permitiría a los usuarios acercar la imagen solo lo suficiente como para ver la mitad de la vista original.

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

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

Tipo: Número
Valor predeterminado: 4
explorer.zoomDelta

Cuando los usuarios acercan o alejan el mapa, explorer.zoomDelta determina cuánto acercan. Cuanto menor sea el número, más suave y lento será el zoom.

Tipo: Número
Predeterminado: 1.5
focusTarget

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

  • "datum": se centra en un solo dato. Se correlaciona con una celda de la tabla de datos.
  • "categoría": se centra en una agrupación de todos los datos a lo largo del eje principal. Se correlaciona con una fila de la tabla de datos.

En el campo "category" (categoría) de FocusTarget, el cuadro de información 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 de fuente predeterminado, en píxeles, de todo el texto en el gráfico. Puedes anular esto usando propiedades para elementos específicos del gráfico.

Tipo: Número
Predeterminada: automática
fontName

Es el tipo de fuente predeterminado para todo el texto del gráfico. Puedes anular esto usando propiedades para elementos específicos del gráfico.

Tipo: string
Predeterminado: "Arial"
forceIFrame

Dibuja el gráfico dentro de un marco intercalado. (Ten en cuenta que, en IE8, esta opción se ignora; todos los gráficos de IE8 se dibujan en iframes).

Tipo: booleano
Predeterminado: falso
hAxis

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 objeto, como se muestra a continuación: 

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
Tipo: objeto
Valor predeterminado: nulo
hAxis.baseline

La línea de base para el eje horizontal.

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

Tipo: Número
Predeterminada: automática
hAxis.baselineColor

El color de la línea de base para el eje horizontal. Puede ser cualquier cadena HTML de color, por ejemplo: 'red' o '#00cc00'.

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

Tipo: Número
Predeterminado: “negro”
hAxis.direction

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

Tipo: 1 o -1
Configuración predeterminada: 1
hAxis.format

Es una cadena de formato para etiquetas numéricas o del eje de fecha.

Para las etiquetas del eje numérico, este 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 los siguientes valores:

  • {format: 'none'}: Muestra los números sin formato (p.ej., 8,000,000)
  • {format: 'decimal'}: Muestra números con separadores de miles (p.ej., 8 000 000)
  • {format: 'scientific'}: muestra 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 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 del primero de julio de 2011.

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

En el cálculo de los valores de marcas y las líneas de cuadrícula, se considerarán varias combinaciones alternativas de todas las opciones de líneas de cuadrícula relevantes, y las alternativas se rechazarán si se duplican o se superponen las etiquetas de marca con formato. Por lo tanto, puedes especificar format:"#" si solo quieres mostrar valores enteros de marca, pero ten en cuenta que si ninguna alternativa cumple con esta condición, no se mostrarán marcas de cuadrícula ni marcas.

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

Tipo: string
Predeterminada: automática
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 propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: 

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

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

Tipo: objeto
Valor predeterminado: nulo
hAxis.gridlines.color

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

Tipo: string
Predeterminado: “#CCC”
hAxis.gridlines.count

Es 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 las líneas de cuadrícula. Puedes especificar un valor de 1 para dibujar solo una línea de cuadrícula o 0 para no dibujar ninguna. Especifica -1, que es la opción predeterminada, para calcular automáticamente la cantidad de líneas de cuadrícula según otras opciones.

Tipo: Número
Valor predeterminado: -1
hAxis.gridlines.interval

Es un array de tamaños (como valores de datos, no píxeles) entre líneas de cuadrícula adyacentes. Por el momento, esta opción solo es para ejes numéricos, pero es similar a las opciones de gridlines.units.<unit>.interval, que se usan solo para fechas y horas. Para las escalas lineales, el valor predeterminado es [1, 2, 2.5, 5], lo que significa que los valores de las líneas de cuadrícula pueden corresponder a cada unidad (1), a unidades pares (2) o a múltiplos de 2.5 o 5. También se considera cualquier potencia de 10 veces estos valores (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 el 10.
Predeterminado: computado
hAxis.gridlines.minSpacing

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

Tipo: Número
Predeterminado: computado
hAxis.gridlines.multiple

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

Tipo: Número
Configuración predeterminada: 1
hAxis.gridlines.units

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

El formato general es:

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 horarios.

Tipo: objeto
Valor predeterminado: nulo
hAxis.minorGridlines

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

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

Tipo: objeto
Valor predeterminado: nulo
hAxis.minorGridlines.color

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

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

La opción minorGridlines.count está obsoleta en su mayoría, excepto por la configuración del recuento en 0 para inhabilitar las líneas de cuadrícula secundarias. 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
Configuración predeterminada: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 que se elija siempre será un divisor par del intervalo de líneas de cuadrícula principal. El intervalo predeterminado para las escalas lineales es [1, 1.5, 2, 2.5, 5] y para las escalas logarítmicas es [1, 2, 5].

Tipo: Número
Configuración predeterminada:1
hAxis.minorGridlines.minSpacing

Es 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 1/2 el espaciado mínimo de las líneas de cuadrícula principales para escalas lineales y 1/5 el espaciado mínimo para las escalas logarítmicas.

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

Igual que para la gridlines.multiple principal.

Tipo: Número
Configuración predeterminada: 1
hAxis.minorGridlines.units

Anula el formato predeterminado para varios aspectos de los tipos de datos de fecha, fecha y hora y hora del día cuando se usa con el gráfico menorGridlines calculada. Permite formatear años, meses, días, horas, minutos, segundos y milisegundos.

El formato general es:

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 horarios.

Tipo: objeto
Valor predeterminado: nulo
hAxis.logScale

La propiedad hAxis que hace que el eje horizontal sea una escala logarítmica (requiere que todos los valores sean positivos). Si la respuesta es verdadera, significa que sí.

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

Tipo: booleano
Predeterminado: falso
hAxis.scaleType

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

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

Esta opción solo es compatible con un 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”, “none”.

Tipo: string
Configuración predeterminada: "out"
hAxis.textStyle

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

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

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

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

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

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

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 continuous.

Tipo: Arreglo de elementos
Predeterminada: automática
hAxis.title

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

Tipo: string
Valor predeterminado: nulo
hAxis.titleTextStyle

Un objeto que especifica el estilo de 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 cadena HTML de color, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

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

Si se establece como falso, se ocultarán las etiquetas más externas en lugar de permitir que el contenedor del gráfico las recorte. Si es verdadero, se permitirá el recorte de etiquetas.

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

Tipo: booleano
Predeterminado: falso
hAxis.slantedText

Si es verdadero, dibuja el texto del eje horizontal en un ángulo para ayudar a que se ajuste más texto a lo largo del eje; si se establece como falso, dibuja el texto del eje horizontal en posición vertical. El comportamiento predeterminado es inclinar el texto si no puede caber todo 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 la opción predeterminada). El valor predeterminado es false para las fechas y horas.

Tipo: booleano
Predeterminada: automática
hAxis.slantedTextAngle

El ángulo del texto del eje horizontal, si se dibuja inclinado. 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 el sentido contrario a las manecillas del reloj y, si es negativa, es en el sentido de las manecillas del reloj.

Tipo: número, de -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 se sobrecargan demasiado, el servidor puede mover las etiquetas vecinas hacia arriba o hacia abajo para que las etiquetas quepan más juntas. Este valor especifica la mayor cantidad de niveles que se usarán. Si las etiquetas pueden caber sin superponerse, el servidor puede usar menos niveles. Para las fechas y horas, el valor predeterminado es 1.

Tipo: Número
Valor 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
Predeterminada: automática
hAxis.minTextSpacing

Espaciado horizontal mínimo, en píxeles, permitido entre dos etiquetas de texto adyacentes. Si las etiquetas están demasiado densas o son demasiado largas, el espaciado puede caer por debajo de este umbral y, en este caso, se aplicará una de las medidas de limpieza de etiquetas (p. ej., truncar las etiquetas o descartar algunas de ellas).

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

Cuántas etiquetas del eje horizontal mostrar, donde 1 significa mostrar todas las etiquetas, 2 significa mostrar todas las demás y así sucesivamente. De forma predeterminada, se intenta mostrar tantas etiquetas como sea posible sin superponerse.

Tipo: Número
Predeterminada: automática
hAxis.maxValue

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

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

Tipo: Número
Predeterminada: automática
hAxis.minValue

Mueve el valor mínimo del eje horizontal al valor especificado; este se posicionará 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 continuous.

Tipo: Número
Predeterminada: automática
hAxis.viewWindowMode

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

  • "pretty": Escala los valores horizontales para que los valores de datos máximo y mínimo se rendericen un poco dentro del área izquierda y derecha del área del gráfico. El objeto viewWindow se expande a la línea de cuadrícula principal más cercana para los números, o a la línea de cuadrícula secundaria más cercana para las fechas y horas.
  • "maximized": escala los valores horizontales para que los valores de datos máximo y mínimo toquen la izquierda y la derecha del área del gráfico. Esto hará que haxis.viewWindow.min y haxis.viewWindow.max se ignoren.
  • "explícito": Es una opción obsoleta para especificar los valores de escala izquierdo y derecho del área del gráfico. (obsoleto 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 que se mostrarán.

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

Tipo: string
Predeterminado: Equivalente 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.

Tipo: objeto
Valor predeterminado: nulo
hAxis.viewWindow.max

  • Para un eje continuous :

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

  • Para un eje discrete:

    El índice de fila basado en cero donde finaliza la ventana de recorte. Se recortarán los datos de este índice y superiores. Junto con vAxis.viewWindowMode.min, define un rango semiabierto [mín., máx.] que denota los índices del elemento que se mostrarán. En otras palabras, se mostrará cada índice de modo que se muestre min <= index < max.

Se ignora cuando hAxis.viewWindowMode es "pretty" o "maximized".

Tipo: Número
Predeterminada: automática
hAxis.viewWindow.min

  • Para un eje continuous:

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

  • Para un eje discrete:

    El índice de fila basado en cero donde comienza la ventana de recorte. Se recortarán los datos de los índices inferiores a esta cifra. Junto con vAxis.viewWindowMode.max, define un rango semiabierto [mín., máx.] que denota los índices del elemento que se mostrarán. En otras palabras, se mostrarán todos los índices como min <= index < max.

Se ignora cuando hAxis.viewWindowMode es "pretty" o "maximized".

Tipo: Número
Predeterminada: automática
height

Altura del gráfico en píxeles.

Tipo: Número
Predeterminado: la altura del elemento contenedor
isStacked

Si se configura como verdadera, apila los elementos de todas las series en cada valor de dominio. Nota: En los gráficos Column, Area y SteppedArea, los gráficos de Google revierten el orden de los elementos de la leyenda para que se correspondan mejor con la apilado de los elementos de la serie (p.ej., la serie 0 será el elemento de leyenda más bajo). Esto no se aplica a los gráficos de barras.

La opción isStacked también admite el apilado al 100%, en el que las pilas de elementos en cada valor de dominio se reescalan para sumar un 100%.

Las opciones para isStacked son las siguientes:

  • false: Los elementos no se apilan. Esta es la opción predeterminada.
  • true: Apila elementos para todas las series en cada valor de dominio.
  • 'percent': Apila elementos para todas las series en cada valor de dominio y cambia su escala de modo que sumen hasta un 100% (el valor de cada elemento se calcula como un porcentaje del 100%).
  • 'relative': Apila elementos para todas las series en cada valor de dominio y les cambia la escala de modo que sumen 1; el valor de cada elemento se calcula como una fracción de 1.
  • 'absolute': Funciona igual que isStacked: true.

Para apilar el 100%, el valor calculado de cada elemento aparecerá en la información sobre la herramienta después de su valor real.

De forma predeterminada, el eje objetivo mostrará valores de marca basados en la escala relativa 0-1 como fracciones de 1 para 'relative' y 0-100% para 'percent'. (Nota: Cuando se usa la opción 'percent', los valores de los ejes o las marcas se muestran como porcentajes; sin embargo, los valores reales son los valores relativos de escala 0-1. Esto se debe a que las marcas del eje porcentual son el resultado de aplicar un formato de "#.##%" a los valores relativos de la escala 0-1. Cuando uses isStacked: 'percent', asegúrate de especificar las marcas o líneas de cuadrícula mediante los valores relativos de escala de 0 a 1. Puedes personalizar las líneas de cuadrícula y los valores de marca y el formato con las opciones hAxis/vAxis adecuadas.

La pila al 100% solo admite valores de datos de tipo number y debe tener un modelo de referencia de cero.

Tipo: booleano/cadena
Predeterminado: falso
leyenda

Un objeto con miembros para configurar varios aspectos de la leyenda. Para especificar las propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Tipo: objeto
Valor predeterminado: nulo
legend.pageIndex

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

Tipo: Número
Valor predeterminado: 0
legend.position

Posición de la leyenda. Puede ser una de las siguientes:

  • "parte inferior": se encuentra debajo del gráfico.
  • "left": se encuentra a la izquierda del gráfico, siempre que el eje izquierdo no tenga ninguna serie asociada. Por lo tanto, si quieres que la leyenda se encuentre a la izquierda, usa la opción targetAxisIndex: 1.
  • “in”: dentro del gráfico, en 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”: se encuentra encima del gráfico.
Tipo: string
Configuración predeterminada: "derecha"
legend.alignment

Alineación de la leyenda Puede ser una de las siguientes:

  • "start": alineado con el inicio del área asignada a la leyenda.
  • "center": Se centra en el área asignada a la leyenda.
  • "end": Alineado con el final del área asignada a la leyenda.

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

El valor predeterminado depende de la posición de la leyenda. Para las leyendas “inferior”, el valor predeterminado es “center”; para las leyendas “inferior”, el valor predeterminado es “start”.

Tipo: string
Predeterminada: automática
legend.textStyle

Un objeto que especifica el estilo de texto de la leyenda. El objeto tiene este formato:

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

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

Tipo: objeto
Predeterminado: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
orientación

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
Configuración predeterminada: "horizontal"
reverseCategories

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 es compatible con un eje discrete major.

Tipo: booleano
Predeterminado: falso
series

Un array de objetos, cada uno de los cuales describe el formato de la serie correspondiente en el gráfico. Si quieres usar valores predeterminados para 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: Es un objeto que se aplicará a las anotaciones de esta serie. 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.
  • targetAxisIndex: Indica a qué eje se asignará esta serie, en el que 0 es el eje predeterminado y 1 es el eje opuesto. El valor predeterminado es 0. Si se establece en 1, se define un gráfico en el que diferentes series se renderizan con ejes diferentes. Se debe asignar al menos una serie al eje predeterminado. Puedes definir una escala diferente para distintos ejes.
  • visibleInLegend: Es un valor booleano. Verdadero significa que la serie debe tener una entrada de leyenda y falso significa que no debería tenerla. La opción predeterminada es true.

Puedes especificar un array 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 dos declaraciones siguientes son idénticas y declaran la primera serie como negra y ausente en la leyenda, y la cuarta como roja y ausente de la leyenda: 

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

Un tema es un conjunto de valores de opciones predefinidos que trabajan en conjunto para lograr un comportamiento o efecto visual de gráfico específico. 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. Establece 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: nulo
título

Es el texto que se mostrará sobre el gráfico.

Tipo: string
Configuración predeterminada: Sin título
titlePosition

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 dentro del área del gráfico.
  • out: Dibuja el título fuera del área del gráfico.
  • ninguno: Omite el título.
Tipo: string
Configuración predeterminada: "out"
titleTextStyle

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

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

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

Tipo: objeto
Predeterminado: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
cuadro de información

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

{textStyle: {color: '#FF0000'}, showColorCode: true}
Tipo: objeto
Valor predeterminado: nulo
tooltip.ignoreBounds

Si se establece en 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 herramientas HTML. Si esta opción está habilitada con información sobre la herramienta de SVG, se recortará cualquier desbordamiento fuera de los límites del gráfico. Consulta Cómo personalizar el contenido de la información sobre la herramienta para obtener más detalles.

Tipo: booleano
Predeterminado: falso
tooltip.isHtml

Si la estableces como verdadera, usa información sobre la herramienta renderizada por HTML (en lugar de SVG). Consulta Cómo personalizar el contenido de la información sobre la herramienta para obtener más detalles.

Nota: La personalización del contenido HTML de la información sobre la herramienta mediante el rol de datos de la columna de información no es compatible con la visualización del diagrama de burbujas.

Tipo: booleano
Predeterminado: falso
tooltip.showColorCode

Si esta preferencia se establece como "true", muestra cuadrados de color junto a la información de la serie en el cuadro de información. El valor predeterminado es verdadero cuando focusTarget se establece como "category". De lo contrario, es falso.

Tipo: booleano
Predeterminada: automática
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 cadena HTML de color, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

Tipo: objeto
Predeterminado: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

La interacción del usuario que hace que se muestre el cuadro de información:

  • "enfoque": La información sobre la herramienta se mostrará cuando el usuario coloque el cursor sobre el elemento.
  • "none": No se mostrará la información sobre la herramienta.
  • "selección": La información sobre la herramienta se mostrará cuando el usuario seleccione el elemento.
Tipo: string
Predeterminado: "foco"
líneas de tendencia

Muestra las líneas de tendencia en los gráficos que las admiten. De forma predeterminada, se usan las 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, las 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
    }
  }
}
Tipo: objeto
Valor predeterminado: nulo
trendlines.n.color

Es el color de la línea de tendencia , expresado como un nombre de color en inglés o una cadena hexadecimal.

Tipo: string
Predeterminado: color predeterminado de la serie
trendlines.n.degree

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

Tipo: Número
Valor predeterminado: 3
trendlines.n.labelInLegend

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

Tipo: string
Valor predeterminado: nulo
trendlines.n.lineWidth

Es el ancho de línea de la línea de tendencia en píxeles.

Tipo: Número
Valor predeterminado: 2
trendlines.n.opacity

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

Tipo: Número
Predeterminado: 1.0
trendlines.n.pointSize

Las líneas de tendencia se crean a través de un conjunto de puntos en el gráfico. Esta opción, muy poco necesaria, te permite personalizar el tamaño de los puntos. Por lo general, la opción lineWidth de la línea de tendencia será preferible. Sin embargo, necesitarás esta opción si usas la opción global pointSize y quieres un tamaño de punto diferente para tus líneas de tendencia.

Tipo: Número
Configuración predeterminada: 1
trendlines.n.pointsVisible

Las líneas de tendencia se crean sellando varios puntos en el gráfico. La opción pointsVisible de la línea de tendencia determina si son visibles los puntos de una línea de tendencia en particular.

Tipo: booleano
Predeterminado: verdadero
trendlines.n.showR2

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

Tipo: booleano
Predeterminado: falso
trendlines.n.type

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

Tipo: string
Predeterminado: lineal
trendlines.n.visibleInLegend

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

Tipo: booleano
Predeterminado: falso
vAxes

Especifica las propiedades de los ejes verticales individuales en caso de que el gráfico tenga varios ejes verticales. Cada objeto secundario es un objeto vAxis y puede contener todas las propiedades compatibles con 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 con series.targetAxisIndex y, luego, configúralo 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 array: 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 array es un array de objetos, uno por eje. Por ejemplo, la siguiente notación de estilo de array es idéntica al objeto vAxis que se mostró anteriormente: 

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
Tipo: Arreglo de objetos o de objetos con objetos secundarios
Valor predeterminado: nulo
vAxis

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 objeto, como se muestra a continuación: 

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Tipo: objeto
Valor predeterminado: nulo
vAxis.baseline

La propiedad vAxis, que especifica el modelo de referencia del eje vertical. Si la línea de base es más grande que la línea de cuadrícula más alta o más pequeña 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
Predeterminada: automática
vAxis.baselineColor

Especifica el color de la línea de base para el eje vertical. Puede ser cualquier cadena HTML de color, por ejemplo: 'red' o '#00cc00'.

Tipo: Número
Predeterminado: “negro”
vAxis.direction

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

Tipo: 1 o -1
Configuración predeterminada: 1
vAxis.format

Una cadena de formato para etiquetas de ejes numéricos. 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 los siguientes valores:

  • {format: 'none'}: Muestra los números sin formato (p.ej., 8,000,000)
  • {format: 'decimal'}: Muestra números con separadores de miles (p.ej., 8 000 000)
  • {format: 'scientific'}: muestra 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 números abreviados (p.ej., 8 millones)
  • {format: 'long'}: Muestra los números como palabras completas (p.ej., 8 millones)

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

En el cálculo de los valores de marcas y las líneas de cuadrícula, se considerarán varias combinaciones alternativas de todas las opciones de líneas de cuadrícula relevantes, y las alternativas se rechazarán si se duplican o se superponen las etiquetas de marca con formato. Por lo tanto, puedes especificar format:"#" si solo quieres mostrar valores enteros de marca, pero ten en cuenta que si ninguna alternativa cumple con esta condición, no se mostrarán marcas de cuadrícula ni marcas.

Tipo: string
Predeterminada: automática
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 de forma horizontal. Para especificar las propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: 

{color: '#333', minSpacing: 20}
Tipo: objeto
Valor predeterminado: nulo
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
Predeterminado: “#CCC”
vAxis.gridlines.count

Es 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 las líneas de cuadrícula. Puedes especificar un valor de 1 para dibujar solo una línea de cuadrícula o 0 para no dibujar ninguna. Especifica -1, que es la opción predeterminada, para calcular automáticamente la cantidad de líneas de cuadrícula según otras opciones.

Tipo: Número
Valor predeterminado: -1
vAxis.gridlines.interval

Es un array de tamaños (como valores de datos, no píxeles) entre líneas de cuadrícula adyacentes. Por el momento, esta opción solo es para ejes numéricos, pero es similar a las opciones de gridlines.units.<unit>.interval, que se usan solo para fechas y horas. Para las escalas lineales, el valor predeterminado es [1, 2, 2.5, 5], lo que significa que los valores de las líneas de cuadrícula pueden corresponder a cada unidad (1), a unidades pares (2) o a múltiplos de 2.5 o 5. También se considera cualquier potencia de 10 veces estos valores (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 el 10.
Predeterminado: computado
vAxis.gridlines.minSpacing

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

Tipo: Número
Predeterminado: computado
vAxis.gridlines.multiple

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

Tipo: Número
Configuración predeterminada: 1
vAxis.gridlines.units

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

El formato general es:

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 horarios.

Tipo: objeto
Valor predeterminado: nulo
vAxis.minorGridlines

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

Tipo: objeto
Valor predeterminado: nulo
vAxis.minorGridlines.color

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

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

La opción minorGridlines.count está obsoleta en su mayoría, excepto para inhabilitar las líneas de cuadrícula secundarias si se establece el recuento en 0. La cantidad de líneas de cuadrícula menores 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
Configuración predeterminada: 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 que se elija siempre será un divisor par del intervalo de líneas de cuadrícula principal. El intervalo predeterminado para las escalas lineales es [1, 1.5, 2, 2.5, 5] y para las escalas logarítmicas es [1, 2, 5].

Tipo: Número
Configuración predeterminada:1
vAxis.minorGridlines.minSpacing

Es 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 1/2 el espaciado mínimo de las líneas de cuadrícula principales para escalas lineales y 1/5 el espaciado mínimo para las escalas logarítmicas.

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

Igual que para la gridlines.multiple principal.

Tipo: Número
Configuración predeterminada: 1
vAxis.minorGridlines.units

Anula el formato predeterminado para varios aspectos de los tipos de datos de fecha, fecha y hora y hora del día cuando se usa con el gráfico menorGridlines calculada. Permite formatear años, meses, días, horas, minutos, segundos y milisegundos.

El formato general es:

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 horarios.

Tipo: objeto
Valor predeterminado: nulo
vAxis.logScale

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

Tipo: booleano
Predeterminado: falso
vAxis.scaleType

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

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

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

Tipo: string
Valor predeterminado: nulo
vAxis.textPosition

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

Tipo: string
Configuración predeterminada: "out"
vAxis.textStyle

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

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

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

Tipo: objeto
Predeterminado: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

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

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

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
Predeterminada: automática
vAxis.title

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

Tipo: string
Configuración predeterminada: Sin título
vAxis.titleTextStyle

Un objeto que especifica el estilo de 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 cadena HTML de color, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

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

Mueve el valor máximo del eje vertical al valor especificado; este aparecerá hacia arriba en la mayoría de los gráficos. Se ignora si se establece en un valor inferior al valor Y máximo de los datos. vAxis.viewWindow.max anula esta propiedad.

Tipo: Número
Predeterminada: automática
vAxis.minValue

Mueve el valor mínimo del eje vertical al valor especificado; este aparecerá hacia abajo 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: nulo
vAxis.viewWindowMode

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

  • "pretty": Escala los valores verticales para que los valores de datos máximo y mínimo se rendericen un poco dentro de la parte inferior y superior del área del gráfico. El objeto viewWindow se expande a la línea de cuadrícula principal más cercana para los números, o a la línea de cuadrícula secundaria más cercana para las fechas y horas.
  • "maximized": escala los valores verticales para que los valores de datos máximo y mínimo toquen la parte superior e inferior del área del gráfico. Esto hará que vaxis.viewWindow.min y vaxis.viewWindow.max se ignoren.
  • "explícito": Es una opción obsoleta para especificar los valores de escala inferior y superior del área del gráfico. (Obsoleto porque es redundante con vaxis.viewWindow.min y vaxis.viewWindow.max. Se recortarán los valores de datos que estén 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: Equivalente 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.

Tipo: objeto
Valor predeterminado: nulo
vAxis.viewWindow.max

El valor máximo de datos verticales que se renderizará.

Se ignora cuando vAxis.viewWindowMode es "pretty" o "maximized".

Tipo: Número
Predeterminada: automática
vAxis.viewWindow.min

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

Se ignora cuando vAxis.viewWindowMode es "pretty" o "maximized".

Tipo: Número
Predeterminada: automática
width

Es el ancho del gráfico (en píxeles).

Tipo: Número
Predeterminado: Ancho del elemento contenedor

Métodos

Método
draw(data, options)

Dibuja el gráfico. El gráfico acepta más llamadas de método solo después de que se activa el evento 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.

Tipo de datos que se muestra: objeto
getBoundingBox(id)

Muestra un objeto que contiene las partes izquierda, superior, ancho y altura del elemento id del gráfico. El formato de 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 del gráfico de un gráfico vertical (por ejemplo, las columnas):
cli.getBoundingBox('vAxis#0#gridline')
Cuadro de límite de los datos del gráfico de un gráfico horizontal (p.ej., de barras):
cli.getBoundingBox('hAxis#0#gridline')

Los valores están relacionados con el contenedor del gráfico. Llámalo después de que se dibuje el gráfico.

Tipo de datos que se muestra: objeto
getChartAreaBoundingBox()

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

var cli = chart.getChartLayoutInterface();

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

Los valores están relacionados con el contenedor del gráfico. Llámalo después de que se dibuje el gráfico.

Tipo de datos que se muestra: objeto
getChartLayoutInterface()

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

Se puede llamar a los siguientes métodos en el objeto que se muestra:

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

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

Tipo de datos que se muestra: objeto
getHAxisValue(xPosition, optional_axis_index)

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

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

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

Tipo de datos que se muestra: número
getImageURI()

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

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

Consulta Cómo imprimir gráficos en PNG.

Tipo de datos que se muestra: string
getSelection()

Muestra un array de las entidades del gráfico seleccionadas. Las entidades seleccionables son barras, entradas de leyenda y categorías. Una barra corresponde a una celda en la tabla de datos, una leyenda a una columna (el índice de fila es nulo) y una categoría a una fila (el índice de columna es nulo). Para este gráfico, solo se puede seleccionar una entidad en un momento determinado. Extended description .

Tipo de datos que se muestra: Es el array de elementos de selección.
getVAxisValue(yPosition, optional_axis_index)

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

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

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

Tipo de datos que se muestra: número
getXLocation(dataValue, optional_axis_index)

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

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

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

Tipo de datos que se muestra: número
getYLocation(dataValue, optional_axis_index)

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

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

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

Tipo de datos que se muestra: número
removeAction(actionID)

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

Tipo de datos que se muestra: none
setAction(action)

Establece una acción de información sobre la herramienta que se ejecutará cuando el usuario haga clic en el texto de acción.

El método 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 acción) y action (la función que se debe ejecutar cuando un usuario hace clic en el texto de 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 seleccionables son barras, entradas de leyenda y categorías. Una barra corresponde a una celda en la tabla de datos, una leyenda a una columna (el índice de fila es nulo) y una categoría a una fila (el índice de 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 sus recursos asignados.

Tipo de datos que se muestra: ninguno

Eventos

Para obtener más información sobre cómo usar estos eventos, consulta Interactividad básica, Cómo controlar eventos y Cómo activar eventos.

Nombre
animationfinish

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

Propiedades: ninguna
click

Se activa cuando el usuario hace clic en el gráfico. Se puede usar para identificar cuándo se hace clic en el título, los elementos de datos, las entradas de leyenda, los ejes, las líneas de cuadrícula o las etiquetas.

Propiedades: targetID
error

Se activa cuando se produce un error cuando se intenta renderizar el gráfico.

Propiedades: ID, mensaje
legendpagination

Se activa cuando el usuario hace clic en las flechas de paginación de la leyenda. Devuelve el índice de páginas basado en cero de la leyenda actual 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 columna del elemento de tabla de datos correspondiente.

Propiedades:fila, columna
onmouseout

Se activa cuando el usuario aleja el mouse de una entidad visual. Devuelve los índices de filas y columnas del elemento de tabla de datos correspondiente.

Propiedades:fila, columna
ready

El gráfico está listo para llamadas de método externas. Si deseas interactuar con el gráfico y llamar a los métodos después de dibujarlo, debes configurar un objeto de escucha para este evento antes de llamar al método draw e llamarlos solo después de que se haya activado el evento.

Propiedades: ninguna
select

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

Propiedades: ninguna

Política de datos

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