Gráfico de imágenes de velas

Importante: La sección de gráficos de imágenes de las herramientas de gráficos de Google se dio de baja oficialmente a partir del 20 de abril de 2012. Seguirá funcionando de acuerdo con nuestra política de baja.

  1. Overview
  2. Ejemplo
  3. Cargando
  4. Formato de los 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 renderiza como una imagen con la API de Google Charts.

Un gráfico de velas se utiliza para mostrar un valor de apertura y cierre superpuesto sobre una varianza total. Los gráficos de velas a menudo se usan 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, mientras que los elementos en los que el valor de apertura es mayor que el valor de cierre se dibujan en rojo. Consulta la documentación de las velas en la API de Google Charts para obtener más información.

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 datos

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

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

Opciones de configuración

Además de las opciones compatibles con el gráfico de imágenes genéricas, el gráfico de velas admite las siguientes opciones:

Nombre Tipo Predeterminado Descripción
backgroundColor cadena '#FFFFFF' (blanco) El color de fondo del gráfico. Esta es una cadena #RRGGBB, incluida la marca #.
showAxisLines boolean verdadero Establece si se muestran las líneas del eje. Si la estableces como falsa, tampoco se mostrarán las etiquetas de los ejes.
height número Altura del elemento contenedor Altura del gráfico en píxeles. Si 30 < height o height > 1,000, este valor se establecerá de forma predeterminada en 200.
max número Valor máximo de datos El valor máximo del eje Y.
min número Valor mínimo de datos Es el valor mínimo del eje Y.
showCategoryLabels boolean verdadero Si es falso, oculta las etiquetas del eje X.
showValueLabels boolean verdadero Si es falso, oculta las etiquetas del eje Y.
showValueLabelsInternal número automático Es el espaciado entre las etiquetas del eje Y, en píxeles.
título cadena . Es el texto que se mostrará sobre el gráfico.
width número Ancho del elemento contenedor Es el ancho del gráfico (en píxeles). Si width es menor que 30 o mayor que 1,000, entonces width 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

Regístrate para escuchar los eventos descritos en la página Gráfico de imágenes genéricas.

Política de Datos

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