Visualización: gráfico circular

Descripción general

Un gráfico circular que se procesa dentro del navegador mediante SVG o VML Muestra la información sobre la herramienta cuando se desplaza el cursor sobre secciones.

Ejemplo

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

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

Cómo crear un gráfico circular en 3D

Si configuras la opción is3D en true, el gráfico circular se dibujará como si tuviera tres dimensiones:

is3D es false de forma predeterminada, por lo que aquí se establece explícitamente en true:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Cómo crear un gráfico de anillo

Un gráfico de donas es un gráfico circular con un orificio en el centro. Puedes crear gráficos de anillo con la opción pieHole:

La opción pieHole debe establecerse en un número entre 0 y 1, que corresponda a la proporción de radios entre el agujero y el gráfico. Los números entre 0.4 y 0.6 se verán mejor en la mayoría de los gráficos. Se ignorarán los valores iguales o superiores a 1, y un valor de 0 cerrará por completo tu orificio circular.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

No puedes combinar las opciones pieHole y is3D; si lo haces, se ignorará pieHole.

Ten en cuenta que los gráficos de Google intentan colocar la etiqueta lo más cerca posible del centro de la porción. Si tienes un gráfico de rosquilla con solo una rebanada, el centro de la porción puede caer en el agujero de la rosquilla. En ese caso, cambia el color de la etiqueta:

Opciones
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
HTML completo
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donut_single" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Cómo rotar un gráfico circular

De forma predeterminada, los gráficos circulares comienzan con el borde izquierdo de la primera porción que apunta directamente hacia arriba. Puedes cambiar esto con la opción pieStartAngle:

Aquí, rotaremos el gráfico 100 grados en el sentido de las manecillas del reloj con una opción de pieStartAngle: 100. (Entonces, se elige porque ese ángulo en particular hace que la etiqueta "italiana" se ajuste a la porción).

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['German',  5.85],
          ['French',  1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'Swiss Language Use (100 degree rotation)',
        pieStartAngle: 100,
      };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Cómo expandir una sección

Puedes separar porciones de gráfico circular del resto del gráfico con la propiedad offset de la opción slices:

Para separar una porción, crea un objeto slices y asigna al número de porción correspondiente un offset entre 0 y 1. A continuación, asignamos desplazamientos progresivamente más grandes a las porciones 4 (guyaratí), 12 (maratí), 14 (oriya) y 15 (panyabí):

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Cómo quitar secciones

Para omitir una porción, cambia el color a 'transparent':

También usamos pieStartAngle para rotar el gráfico 135 grados, pieSliceText a fin de quitar el texto de las secciones y tooltip.trigger para inhabilitar la información sobre la herramienta:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
          legend: 'none',
          pieSliceText: 'none',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pacman'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="pacman" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Límite de visibilidad de las secciones

Puedes establecer un valor como porción de una porción circular para que se procese de forma individual. Este valor corresponde a una fracción del gráfico (todo el gráfico tiene el valor 1). Para establecer este umbral como un porcentaje del total, divide el porcentaje que desees por 100 (para un umbral del 20%, el valor sería 0.2).

sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.

Cualquier porción más pequeña que este umbral se combinará en una sola porción “Otras” y tendrá el valor combinado de todas las porciones inferiores al límite.

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Pizza');
      data.addColumn('number', 'Populartiy');
      data.addRows([
        ['Pepperoni', 33],
        ['Hawaiian', 26],
        ['Mushroom', 22],
        ['Sausage', 10], // Below limit.
        ['Anchovies', 9] // Below limit.
      ]);

      var options = {
        title: 'Popularity of Types of Pizza',
        sliceVisibilityThreshold: .2
      };

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

Cargando

El nombre del paquete google.charts.load es "corechart".

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

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

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

Formato de los datos

Filas: Cada fila de la tabla representa una porción.

Columnas:

  Columna 0 Columna 1 Columna N (opcional)
Propósito: Etiquetas de Slice Valores de Slice Funciones opcionales
Tipo de datos: string número
Rol: dominio datos
Funciones de columna opcionales: Ninguno Ninguno

Opciones de configuración

Nombre
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
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
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
alto

Altura del gráfico, en píxeles.

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

