Gráfico de imágenes de velas

Importante: La sección de gráficos de imágenes de las herramientas de Google Chart dejó de estar disponible oficialmente a partir del 20 de abril de 2012. Continuará funcionando de acuerdo con nuestra política de baja.

  1. Descripción general
  2. Ejemplo
  3. Cargando
  4. Formato de datos
  5. Opciones de configuración
  6. Métodos
  7. Eventos
  8. Política de Datos

Descripción general

Un gráfico de velas que se procesa como una imagen con la API de gráficos de Google

Un gráfico de velas se utiliza para mostrar un valor de apertura y uno de cierre superpuestos sobre una varianza total. Los gráficos de velas suelen usarse para mostrar el comportamiento del valor de las acciones. En este gráfico, los elementos en los que el valor de apertura es menor que el valor de cierre se dibujan en verde y los elementos en los que el valor de apertura es mayor que el valor de cierre se dibujan en rojo. Para obtener más información, consulta la documentación sobre velas en la API de Google Charts.

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:["imagechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var options = {};
        dataTable = google.visualization.arrayToDataTable([
          ['Gainers',10,30,45,60],
          ['Losers',20,35,25,45],
          ], true);

       var chart = new google.visualization.ImageCandlestickChart(document.getElementById('chart_div'));
       chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Cargando

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

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

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

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

Formato de los datos

Cinco columnas, en las que cada fila describe un solo marcador de la vela:

  • Col 0: Es una string que se usa como etiqueta para este marcador en el eje X.
  • Col 1: número que especifica el valor mínimo y mínimo de este marcador Esta es la base de la línea negra.
  • Col 2: número que especifica el valor inicial o de inicio de este marcador Este es un borde vertical de la vela. Si es menor que el valor de la columna 3, la vela será de color verde; de lo contrario, será de color rojo.
  • Col 3: Número que especifica el valor de cierre o final de este marcador Este es el segundo borde vertical de la vela. Si es menor que el valor de la columna 2, la vela será roja; de lo contrario, será verde.
  • Col 4: un número que especifica el valor máximo y máximo de este marcador Esta es la parte superior de la línea negra.

Opciones de configuración

Además de las opciones que admite el gráfico de imágenes genérico, el gráfico de velas admite las siguientes opciones:

Nombre Tipo Predeterminado Descripción
Color de fondo string "#FFFFFF" (blanco) El color de fondo del gráfico Esta es una string #RRGGBB, incluida la marca #.
mostrarAxisLines boolean true Indica si se muestran las líneas de los ejes. Si se establece como falsa, tampoco se mostrarán las etiquetas de los ejes.
alto número Altura del elemento contenedor Altura del gráfico, en píxeles. Si 30 <height o height > 1,000, el valor predeterminado será 200.
máx. número Valor máximo de datos El valor máximo del eje Y.
min número Valor mínimo de datos El valor mínimo del eje Y.
showCategoryLabels. boolean true Si es falso, se ocultan las etiquetas del eje X.
showValueLabels boolean true Si es falso, se ocultan las etiquetas del eje Y.
showValueLabelsInternal número automático Espaciado entre las etiquetas del eje Y, en píxeles.
title string '' Texto para mostrar arriba del gráfico
ancho número Ancho del elemento contenedor Ancho del gráfico en píxeles. Si ancho es menor que 30 o mayor que 1,000, ancho se establecerá en 300.

Métodos

Método Tipo de datos que se muestra Descripción
draw(data, options) ninguno Dibuja el gráfico.

Eventos

Puedes registrarte para escuchar los eventos que se describen en la página Gráfico genérico de imágenes.

Política de Datos

Consulta la política de registro de la API de Charts.