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