Si es verdadero, muestra un gráfico tridimensional.

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
leyenda.posición

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

  • "bottom": Muestra la leyenda debajo del gráfico.
  • "labeled": Dibuja líneas que conectan porciones sus valores de datos.
  • "left": Muestra la leyenda ubicada a la izquierda del gráfico.
  • "none": No muestra ninguna leyenda.
  • "derecha": Muestra la leyenda a la derecha del gráfico.
  • "top": Muestra la leyenda sobre el gráfico.
Tipo: string
Predeterminado: "right"
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
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>}
pastelHole

Si se muestra entre 0 y 1, se muestra un gráfico de anillo. El agujero con un radio es igual a number por el radio del gráfico.

Tipo: número
Valor predeterminado: 0
pastelSliceBorderColor

El color de los bordes de las secciones. Solo se aplica cuando el gráfico es bidimensional.

Tipo: string
Predeterminado: "white"
Texto de la presentación

El contenido del texto que se muestra en la porción. Puede ser uno de los siguientes:

  • 'porcentaje': porcentaje del tamaño de la porción sobre el total.
  • 'valor': El valor cuantitativo del segmento.
  • 'etiqueta': el nombre de la porción.
  • "none": no se muestra texto.
Tipo: string
Configuración predeterminada: "percentage"
pastelSliceTextStyle

Un objeto que especifica el estilo de texto de la porción. El objeto tiene este formato:

{color: <string>, fontName: <string>, fontSize: <number>}

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>}
ángulo de inicio del pastel

El ángulo en grados al que se rotará el gráfico. El valor predeterminado de 0 orientará el borde superior izquierdo de la primera porción directamente hacia arriba.

Tipo: número
Predeterminado: 0
Categorías inversas

Si es verdadero, dibuja las secciones en sentido antihorario. El valor predeterminado es dibujar en el sentido de las agujas del reloj.

Tipo: booleano
Valor predeterminado: falso
pastelResidueSliceColor

Color de la porción de combinación que contiene todas las porciones inferiores a sliceVisibilityThreshold.

Tipo: string
Configuración predeterminada: "#ccc"
pieResidueSliceLabel

Una etiqueta para la porción de combinación que contiene todas las porciones inferiores a sliceVisibilityThreshold.

Tipo: string
Predeterminado: "Otros"
porciones

Una matriz de objetos, cada uno de los cuales describe el formato de la porción correspondiente en el pastel. Para usar valores predeterminados en una porción, especifica un objeto vacío (es decir, {}). Si no se especifica un segmento o un valor, se usará el valor global. Cada objeto admite las siguientes propiedades:

  • color: Es el color que se usa para esta porción. Especifica una cadena de color HTML válida.
  • offset: Indica la distancia para separar la porción del resto del pastel, de 0.0 (en absoluto) a 1.0 (el radio del pastel).
  • textStyle: Anula el pieSliceTextStyle global para esta porción.

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

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
      
Tipo: Arreglo de objetos con objetos anidados
Predeterminado: {}
sliceVisibilityThreshold

El valor fraccionario del pastel, debajo del cual una porción no se mostrará de forma individual. Todas las porciones que no pasen este umbral se combinarán en una sola porción “Otras”, cuyo tamaño es la suma de todos sus tamaños. De forma predeterminada, no muestra de forma individual ninguna porción de menos de medio grado.

// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
      
Tipo: número
Predeterminado: medio grado (.5/360, 1/720 o .0014)
title

Texto para mostrar arriba del gráfico

Tipo: string
Predeterminado: sin título
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 porción en la información sobre la herramienta.

Tipo: booleano
Valor predeterminado: falso
Información sobre la herramienta

Qué información mostrar cuando el usuario se desplaza sobre una porción de gráfico circular Se admiten los siguientes valores:

  • “Ambos”: [Predeterminado] Muestra el valor absoluto de la porción y el porcentaje de la totalidad.
  • “valor”: Se muestra solo el valor absoluto de la porción.
  • 'porcentaje': Muestra solo el porcentaje de la parte representada por la porción.
Tipo: string
Predeterminado: "ambos"
tooltip.textStyle

Un objeto que especifica el estilo de texto de la información sobre la herramienta. El objeto tiene este formato:

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

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"
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 seleccionables son fragmentos y entradas de leyenda. 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 seleccionables son fragmentos y entradas de leyenda. 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
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
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. Una entrada de porción o leyenda se correlaciona con una fila en la tabla de datos (el índice de columna es nulo).

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. Una entrada de porción o leyenda se correlaciona con una fila en la tabla de datos (el índice de columna es nulo).

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.